はじめに

前回の記事 React + TypeScript + Webpackで開発環境セットアップ に続き、プロジェクトにコードフォーマットと静的解析を導入していきます。🤖

プロジェクトファイルはこちらで公開中💁‍♂️
・説明に沿って導入を試したい場合はこのブランチ:topic/basic_template
・完成版を確認してみたい場合はこのブランチ:topic/lint_and_format

プラグイン

まずは、VSCodeにプラグインをインストールしましょう。
・Prettier
・ESLint

Prettier

$ yarn add -D prettier

設定ファイルを作成。

{
  "arrowParens": "always",
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "none",
  "semi": true,
  "printWidth": 120
}

VSCodeの設定から、保存時にフォーマットをオンにする。

src/index.tsxを開いて保存すると、フォーマットされましたね！

ESLint

$ yarn add -D eslint
$ yarn eslint --init

自分はこんな設定にしてみました。

自分はyarnを使っているので、自動生成されたpackage-lock.jsonは不要なので削除し、パッケージを改めてインストール。ちなみにeslint --initにおけるyarnサポートが無い理由については、このあたりを読むとわかります。

$ rm package-lock.json
$ yarn install

src/index.tsxでさっそくエラーが出ていますね。

.tsxでもJSXの記述を許可する為、設定ファイルのrulesに以下を追記。

{
  "rules": {
    "react/jsx-filename-extension": [1, { "extensions": [".jsx", ".tsx"] }]
  }
}

もうひとつ、webpack.config.jsにエラーが出ています。
どうやらPrettierのルールとバッティングしているので、eslint側のフォーマット関連ルールをeslint-config-prettierで無効にしましょう。

$ yarn add -D eslint-config-prettier

extendsの最後にprettierを追記すると、エラーが消えました。

{
  "extends": ["plugin:react/recommended", "airbnb", "prettier"]
}

コマンド追加

lintコマンドを追加しておきます。

"scripts": {
  "lint": "eslint '**/*.{js,ts,tsx}'"
}

Lint時にコードフォーマットもチェック

試しに、VSCodeの"Format On Save"を無効にした後、src/index.tsxの4行目末尾のセミコロンを削除してみる。

あら、lintを実行しても通ってしまいました。

$ yarn lint

Prettierによるフォーマット関連のチェックもlintと同時にチェックしたいですね、ということでeslint-plugin-prettierを導入。

$ yarn add -D eslint-plugin-prettier

extendsのprettierを以下のように変更

{
  "extends": ["plugin:react/recommended", "airbnb", "plugin:prettier/recommended"]
}

再度yarn lintすると、エラーが検知されるようになりました！🕵🏻‍♂️

コミットのタイミングでLint実行

ついでに、コミット直前に自動でlintするようにしておきます。

$ yarn add -D husky
$ touch .huskyrc.json

設定ファイルには以下のように記述。

{
  "hooks": {
    "pre-commit": "yarn lint"
  }
}

git commit時にyarn lintが実行されるようになりました。ナイスです👍

まとめ

今回はReact&TypeScriptなプロジェクトに導入する手順でしたが、基本的にeslint --init時の質問に答えていけば、自動で必要なパッケージがインストールされるので楽です。あとは、必要に応じてルールを追記/変更していけば良いですね！