【JavaScriptの応用】構文チェックツール -ESLint

プログラミングを行う際に、日頃から一貫性のあるコードが書けるように意識することは大切です。
しかし、すべて手作業でコードをチェックするのは手間がかかるため、ある程度規模の大きいプロジェクトであれば構文チェックツールなどを導入すると効率的です。

そこで今回は、ESLintというJavaScriptの構文チェックツールについて解説していきます。

ESLint

ESLintとは、JavaScriptで書かれたコードの構文を検証するためのツールです。
ESLintを使うと、一定のコーディング規約に沿ってコードが書かれているかどうか自動でチェックすることができ、規約に沿っていない場合にはエラーが表示されます。
コードの一貫性を高めながら、バグを回避できることがESLintのメリットです。

コーディング規約は自分で設定することもできますが、AirbnbやGoogleなどが公開しているコーディング規約を適用することもできます。

>>ESLint

ESLintを導入する

では、早速ESLintを導入してみましょう。

ESLintのインストール

まずは、任意の名前でフォルダを作成し、その中にeslintをインストールします。

$ mkdir eslint-test
$ cd eslint-test
$ yarn add eslint --dev

[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
...
✨ Done in 2.17s.

次に、以下のコマンドでESLintの設定用ファイルを作成します。

$ yarn run eslint --init

すると、様々な質問を聞かれます。
基本的には目的や好みによって選択すれば問題ありません。
今回は、JavaScriptでAirbnbの規約を適用するため、以下のように答えていきます。

? How would you like to use ESLint?

「To check syntax, find problems, and enforce code style」を選択

? What type of modules does your project use?

「None of these」を選択

? Which framework does your project use?

「None of these」を選択

? Does your project use TypeScript?

「No」を選択

? Where does your code run?

「Browser」を選択

? How would you like to define a style for your project?

「Use a popular style guide」を選択

? Which style guide do you want to follow?

「Airbnb」を選択

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

「JavaScript」を選択

? Would you like to install them now with npm?

「Yes」を選択

完了すると、.eslintrc.jsというファイルが作成されます。

✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · none
✔ Which framework does your project use? · none
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · airbnb
✔ What format do you want your config file to be in? · JavaScript
Checking peerDependencies of eslint-config-airbnb-base@latest
...
Successfully created .eslintrc.js file in .../eslint-test
✨ Done in 347.62s.

.eslintrcファイルの中には、ESLintの規約設定が書かれています。
独自のものを設定したり、既存のものをカスタマイズすることも可能です。

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'airbnb-base',
  ],
  parserOptions: {
    ecmaVersion: 13,
  },
  rules: {
  },
};

これでAirbnbのコーディング規約が反映されるようになりました。

ESLintで構文チェック

さいごに、ESLintを使って構文チェックを行なってみましょう。

VSCodeのようなエディタを利用している場合は、自動的に.eslintrc内のコーディング規約が適用されるため、間違いがあれば修正箇所が表示されるはずです。

まずは、package.jsonファイルのscriptsに以下を追記して、eslintのコマンドを設定しましょう。

{
  ...
  "scripts": {
    "eslint": "eslint ."
  }
}

これでeslintコマンドを入力すると、ESLintが実行されるようになりました。

次に、index.jsファイルを作成し、以下のコードを書きます。

const test = "test"

では、ESLintを走らせてみます。

$ yarn run eslint

すると、4件のエラーが発生していることが分かります。

$ eslint .

eslint-test/index.js
  1:7 error 'test' is assigned a value but never used       no-unused-vars
  1:14 error Strings must use singlequote                   quotes
  1:20 error Newline required at end of file but not found  eol-last
  1:20 error Missing semicolon                              semi

エラー内容は以下の通りです。