ESLint をコマンドラインと VSCode で使えるようにする

やりたいこと

ESLint の基本だけを知りたい
コマンドラインでESLintを動かしたい
VSCodeでESLintを動かし、リアルタイムでチェックが入るようにしたい

ESLint とは、JavaScriptの文法や間違いをチェックしてくれるツール

JSが正しく書けてるかどうか、間違いがないかどうかチェックしてくれるのがESLint。 RubyでいえばRubocopみたいなやつ。

「じゃあ自分でチェックのルール決めなきゃいけないのか？」と思うかもしれないが、そんなことはない。やさしい先輩たちが「こんなルールでチェックしてたらええんやで〜」と、まとまった「書き方の決まりごと」を用意してくれている。

そういった決まり事をプロジェクトごとに決めたり、どこかの優しい人たちがプラグインとして公表してるものを使って、開発していく。

プロジェクトごとに書き方のルールも当然異なる。そこはみんなで書き方を共有して、「みんなで間違い減らそうぜ〜」的な感じにやっていく。

とりあえず使ってみよう

こういうのはとりあえず使ってみて、慣れていくしかない。

公式「Getting Started with ESLint - ESLint - Pluggable JavaScript linter」によると、ESLintはグローバルインストールではなく、ローカルインストールが推奨されている。

It is also possible to install ESLint globally rather than locally (using npm install eslint --global). However, this is not recommended, and any plugins or shareable configs that you use must be installed locally in either case.

よって、まずは適当なディレクトリをつくる。

mkdir eslint_test
cd eslint_test

テスト用のJSファイルもつくる。

touch test.js

以下を追記。

test.js

function hello(hoge) {
  document.body.textContent = "Hello, " + hoga + "!"
}

hello("World");

npmとESLintの用意

まずはnpm initする。聞かれる質問にはすべてエンターを押して構わない。

npm init

次に、eslintをローカルディレクトリにインストールする。

npm install eslint -D

書き方の決まりごとは、まとめて.eslintrc.jsonに書く。まずはファイルをつくる。

touch .eslintrc.json

.eslintrc.json に以下を追記。

{
  "extends": ["eslint:recommended"],
  "plugins": [],
  "parserOptions": {},
  "env": {"browser": true},
  "globals": {},
  "rules": {
    "semi":"error"
  }
}

コマンドラインで使ってみる

次のコマンドを叩き、test.jsのJSがしっかり書けているか、チェックしよう。

./node_modules/.bin/eslint test.js

# 結果
  1:16  error  'hoge' is defined but never used  no-unused-vars
  2:43  error  'hoga' is not defined             no-undef
  2:53  error  Missing semicolon                 semi

✖ 3 problems (3 errors, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

上から順に、

hogeは定義されてるけど一回も使われてねぇぞバカヤロー
hogaなんてどこにも定義されてねぇぞバカヤロー
セミコロンつけろよバカヤロー

と怒られている。

test.jsを修正する

test.jsを修正して、またESLintさんにチェックしてもらおう。

function hello(hoge) {
  document.body.textContent = "Hello, " + hoge + "!";
}

hello("World");

hoga → hoge に
2行目にセミコロンをつけた

これでまたチェックしてみると。

$ ./node_modules/.bin/eslint test.js

なにも出なければ成功。「いいセンスだ」くらいは言ってほしいよね。

こんな感じでJavaScriptをチェックしてくれるのがESLint。便利ですね〜。

VSCodeでリアルタイムチェックしてもらおう

いちいちチェックコマンドを打つのも面倒なので、VSCodeにESLintを入れて、自動でチェックしてもらおう。

VSCodeのプラグイン検索画面に「ESLint」と入れて、これをインストールする。

f:id:K_Koh:20200407123243j:plain

なんと、実はこれだけで使える。

さっきミスばかりだったtest.jsにもどして、

function hello(hoge) {
  document.body.textContent = "Hello, " + hoga + "!"
}

hello("World");

VSCodeのターミナルを表示してみよう。一番左の「PROBLEMS」をクリックすると、

f:id:K_Koh:20200407123509j:plain

ここでも指摘されている！（ESLintからは逃れられないッッ）

こんな感じでESLintが使えるようになりました。

ちなみに

touch .eslintrc.jsonでも設定ファイルは用意できるが、次のコマンドで自動的に作ることもできる。

$ npx eslint --init

npxコマンドは、npm をローカルで動かせるコマンド。通常はnpm run タスク名で動かすが、npxを使えばそうする必要もない。

また、他にもいろんな設定をするとチェック時に自動で間違いを修正するようにもできる。これで先輩に怒られずに済むね〜。

アンインストールしたいとき

npmのuninstallコマンドを忘れがちなのでメモ - Qiita

Just do IT

思うは招く