Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
83
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

フロントエンドやるなら入れておくべき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の導入方法
フロントエンド開発で必須のコード整形ツール

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
83
Help us understand the problem. What are the problem?