ESLintのセットアップ方法

## 「ESLint」とは？

ECMAScriptやJavaScriptのコードで見つかったパターンを識別および報告するためのツールです。
いわゆる「リンター」です。

TypeScriptでも使えます。

## 環境

- OS：macOS Catalina 10.15
- Node.js：v12.14.0
- npm：6.13.4
- ESLint：v6.7.2

## 前提条件

- Node.jsプロジェクトを作成している

## セットアップ

### ESLintのインストール

npmでインストールします。

```shell-session
$ npm install --save-dev eslint
```

リントは開発時のみ使うため、 `--save-dev` オプションを付けています。

### 設定ファイルの作成

`eslint --init` コマンドを実行し、ウィザードに沿って設定ファイルを作成します。

```shell-session
$ npx eslint --init
```

```shell-session:ESLintをどのように使いますか？
? How would you like to use ESLint? (Use arrow keys)
  To check syntax only
❯ To check syntax and find problems
  To check syntax, find problems, and enforce code style
```

私は `To check syntax, find problems, and enforce code style（構文の確認、問題の発見、コードスタイルの適用）` を選択しました。

```shell-session:プロジェクトではどのタイプのモジュールを使っていますか？
? What type of modules does your project use? (Use arrow keys)
❯ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these
```

私は `tsconfig.json` の `module` で `commonjs` を指定しているため、 `CommonJS` を選択しました。

```shell-session:プロジェクトではどのフレームワークを使っていますか？
? Which framework does your project use? (Use arrow keys)
❯ React
  Vue.js
  None of these
```

私は ReactもVue.jsも使っていないため、 `None of these` を選択しました。

```shell-session:プロジェクトでTypeScriptを使っていますか？
? Does your project use TypeScript? (y/N)
```

私はTypeScriptを使っているため、 `y` を選択しました。

```shell-session:コードはどこで実行されますか？
? Where does your code run?
❯◉ Browser
 ◯ Node
```

スペースキーで選択をトグルできます。
私は両方とも選択しましたが、AWS CDKプロジェクトなので `Node` のみでよかったかもしれません。

```shell-session:プロジェクトのスタイルをどのように定義しますか？
? 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（人気のあるスタイルガイドを使う）` を選択しました。

```shell-session:どのスタイルガイドに従いますか？
? 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
```

私は `Standard` を選択しました。
※Webのフロントエンドに詳しくないため、どのスタイルガイドがよく使われているのかわかりません。
もしデファクトスタンダードがあれば教えてほしいです。

```shell-session:設定ファイルをどのフォーマットにしますか？
? What format do you want your config file to be in? (Use arrow keys)
❯ JavaScript
  YAML
  JSON
```

私は `YAML` を選択しました。
YAMLは __コメントの書けるJSON__ と捉えられるため、どちらか選べるなら必ずYAMLにします。

```shell-session:npmで今すぐインストールしますか？
@typescript-eslint/eslint-plugin@latest eslint-config-standard@latest eslint@>=6.2.2 eslint-plugin-import@>=2.18.0 eslint-plugin-node@>=9.1.0 eslint-plugin-promise@>=4.2.1 eslint-plugin-standard@>=4.0.0 @typescript-eslint/parser@latest
? Would you like to install them now with npm? (Y/n)
```

関連パッケージをnpmでインストールするかどうかの質問です。
私は `Y` を選択しました。

これでウィザードが完了です。
最終的な出力を載せます。

```shell-session
$ npx eslint --init
? How would you like to use ESLint? To check syntax, find problems, and enforce code style
? What type of modules does your project use? CommonJS (require/exports)
? Which framework does your project use? None of these
? Does your project use TypeScript? Yes
? Where does your code run? Browser, Node
? How would you like to define a style for your project? Use a popular style guide
? Which style guide do you want to follow? Standard: https://github.com/standard/standard
? What format do you want your config file to be in? YAML
Checking peerDependencies of eslint-config-standard@latest
The config that you've selected requires the following dependencies:

@typescript-eslint/eslint-plugin@latest eslint-config-standard@latest eslint@>=6.2.2 eslint-plugin-import@>=2.18.0 eslint-plugin-node@>=9.1.0 eslint-plugin-promise@>=4.2.1 eslint-plugin-standard@>=4.0.0 @typescript-eslint/parser@latest
? Would you like to install them now with npm? Yes
Installing @typescript-eslint/eslint-plugin@latest, eslint-config-standard@latest, eslint@>=6.2.2, eslint-plugin-import@>=2.18.0, eslint-plugin-node@>=9.1.0, eslint-plugin-promise@>=4.2.1, eslint-plugin-standard@>=4.0.0, @typescript-eslint/parser@latest
npm WARN acorn-jsx@5.1.0 requires a peer of acorn@^6.0.0 || ^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN cdk_sample@0.1.0 No repository field.
npm WARN cdk_sample@0.1.0 No license field.

+ eslint-plugin-promise@4.2.1
+ eslint-plugin-node@10.0.0
+ eslint-plugin-import@2.19.1
+ eslint-plugin-standard@4.0.1
+ eslint-config-standard@14.1.0
+ eslint@6.7.2
+ @typescript-eslint/eslint-plugin@2.12.0
+ @typescript-eslint/parser@2.12.0
added 44 packages from 23 contributors, updated 2 packages and audited 1756085 packages in 18.34s

17 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Successfully created .eslintrc.yml file in {プロジェクトのルートフォルダ}
```

作成された設定ファイルも載せます。

```yaml:.eslintrc.yml
env:
  browser: true
  commonjs: true
  es6: true
  node: true
extends:
  - standard
globals:
  Atomics: readonly
  SharedArrayBuffer: readonly
parser: '@typescript-eslint/parser'
parserOptions:
  ecmaVersion: 2018
plugins:
  - '@typescript-eslint'
rules: {}
```

### 設定ファイルの編集(TypeScriptのみ)

TypeScriptでは使えないルールがあるため、設定ファイルを手動で編集します。

```diff_yaml:.eslintrc.yml
rules: {
+ "no-unused-vars": "off",
+ "@typescript-eslint/no-unused-vars": ["error", {
+   "vars": "all",
+   "args": "after-used",
+   "ignoreRestSiblings": false
+ }] 
}
```

「? Does your project use TypeScript?」で「Yes」を選択したら自動的に追記してもよさそうですが、できない理由があるのかもしれません。

参考
https://twitter.com/__gfx__/status/1214450354676355072?s=20
https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/no-unused-vars.md#options

## おわりに

これでESLintを使ってリントを実行できます。
VSCodeやVimのプラグインと組み合わせて、JSやTSのコードをきれいに書いていきましょう！

## 参考リンク

- [eslint/eslint: A fully pluggable tool for identifying and reporting on patterns in JavaScript](https://github.com/eslint/eslint)