2017-10-9

ESLint覚書

今までは JSHint を使用していたが、webpack+Vue.js で個人的に物を作るにあたって ES2015 以降の構文を使用したい状況が多く出てきたため、ESLint に移行することにした。

その備忘録。

ESLint - Pluggable JavaScript linter

全体の流れ

エディタの準備
- linter-eslint のインストール
プロジェクトの準備
- ローカルに eslint をインストール
- 設定ファイルを配置

エディタの準備

linter-eslint のインストール

Atom の場合は、linter-eslint をインストールする。

依存しているパッケージが複数あるが、linter-eslint をインストールする際に「これも必要だけどインストールする？」って確認してくれるので、そこで一緒にインストールすればいい。

(Optional).vue ファイルを使用する場合

.vueファイルを使用する場合は、それに対しても ESLint が動作するよう設定をしなければならない。

やることは

eslint-plugin-vueのインストール
Atom で、linter-eslint の設定にtext.html.vueを追加

`eslint-plugin-vue`のインストール

以下のコマンドでインストール

npm i -D eslint-plugin-vue

Atom で、linter-eslint の設定に`text.html.vue`を追加

linter-eslint の設定内に「List of scopes to run ESLing on, ~」といった感じの、どのファイルに対して ESLint を動作させるかの設定がある。

そこにtext.html.vueを追加。

（なぜsource.vueでなく、text.html.vueなのかは不明。説明にある通り、.vueファイルに対して Atom のEditor: Log Cursor Scopeを実行するとtext.html.vueが表示される）

（追記：どうもlanguage-vueが Scope としてtext.html.vueを指定しているのでその関係っぽい）

Atom の linter-eslint で vuejs のプラグインを導入する

プロジェクトの準備

プロジェクト毎に ES2015 の仕様を利用していけるのか、それとも利用できないのか等、構文チェックの要件は異なってくる。

そのため、ESLint をプロジェクト毎に準備することで、プロジェクト毎に設定を変更できるようにしておく。

ローカルに ESLint をインストール

npm init
npm i -D eslint

設定ファイルを配置

設定ファイルは自分で作成する事も可能だが、項目が多いためとりあえず最初はメジャーである Airbnb の設定ファイルを利用することとする。

Javascript-style-guide

# eslintのinitコマンド
./node_modules/.bin/eslint --init

# 「人気のスタイルガイドを使用する」を選択しEnter
? How would you like to configure ESLint?
  Answer questions about your style
❯ Use a popular style guide
  Inspect your JavaScript file(s)

# 「Airbnb」を選択しEnter
? Which style guide do you want to follow?
  Google
❯ Airbnb
  Standard

ES5 プロジェクトの場合

ES5 の場合はひとまず以下のような設定ファイルを使用している

// .eslintrc.js
module.exports = {
    'env': {
        'browser': true,
        'jquery': true,
    },
    'extends': 'eslint:recommended',
    'rules': {
        'indent': [
            'error',
            2,
        ],
        'linebreak-style': [
            'error',
            'unix',
        ],
        'quotes': [
            'error',
            'single',
        ],
        'semi': [
            'error',
            'always',
        ],
    },
};

適宜既存の設定ファイルを参考にしたりして諸々修正したい。

その他メモ

エラーチェックをスルーしたい場合

以下の行はエラーとなる可能性がある。

new Vue({ // この行
  ~
});

no-new - Rules - ESLint - Pluggable JavaScript linter

要約すると「new した結果を変数に保存しないなら、そもそもそのクラスがコンストラクタでやっている処理は関数でやるべきだよね？」って感じ。

ただ今回のような場合は外部ライブラリを使用しており、流石にそれを弄るのは面倒。かといってエラーを放置するのも気持ち悪い。

以下のように書けば例外として ESLint はエラーをスルーする。

new Vue({ // eslint-disable-line no-new
  ~
});

no-newの部分は該当するチェック項目。ここを記述せずeslint-disable-lineのみでもエラーは回避出来るが、その場合はあらゆるチェック項目をスルーしてしまう。

エラーとして表出されるべき項目もスルーされてしまう可能性があるので、出来ればピンポイントで問題となっている項目だけ指定すること。