React+TypeScript+Prettier+ESLint+Storybook環境構築

UIライブラリとして React
型のある言語として TypeScript
Formatterとして Prettier
Linterとして ESLint
コンポーネントの開発環境として Storybook
という構成にするときに行ったこと

react+typescriptを入れる

npx create-react-app test-app --typescript
cd test-app

prettierを入れる

yarn add --dev prettier eslint-config-prettier eslint-plugin-prettier
# prettierを実行するためのパスを通す
export PATH=$PATH:./node_modules/.bin

ESLintを入れて設定

yarn add --dev eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y eslint-plugin-react-hooks
vi .eslintrc.js

.eslintrc.js

module.exports = {
  "parser": "@typescript-eslint/parser",
  "env": {
    "es6": true,
    "browser": true
  },
  "extends": [
    "airbnb",
    "plugin:prettier/recommended"
  ],
  "globals": {
    "__DEV__": true
  },
  "plugins": [
    "@typescript-eslint",
    "react-hooks"
  ],
  "parserOptions": {
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "settings": {
    "import/extensions": [
      ".js",
      ".jsx",
      ".ts",
      ".tsx"
    ],
    "import/core-modules": [
      "app"
    ],
    "import/resolver": {
      "node": {
        "extensions": [
          ".js",
          ".jsx",
          ".ts",
          ".tsx"
        ]
      }
    }
  },
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "singleQuote": true,
        "trailingComma": "es5"
      }
    ],
    "react/prop-types": [
      0
    ],
    "react-hooks/rules-of-hooks": "error",
    "react/jsx-filename-extension": [
      "error",
      {
        "extensions": [
          ".js",
          ".jsx",
          ".ts",
          ".tsx"
        ]
      }
    ],
    "import/extensions": [
      "error", "always",
      {
        "js": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never"
      }
    ]
  }
}

StoryBookを入れる

yarn add --dev @storybook/cli

package.jsonのscriptsを以下に変更

vi package.json

package.json

~略~
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint --ext .js,.jsx,.ts,.tsx --ignore-path .gitignore .",
    "lintfix": "eslint --fix --ext .js,.jsx,.ts,.tsx --ignore-path .gitignore .",
    "storybook": "start-storybook -p 9009 -s public",
    "build-storybook": "build-storybook -s public"
  },
~略~

パッケージのaudit

yarn audit
# auditでworningあればupgrade
# yarn upgrade

テスト&ビルド

yarn run tsc
yarn run lint
# ESLint(構文チェック)でerrorが出たらprettier(コード整形)しながら修正
# yarn run lint --fix
yarn storybook
yarn run build

参考

React + TypeScriptプロジェクトをcreate-react-appに任せる
https://qiita.com/namaozi/items/7446804126a055caf254

Yarnを使ったプロジェクトでよく使うメンテナンス系コマンドまとめ
https://kamoqq.info/post/how-to-maintenance-yarn-project/

typescript-eslintの拡張子設定
https://qiita.com/karak/items/12811d235b0d8bc8ad00

typescript-eslintでtypescriptのlintをeslintで行いつつ、airbnbの設定でいきましょう的なお話
http://watanabeyu.blogspot.com/2019/02/typescript-eslinttypescriptlinteslintai.html

Storybook V5+React+TypeScriptで環境構築
https://qiita.com/otanu/items/dd06d6702f673268c74e

Reactを使ったモダンなフロントエンド開発の環境構築
https://qiita.com/toshi-toma/items/8ee55304f09b5840b9a4

Atomic Designを使ってReactコンポーネントを再設計した話
https://blog.spacemarket.com/code/atomic-design%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6react%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%82%92%E5%86%8D%E8%A8%AD%E8%A8%88%E3%81%97%E3%81%9F%E8%A9%B1/

Atomic Designの実装例 〜Atomic Designを使ったコンポーネント指向のUI開発：Q〜
http://ugap.hatenablog.com/entry/2018/07/23/002922?utm_source=newsformat.jp&utm_medium=RSS-matome