ESLintでJavaScriptの文法をチェックする（VS Code拡張機能の使い方も）
今回はESLintを使ってシンプルなJavaScriptの文法チェックする方法を紹介。
今回の対象読者
前提条件
- PCにバージョン10.12.0以上のNode.jsインストール済みであること
ESLintって？
Prettierとよく比較されるが（Prettierの公式サイトにも専用のページがあるほど*1）、
- JavaScriptに特化
- コードの書式（段落・改行など）よりも文法ミスや未使用・宣言されていない変数の確認などコード品質にフォーカスを置いているのが特徴。
主な機能
主なメリット
コードチェックツールである以上、Prettierと少々被る点がありますが、
- コードを実行する前に明らかなバグを見つけることが出来る
- 設定してしまえば、チーム全員で文法などを統一した状態でコードを書くことができる
- コードレビューが楽、文法がおかしいところを治す労力もなくなる
公式
では早速つかっていく。
今回使用した動作環境
Windows10 Home Version1903の
Ubuntu 18.04 LTS（WSL1）
コマンドを叩いてコード文法チェックするまで
1.インストールと下準備
ESLintを次のコマンドでローカルインストールします。
npm install eslint --save-dev # もしくは yarn add eslint --dev
（注）npm install eslint --globalでグローバルインストールする方法もありますが、設定に手間がかかることもあり公式は推奨していません。
インストールが終わったら、次のコマンドで同じディレクトリに設定ファイルを生成します。
npx eslint --init
コマンドを打つと色々質問が来ますが、プロジェクトの構成によって臨機応変に回答する。今回の場合は矢印キーで次のように回答しました。
すると、.eslintrc.jsonというファイルが生成されているはずです。
2.コマンドでチェックしてみる
index.jsをサンプルとして用意。
function sayHello(name) {
return `My name is ${nama} sama!`;
}
sayHello("Tama");
次のコマンドを叩いて、エラーが出ていることを確認。
npx eslint index.js
エラーの意味としてはこのようなことを言ってます。
- sayHelloメソッドの引数nameが使われてない
- returnで使われているnamaが宣言されてないので値が出力できません
ということでエラーで言われたことを修正してもう一度確認します。
index.jsのnamaとなっていた所をnameに修正。
function sayHello(name) {
return `My name is ${name} sama!`;
}
sayHello("Tama");
再チェックして何も表示されてなければ文法に問題ないです。
3.VSCodeに拡張機能を導入
Visual Studio Code（以下VSCode）に拡張機能が提供されているので導入する。今回使うのはこれ。ESLintが既にインストールされた状態で拡張機能の方をインストールすればそのまま使用出来るようになる。
「2.コマンドでチェックしてみる」のサンプルコードで保存すると問題タブにESLintのエラー内容が表示される*2。
まとめ
- ES LintはJavaScriptの文法をチェックしてくれる
- コマンドを打つことで間違っているところを指摘してくれる
- 設定ファイルを用意して設置するだけでスタイルを設定する事ができる
おまけ（オススメ記事の紹介）
設定ファイルを弄って、チェック方法の設定をしたり文法の自動修正については今回は簡潔さ重視と記事の長さの問題で紹介してません。もっと知りたい人のために記事を2点置いておきます。
ESLintの日本人メンバーが書かれた使い方記事です。
他にサイボウズさんのところもセットアップから使用までの流れが体系的にまとまって良いです。
次回はいよいよPrettierとESLintを組み合わせて、有名企業のコードスタイルに沿った、コードをより効率的に書ける方法を紹介したいと思っています。
*1:https://prettier.io/docs/en/comparison.html
*2:ファイル名隣のロゴがデフォルトと違うのはこちらの拡張機能を入れているからです。vscode-icons - Visual Studio Marketplace
