ESLint入れた

12/18（水）

TypeScript+ReactのプロジェクトにESLintとprettierを入れた。ESLintのプラグインを上手く組み合わせていくテクニックが難しかった。

結論はこんな感じ。

.eslintrc.json

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "tsconfig.json",
    "sourceType": "module"
  },
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
    "plugin:react/recommended"
  ]
}

• prettier/recommendedは入れないとprettierとESLintが干渉するらしいので
  • 参考: https://prettier.io/docs/en/integrating-with-linters.html#recommended-configuration
• react/recommendedは入れないとJSXで使われている変数がunused扱いになるので
  • 参考: https://github.com/typescript-eslint/typescript-eslint/issues/111#issuecomment-456502559
• 順番も大事らしい（上から下に適用？）

yarn lint で能動的にlintを実行できるようにしつつ、lint-stagedとhuskyでcommit時にも仕込んだ。