reactアプリのeslint/prettier初期設定

create-react-appした後のeslint/prettierを設定した時の試行錯誤をメモ

create-react-appでアプリ初期構築

$ npx create-react-app my-react-app

typescriptで書きたい場合は以下 –typescript オプションを記載する

$ npx create-react-app my-react-app --typescript

VScodeのプラグインを入れる

• Prettier – Code formatter をExtentionで検索してinstall
• ESLint のExtentionもinstall

この時点でApp.tsxを編集して保存すると自動整形がかかり、

• ダブルクォーテーション
• 文末にセミコロン

が挿入される。
これは、どうもvscode自体の大本のsettingsのprettierの設定によるものっぽい
File -> Preferences -> Settings -> Extentions -> Prettierの
– Semi
– Single Quote
がそうみたいだ。
ここを変えると適応されるが、環境が変わるとその環境に依存されるので、設定ファイルに書いておきたい。
UserとWorkspaceがあるが、Workspaceの方を変えると、.vscode/settings.json が出来てプロジェクト固有の設定になるっぽい。
でもここで疑問が、.prettierrc.jsonという設定ファイルに書かれた設定はどうなるのか。
たぶんこっちに書いた方を優先させるようにするんだと思う。
なので、以下settings.jsonの以下をfalseにしてvscodeの自動フォーマットをoffに、.prettierrc.jsonの設定をonにするように以下のようにする

{
  "editor.formatOnSave": false, // これでvscode自体のformatがoff
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true // これで.eslintと.prettierrcの設定をon
  }
}

packageのinstall

# typescript (--typesciptオプション付きでcreate-react-appしたのでいらないか)
yarn add -D typescript
# eslist (yarn.lockのreact-scriptsの依存を見るとeslintが入っているのでこれはやらない方がよいか) yarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
# prittier
$ yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

eslintをinstallして $ yarn start すると下記のエラーでますので、eslinstをuninstallしよう。どうもreactですでにeslintを使っているので余計にインストールするなということかな。

The react-scripts package provided by Create React App requires a dependency:

  "eslint": "^6.6.0"

Don't try to install it manually: your package manager does it automatically.
However, a different version of eslint was detected higher up in the tree:

eslintを削除

$ $ yarn remove eslint

prettierでコード整形してみる

$ npx prettier --write src/App.tsx

無駄に改行していたり、インデントがそろっていないとちゃんと整形してくれる。
jsxの中のhtmlライクなところもちゃんとやってくれる。

ファイルの保存でeslintがきいていないような気がしたので以下出力パネルを見てみると
eslint-plugin-react-appというパッケージが足りていないエラーが出ているみたいだったのでinstall

$ yarn install -D eslint-plugin-react-app

こちらの記事が参考になった。ありがとうございます。
https://note.kiriukun.com/entry/20190817-eslint-not-working-in-vscode

まとめ

結局、create-react-app後に yarn install したのは以下でeslintはreact-scriptに依存しているものを使っていることになる。

package.json

package.json 抜粋
  "devDependencies": {
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react-app": "^6.2.2",
    "prettier": "^2.1.1"
  }

.vscode/settings.json

.vscode/settings.json は単純に、vscode自体の自動整形をoffにして、パッケージのをonにしているだけ

.vscode/settings.json
{
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

.pretterrc.json

.pretterrc.json ファイル名がrが一つ足りなかったのでしばらくハマった。。
文末のセミコロンは無し、文字列はシングルクォートで

.pretterrc.json 
{
  "semi": false,
  "singleQuote": true,
  "printWidth": 120
}

.eslintrc.json

.eslintrc.json これが一番設定が多くて謎だが、どこかから拝借してきてコピペ

.eslintrc.json
{
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "extends": [
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "eslint:recommended",
    "plugin:prettier/recommended",
    "prettier/@typescript-eslint"
  ],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2018,
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "plugins": ["react", "react-app", "react-hooks", "@typescript-eslint"],
  "rules": {
    "no-unused-vars": 0,
    "semi-spacing": [
      "error",
      {
        "after": true,
        "before": false
      }
    ],
    "no-extra-semi": "error",
    "no-unexpected-multiline": "error",
    "no-unreachable": "error",

    "@typescript-eslint/no-unused-vars": 0,
    "@typescript-eslint/no-use-before-define": [
      0,
      { "functions": false, "classes": false }
    ],
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/member-delimiter-style": "off",
    "indent": [2, 2, { "SwitchCase": 1 }],
    "react/prop-types": "off",
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn",
    "prettier/prettier": "error"
  }
}