フロントエンドやるなら入れておくべきESlintってなに？

#プログラミング勉強日記
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ファイルを作成して、以下のように設定する。

.eslintrc.json

{
  "parser": "@typescript-eslint/parser", 
  "extends": [
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true // Allows for the parsing of JSX
    }
  },
  "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のみを対象に解析する。

package.json

"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の仕様でリントチェックを行うように定義)

..eslintrc.json

{
  "extends": ["google"],
  "parserOptions": {
    "ecmaVersion": 2018
  }
}

　次に、pakage.jsonに定義したscriptをprettier-eslintを使用したコマンドに変更する。

package.json

{
  "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の導入方法
フロントエンド開発で必須のコード整形ツール