ESLint まとめ

# 概要

- 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) の各プロパティの意味を理解する](https://maku.blog/p/j6iu7it/#parser-%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B%E3%83%91%E3%83%BC%E3%82%B5%E3%83%BC)

### parser

- ESLintは標準ではJSのコードに対するパースに対応している
- TypeScript関連(.ts,.tsx)を扱えるようにするためには@typescript-eslint/parserに渡すオプションを定義する


``` js:.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`というプレフィックスは省略できる[参考](https://eslint.org/docs/user-guide/configuring/plugins#naming-convention)
- 

```js:.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)の設定

```js:.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の共有設定以外の細かい調整をする際に使用する
- [参考](https://eslint.org/docs/rules/)

## 4. linterを走らせたくないファイルを設定する

- .eslintignoreファイルに上記内容を記載することで、対象のファイルに対してはlinterを走らせないようにできる
- 他、ファイル単位ではなく細かく無視したい(とりあえずの検証したいだけで型定義せずにパパっと実装したい)時には[こちら](https://blog.ojisan.io/eslint-ts-ignore)を参照

```.eslintignore
build/
Public/
**/coverage/
**/node_modules/
**/*.min.js
*.config.js
.*lintrc.js
```

## 5. ESLintの自動整形がVSCode上で走るように設定する

※WIP