概要
- eslintというlinterを使用するにあたって、その仕組みなどを調べたことをまとめる
eslintとは
- JavaScriptのソースコードを静的解析するためのツール
##利点
- ソースの書き方を統一できる
- コンパイルする前にバグを検出できる(静的解析)
- vscode等と連携させることでバグってる箇所を波線で表示したりできる(便利)
導入の流れ
1. 設定ファイルを作成する
- eslint --initで作成する
- これ以降はインタラクティブに設定を選択することで柔軟にルールを作ることができる
eslint --init
1. ルールの使用目的
- シンタックスのチェックだけを行なうか、問題のあるコードも解析するか、そしてコードスタイルを適用するのか問われている
? How would you like to use ESLint?
To check syntax only #シンタックスチェックのみ
To check syntax and find problems #上記に加えてバグのあるコードも解析する
To check syntax, find problems, and enforce code style #上記に加えてコードスタイルも適用する
2. モジュールのインポートスタイル
- JavaScript modulesか、CommonJSか、インポートはしないかを選択する
? What type of modules does your project use? (Use arrow keys)
JavaScript modules (import/export)
CommonJS (require/exports)
None of these
3. 使用するフレームワーク
- 使用するフレームワークを選択する
? Which framework does your project use? (Use arrow keys)
React
Vue.js
None of these
4. TypeScriptを使用するか
? Does your project use TypeScript? (y/N)
5. ソースコードの実行場所
? Where does your code run? (Press <space> to select, <a> to toggle all, <i> to invert selection)
◯ Browser
◯ Node
6. 設定ファイル(.eslintrc.*)の出力形式
- JSかYAMLかJSONで選択できる
? What format do you want your config file to be in? (Use arrow keys)
JavaScript
YAML
JSON
*. 間の質問
- [1. ルールの使用目的](# 1. ルールの使用目的)で一番下を選択した場合にはその後の質問内容が変化する
? How would you like to define a style for your project? (Use arrow keys)
> Use a popular style guide
Answer questions about your style
Inspect your JavaScript file(s)
- Use a popular style guideを選択するとどのコーディングガイドラインにするか選択できる
- Airbnbが業界では有名らしいのでこれを選択する
- 実際のプロジェクトではメンバーと話し合って決めること
? Which style guide do you want to follow? (Use arrow keys)
> Airbnb (https://github.com/airbnb/javascript)
Standard (https://github.com/standard/standard)
Google (https://github.com/google/eslint-config-google)
2. 設定ファイルが完成する
- 以下はJavaScriptで出力した設定ファイル(.eslintrc.js)
※WIP
3. 各種項目をカスタマイズする
参考：ESLint の設定ファイル (.eslintrc) の各プロパティの意味を理解する
parser
- ESLintは標準ではJSのコードに対するパースに対応している
- TypeScript関連(.ts,.tsx)を扱えるようにするためには@typescript-eslint/parserに渡すオプションを定義する
.eslintrc.js
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaFeatures: {
jsx: true
},
ecmaVersion: 12,
+ project: './tsconfig.eslint.json',
sourceType: 'module',
+ tsconfigRootDir: __dirname,
},
それぞれ項目の解説
1. parser
- 使用するパーサー
- TypeScriptを使用するので'@typescript-eslint/parser'を選択する
2. parserOptions
- ecmaVeresion
使用するECMAScriptのバージョンを指定
デフォルトではES2018
- jsx
jsxを使用する場合は設定する
- project
parserに読ませるファイルを指定
tsconfig.jsonを読ませるとnpmパッケージのファイルまでパースしてしまう
新規でtsconfig.eslingl.jsonファイルを作成してそちらに設定を書く
tsconfig.eslint.json
{
"extends": "./tsconfig.json",
"include": [
"src/**/*.js",
"src/**/*.jsx",
"src/**/*.ts",
"src/**/*.tsx"
],
"exclude": [
"node_modules"
]
}
plugins
- ESLintプラグインを使用する場合にここに列挙しておく必要がある
- ここに列挙したプラグインのルールを適用するのが
extends -
eslint-pluginというプレフィックスは省略できる参考
.eslintrc.js
plugins: [
'@typescript-eslint',
+ 'import',
+ 'jsx-a11y',
'react',
+ 'react-hooks',
],
+ root: true,
extends
- 各パッケージの推奨設定を適用する項目
- ここで指定可能なものをsharable configurationと呼ぶ
- プラグインは読み込むだけでは何のルールも適用されない
- extendsの設定値は衝突した場合は下にあるルールで上書きされるため順番には注意する
- ESLint標準以外のものはnpm/yarnパッケージをインストールすることで指定できる
- sharable configurationのみを提供しているnpm/yarnパッケージは
eslint-config-プレフィックスを省略できる - npm パッケージのうち、ESLint プラグインと呼ばれているものは、その中のひとつの機能として sharable configuration を提供している
- これを
extendsで指定するときは次のフォーマットで指定する
plugin:プラグインの省略名/コンフィグ名
plugin:react/recommended
- 以下おすすめ(2021/6/23)の設定
.eslintrc.js
extends: [
'plugin:react/recommended',
'airbnb',
'airbnb/hooks',
'plugin:import/errors',
'plugin:import/warnings',
'plugin:import/typescript',
'plugin:@typescript-eslint/recommended',
'plugin:@typescript-eslint/recommended-requiring-type-checking',
],
rules
- 個々のルール単位でon/offを設定できる
- extendsの共有設定以外の細かい調整をする際に使用する
- 参考
4. linterを走らせたくないファイルを設定する
- .eslintignoreファイルに上記内容を記載することで、対象のファイルに対してはlinterを走らせないようにできる
- 他、ファイル単位ではなく細かく無視したい(とりあえずの検証したいだけで型定義せずにパパっと実装したい)時にはこちらを参照
.eslintignore
build/
Public/
**/coverage/
**/node_modules/
**/*.min.js
*.config.js
.*lintrc.js
5. ESLintの自動整形がVSCode上で走るように設定する
※WIP