プログラミング勉強日記
2020年11月28日
昨日の記事でPrettierについて扱ったが、Prettierと合わせて使用することのできるESlintについて紹介する。
ESlintとは
ESlint(読み方：「イーエスリント」)は、JavaScriptやTypeScriptなどの静的解析ツールである。ESlintを導入することで、単純な構文エラーやプロジェクト固有のコーディング規約を定義することができる。厳密なルールを定義することで、複数人で開発する場合でもシステム全体のコードの一貫性を維持することができる。
ESlintの特徴
- 自由に多くのルールを設定できる
- 独自ルールを作成するAPI
- 固有のライブラリー、フレームワーク、および実践のルールを持つ多数のプラグイン
- ES6、ES7、JSXの内蔵サポート
- 迅速に開始できるように、推奨ルールだけでなくサードパーティの設定利用が可能
- Sublime、Vim、JetBrainsの製品およびVisual Studio Codeなどの、複数のエディタやIDEとの統合が可能
(参考文献：JSプログラマーのイラッとする「クセ」はESLintを導入して対処しよう)
ESlintの導入方法
1. ESlintを使ってTypeScriptを解析するためのライブラリをインストールする
nodeのルートディレクトリに移動して、eslint, @typescript-eslint/parser, @typescript-eslint/eslint-plugin, eslint-plugin-reactの4つをインストールする。
npm install --save eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react
2. ファイルを作成して設定する
eslintrc.jsonファイルを作成して、以下のように設定する。
{"parser":"@typescript-eslint/parser","extends":["plugin:react/recommended","plugin:@typescript-eslint/recommended"],"parserOptions":{"ecmaFeatures":{"jsx":true//AllowsfortheparsingofJSX}},"rules":{"react/prop-types":"off","@typescript-eslint/no-empty-interface":0},"settings":{"react":{"version":"detect"}}}3. package.jsonにscriptを追加する
package.jsonにESLintが実行できるようにscriptsタグに以下のコマンドを追加する。今回は拡張子が.tsと.tsxのみを対象に解析する。
"lint":"eslint . --ext .ts,.tsx"4. ESlintの実行
npm run lint
PrettierとESlintが連携してフォーマットを適用させる場合
Prettierはリントツールと組み合わせて利用することができるので、すでにESlintを使用してるプロジェクトでも使用することができる。
PrettierとESlintと組み合わせて使用するためには、prettier-eslintとprettier-eslint-cliが必要になる。
※Prettierの導入方法はこちらの記事で扱っている。
1. インストールする
Google JavaScript Style Guideに従ってeslint-config-googleをインストールする。
npm install -D prettier-eslint prettier-eslint-cli eslint-config-google
2. ESlintの設定をする
プロジェクトフォルダのルートに、.eslintrc.jsonというファイルを作成して以下の内容を記述する。(Google JavaScript Style Guideに準拠したECMAScript 2018の仕様でリントチェックを行うように定義)
{"extends":["google"],"parserOptions":{"ecmaVersion":2018}}次に、pakage.jsonに定義したscriptをprettier-eslintを使用したコマンドに変更する。
{"scripts":{"format":"prettier-eslint --write 'src/**/*.js'"},"devDependencies":{"eslint-config-google":"^0.13.0","prettier-eslint":"^8.8.2","prettier-eslint-cli":"^4.7.1"}}3. 実行する
コマンドプロンプトから以下のコマンドを実行して、Prettierで直されたコードがESlintに渡されてESlintの整形も適応される。
npm run format
参考文献
Next.jsを勉強してみる その⑤ 〜ESLintを導入する編〜
Prettierの導入方法
フロントエンド開発で必須のコード整形ツール