ESLintと「eslint --init」による「.eslintrc.json」の生成

ESLintはJavaScriptのソースコードを静的解析するツールです。 Lintツールはソースコードの書き方を統一したり、静的解析の段階で問題になりそうなコードや、明らかなバグを見つけるのに役立ちます。

.eslintrc.json

ESLintの実行には設定ファイルが必要です。 これは「--init」で作成できます。

$ npm install --save-dev eslint
$ npx eslint --init
? How would you like to use ESLint? To check syntax and find problems
? 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? No
? Where does your code run? (Press <space> to select, <a> to toggle all, <i> to invert selection)Browser
? What format do you want your config file to be in? JSON
Successfully created .eslintrc.json file in /path/to/your/project

How would you like to use ESLint? (Use arrow keys)

シンタックスのチェックだけを行なうか、問題のあるコードも解析するか、そしてコードスタイルを適用するのか問われてます。

「To check syntax, find problems, and enforce code style」を選択した場合の変化は後述します。

? 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 

What type of modules does your project use? (Use arrow keys)

モジュールのimport/exportスタイルを問われています。 ES2015のimport/exportを使うならJavaScript modules、CommonJSのrequireを使うならCommonJSを選択します。

? What type of modules does your project use? (Use arrow keys)
  JavaScript modules (import/export) 
> CommonJS (require/exports) 
  None of these 

Which framework does your project use? (Use arrow keys)

フレームワークを問われてます。 主にフロントエンドJS向けの質問です。

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

Does your project use TypeScript? (y/N)

TypeScriptを使うかどうかの質問です。 もともとTypeScriptではTSLintと呼ばれるツールがあったのですが、これは非推奨となりESLintに統合される予定です。

TSLint will be deprecated some time in 2019. See this issue for more details: Roadmap: TSLint → ESLint. If you're interested in helping with the TSLint/ESLint migration, please check out our OSS Fellowship program.

引用： https://github.com/palantir/tslint より

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

Where does your code run?

どこでソースコードを実行するのかについての質問です

? Where does your code run? (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◯ Browser
>◉ Node

What format do you want your config file to be in?

コンフィグファイルの生成フォーマットを問われています。

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

完成した.eslintrc.jsonを見てみよう

質問の受け答えが完了すると「.eslintrc.json」が完成します。 JavaScriptまたはYAMLを選択した場合は拡張子が異なりますので注意してください。

{
    "env": {
        "commonjs": true,
        "es6": true,
        "node": true
    },
    "extends": "eslint:recommended",
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaVersion": 2018
    },
    "rules": {
    }
}

最初にinitで生成した状態では「rules」が空になっています。 ここにESLintが用意したルールを自由に追加していくことで、eslintの設定をカスタマイズします。

• ESLint > Rules
• https://eslint.org/docs/rules/

しかしながらルールの数は200以上あるため、ここに細かく設定していくのは大変です。

qiita.com

主要なコーディングガイドラインと連携する

「How would you like to use ESLint?」の質問で「To check syntax, find problems, and enforce code style」を選択すると、その後の質問内容が変化します。

? 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・Standard・Googleがリスト上で選択できます。

採用するコーディングガイドラインは、プロジェクト毎にメンバーと相談して決定します。

? 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)

extends

200種類以上あるruleをカスタマイズしながら設定するのは大変ですので、基本的にはextendsという設定を使います。

• JavaScript Standard Style："extends": [ "standard"],
  • https://standardjs.com/
• JavaScript Semi-Standard Style："extends": ["semistandard", "standard-jsx"]
  • https://github.com/standard/semistandard
• eslintの設定をすべて有効にして厳しくする： "extends": "eslint:all",
• ...etc

プロジェクト単位でどのコーディング規約を採用するのか選定し、それに合わせたextends設定にするのがオススメです。 なお「JavaScript Standard Style」と「JavaScript Semi-Standard Style」は、行の末尾にセミコロンを付けるかどうかの違いがあります。

ちなみに私自身はセミコロンあり派だったりします。

さいごに

ESLintはnpmで簡単にインストールでき、そこまでこだわりがなければextendsを採用した規約に合わせて変更するだけでも十分な効果があります。 JavaScriptをお使いであれば必須と呼べるくらいにオススメのツールです。

今ならTypeScriptとも連携が可能です。

告知

技術書典7にサークルとして出展します。 「このすみ堂」、場所は「う17C」の3階です。 みなさまどうぞ、よろしくお願いいたします。

techbookfest.org