概要
- 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. ルールの使用目的で一番下を選択した場合にはその後の質問内容が変化する
? 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:プラグインの省略名/コンフィグ名
例：eslint-plugin-react プラグインが提供する recommendedを使う場合
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を走らせないようにできる
- 他、ファイル単位ではなく細かく無視したい(とりあえずの検証したいだけで型定義せずにパパっと実装したい)時にはこちらを参照
build/
Public/
**/coverage/
**/node_modules/
**/*.min.js
*.config.js
.*lintrc.js
5. ESLintの自動整形がVSCode上で走るように設定する
※WIP