はじめに

ESLint は JavaScript のための静的検証ツール。
コードを実行する前に明らかなバグを見つけたり、括弧やスペースの使い方などのスタイルを統一したりするのに役立つ。
以前メモしたEditorConfigも，コードスタイル統一ができるが，これにJavaScripの文法チェック機能が付いた感じ。
React.jsやAngular.jsなどにも対応しているので，Atomにその環境を構築したのでそのメモ。

目次

  1. はじめに
  2. ESLintとは
    1. 特徴
  3. Atom にESLintの環境を構築する
    1. 「linter-eslint」をインストール
    2. ESLint 本体のインストール
  4. .eslintrc ファイルの作成
  5. .eslintrcの記述
    1. プラグインを使う
  6. 終わりに
  7. 参考

ESLintとは

公式ホームぺージESLint によると

ESLintはコードを静的に分析して、問題をすばやく見つけます。 ESLintはほとんどのテキストエディターに組み込まれており、ESLintを継続的インテグレーションパイプラインの一部として実行できます。

との事。
Node.jsのnpmパッケージとして提供されている。

特徴

  • すべての検証ルールを自由に on/off できる
  • カスタムルールを簡単に作れる
  • EcmaScript 2015 / 2016やReactなどの構文にも対応
  • JSX 記法 をサポートしている
  • Babel と連携している。
  • プラグインが豊富

Atom にESLintの環境を構築する

npm パッケージなので，様々なエディタに導入する事ができるのも特徴。
自分はGitHub製のAtomを使用しているので，これにESLintを組み込んでいく。

「linter-eslint」をインストール

AtomでESLintを使うためのパッケージである「linter-eslint」をインストールする。
他のプラグインと同様に設定画面のインストールから検索してインストールするか，コマンドプロンプトで次のコマンドを叩く。

linter-eslint
  • CLI
1
apm install linter-eslint

さらに，依存関係にあるlinterといパッケージもインストールする。(インストール順は関係なさそう)

linter
  • CLI
1
apm install linter

linterはAtomエディターの基本的なリンタープロバイダー。他の言語用のLinterをインストールすることで文法チェック等ができるようになる。

さらに以下のインストールを入れると，Atomエディタの下部にリアルタイムにエラーをチェックし表示してくれる。

linter-eslint
  • CLI
1
apm install linter-ui-default

ESLint 本体のインストール

次にESLintの本体をnpmでインストールする。
インストール箇所は，プロジェクト単体かグローバルにインストールできる。ESLint本体には，プラグインを組み込むことで各所で策定されたルールを簡単に導入する事ができる。

ESLint
  • CLI
1
2
3
4
5
6
7
8
# ローカルインストール
npm install eslint --save-dev

# グローバルインストール
npm install -g eslint --save-dev

# プラグインを適用する場合
npm install --save-dev [eslint-plugins]

次に「.eslintrc」ファイルをプロジェクトフォルダに作成する。
これはESLintの設定ファイルで，ルールの設定もここで指定する。
設定できるルールは，公式ページを参照のこと。

.eslintrc ファイルの作成

どの項目を，どの形式でチェックするかを指定する「.eslintrc」ファイルを作成する。
作成自体は簡単で次のコマンドを叩き，質問に回答するだけ。

mofo-styleインストール
  • CLI
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
npx eslint --init

PS D:\練習\ReactStudy\sample> eslint --init
 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? ...
> JavaScript modules (import/export)
> CommonJS (require/exports)
> None of these
> プロジェクトはどのタイプのモジュールを使用しますか？ ...
> JavaScriptモジュール（インポート/エクスポート）
> CommonJS（必須/エクスポート）
> どれでもない

   Which framework does your project use? ...
> React
> Vue.js
> None of these
> プロジェクトはどのフレームワークを使用していますか？ ...
> React
> Vue.js
> どれでもない

    Does your project use TypeScript?
    
    Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)
√ Browser
√ Node



? How would you like to define a style for your project? ...
？ プロジェクトのスタイルをどのように定義しますか？ ...
Browser
Node

> Use a popular style guide
> Answer questions about your style
> Inspect your JavaScript file(s)
> 人気のあるスタイルガイドを使用する
> あなたのスタイルについての質問に答える
> JavaScriptファイルを検査する


   Which style guide do you want to follow? ...
   どんなスタイルガイドをフォローしたいですか？ ...
> Airbnb: https://github.com/airbnb/javascript
> Standard: https://github.com/standard/standard
> Google: https://github.com/google/eslint-config-google

   What format do you want your config file to be in? ...
> JavaScript
> YAML
> JSON
> 構成ファイルをどの形式にしたいですか？ ...
> JavaScript
> YAML
> JSON

   eslint-plugin-react@^7.20.0 eslint-config-airbnb@latest eslint@^5.16.0 || ^6.8.0 || ^7.2.0 eslint-plugin-import@^2.21.2 eslint-plugin-jsx-a11y@^6.3.0 eslint-plugin-react-hooks@^4 || ^3 || ^2.3.0 || ^1.7.0
√ Would you like to install them now with npm? · No / Yes
今すぐnpmでインストールしますか？

取り合えず人気のある「airbnb」を設定した例。
敢えて選ばずに好きなルールを適用するなり，自作するなりもできる。

.eslintrcの記述

「.eslintrc」にルールを記述していく。
面倒くさい場合は下記を記入すると，すべてが適用される。

.eslintrc
  • CLI
1
2
3
{
  "extends": "eslint:recommended"
}

プラグインを使う

JavaScrptのスタイルガイドは，複数のIT系デベロッパーが公表している。
主なものに

今回はFireFoxブラウザの開発元であるMozilla Foundation JS Style Guideを採用。
理由は，単に好きなブラウザなので(適当～)

導入については，以下のGithubを参照にしていく。

mofo-styleインストール
  • CLI
1
npm install mofo-style --save-dev

最新のES6に対応させるには此方を参照。 Configuring ESLint

終わりに

今迄はコードが完成してからブラウザのdeveloperツールで一つ一つバグを潰してた。
なので，リアルタイムで警告してくれるのは嬉しい。
まだ，厳格なルール設定のママなので，今いらないルールを無効化する方法を調べていきたい。

参考

AtomにESLint導入した
ESLintをAtomに導入し、Reactの構文にも対応したAirbnbのJSスタイルガイドを使う
Atomにreact+es6対応したeslintの環境を構築する