LoginSignup
136

More than 3 years have passed since last update.

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

Posted at

プログラミング勉強日記

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
136