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でインストールします。

$ npm install --save-dev eslint

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

設定ファイルの作成

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

$ npx eslint --init

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（構文の確認、問題の発見、コードスタイルの適用） を選択しました。

プロジェクトではどのタイプのモジュールを使っていますか？

? 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 を選択しました。

プロジェクトではどのフレームワークを使っていますか？

? Which framework does your project use? (Use arrow keys)
❯ React
  Vue.js
  None of these

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

プロジェクトでTypeScriptを使っていますか？

? Does your project use TypeScript? (y/N)

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

コードはどこで実行されますか？

? Where does your code run?
❯◉ Browser
 ◯ Node

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

プロジェクトのスタイルをどのように定義しますか？

? 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（人気のあるスタイルガイドを使う） を選択しました。

どのスタイルガイドに従いますか？

? 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のフロントエンドに詳しくないため、どのスタイルガイドがよく使われているのかわかりません。
もしデファクトスタンダードがあれば教えてほしいです。

設定ファイルをどのフォーマットにしますか？

? What format do you want your config file to be in? (Use arrow keys)
❯ JavaScript
  YAML
  JSON

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

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 を選択しました。

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

$ 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 {プロジェクトのルートフォルダ}

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

.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では使えないルールがあるため、設定ファイルを手動で編集します。

.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