ESLint(JavaScriptコードチェッカー)

目次

ESLint/@cybozu/eslint-configとは

ESLintは、2013年にNicholas C. Zakas氏がオープンソースプロジェクトとして公開したJavaScriptの構文チェックツールです。
ESLintは、柔軟なルールの設定が可能で、多くのルールセットが公開されています。
サイボウズでも、「@cybozu/eslint-config」という名前のESLintのルールセットを公開しています。

この記事では、ESLintと @cybozu/eslint-configのセットアップ方法と、kintoneのJavaScriptファイルにチェックをかける方法を説明します。

GitHub

https://github.com/cybozu/eslint-config (External link)

ライセンス

MITライセンス (External link)

ドキュメント

https://github.com/cybozu/eslint-config/blob/master/README.md (External link)

下準備

ESLintを実行するには、Node.jsとパッケージ管理ツールのnpmが必要です。
Node.jsをインストールすると、npmは自動でインストールされます。

  1. Node.js公式サイトからインストーラーをダウンロードします。
    Node.js公式サイト (External link)
    必要なNode.jsのバージョンは、以下のpackage.jsonのenginesプロパティを確認してください。
    package.json (External link)
    たとえば次の記載の場合、Node.jsのバージョン14以上が必要です。

    1
    2
    3
    
    "engines": {
      "node": ">=14"
    },
  2. ダウンロードしたインストーラーを実行し、画面にしたがってセットアップします。

Quickstart

Step1:必要なパッケージのインストール

ESLintと@cybozu/eslint-configをインストールします。

  1. 作業用ディレクトリを作成します。ここでは、例として「works」というディレクトリ名にします。

    1
    
    mkdir works
  2. 作成した作業用ディレクトリに移動します。

  3. ESLintと @cybozu/eslint-configをインストールします。

    1
    2
    3
    4
    
    cd works
    npm init -y
    npm install --save-dev eslint@8
    npm install --save-dev @cybozu/eslint-config@23

    TypeScriptとPrettierをインストールする旨の警告が表示されます。
    このQuickstartのサンプルでは、TypeScriptやPrettierを使用しないため、警告を無視します。
    TypeScriptやPrettierが必要な場合は、適宜インストールしてください。

    1
    2
    3
    4
    
    # TypeScriptをインストールする
    npm install --save-dev typescript
    # Prettierをインストールする
    npm install --save-dev prettier
  4. ESLintと @cybozu/eslint-configがインストールされていることを確認します。
    @以降の数字は、インストールしたESLintや @cybozu/eslint-configのバージョン番号です。

    1
    2
    3
    4
    
    npm ls --depth=0
    works
    ├── @cybozu/eslint-config@17.0.0
    └── eslint@8.9.0

Step2:設定ファイルの作成

次の内容で、作業用ディレクトリに「.eslintrc.js」という名前のファイルを作成します。
ファイル名の先頭には「.」が必要です。

1
2
3
4
5
6
module.exports = {
  extends: [
    '@cybozu',
    '@cybozu/eslint-config/globals/kintone'
  ]
};

Step3:チェック対象のファイルを作成

ESLintでチェックしたいJavaScriptファイルを準備します。
ここでは、例として次の内容のJavaScriptファイル「sample.js」を作成します。
このJavaScriptファイルは、ESLintを適用すると、エラーとなる内容になっています。

1
2
3
4
5
6
7
(() => {
  'use strict'
  const func = (a, b) => {
    return a+ b;
  };
  const result = func(1, 3);
})();

Step4:ESLintの実行

ESLintを実行します。

1
npx eslint sample.js

実行すると、次のようなメッセージが表示されます。

1
2
3
4
5
6
7
8
9
npx eslint sample.js

/Users/test/work/sample.js
  2:15  warning  Missing semicolon                            semi
  4:13  warning  Operator '+' must be spaced                  space-infix-ops
  6:9   error    'result' is assigned a value but never used  no-unused-vars

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

この場合、「sample.js」に次のエラーを含むことがわかります。

  • warningセミコロンがありません。
  • warning演算子の前後はスペースが必要です。
  • error 'result'という値が使用されていません。

エラーが表示された場合、エラーのレベル(error/warning)に応じて、JavaScriptファイルを修正します。
エラー内容の詳細は、以下のESLint公式サイトのRulesを確認してください。
ESLint公式サイトのRules (External link)

  • error:必ず修正してください。JavaScriptが動かなかったり、意図しない動作をすることがあります。
  • warning:修正するほうが望ましいですが、必須ではありません。

エラーのないファイルに対して実行すると、メッセージは表示されません。

1
npx eslint sample.js

Step5:コードの自動修正

エラーによっては、自動修正できるエラーもあります。
エラーを自動修正する場合には、--fixオプションを付けて実行します。

1
npx eslint sample.js --fix

コマンドを実行すると、JavaScriptファイルが修正されます。
自動修正できなかったエラーが残っていれば、修正できなかったエラーの内容が表示されます。

1
2
3
4
npx eslint sample.js --fix

/Users/test/work/sample.js
  6:9  error  'result' is assigned a value but never used  no-unused-vars

自動修正できないエラーは、エラーの内容に応じて自分で修正します。

補足

他のルールセットを利用する

Quickstartでは、ES2015(ES6)以上でkintoneのカスタマイズ開発をする方向けのルールセットを利用していました。
@cybozu/eslint-configには、その他のシーンでも活用できるルールが用意されています。 必要に応じて、「.eslintrc.js」を書き換えてください。

ここでは、代表的なパターンをいくつか紹介します。
すべてのルールは、以下のGitHubのREADMEを参照してください。
README (External link)

ES5でkintoneのカスタマイズ開発をする場合
1
2
3
module.exports = {
  extends: '@cybozu/eslint-config/presets/kintone-customize-es5'
};
Node.jsでkintoneのカスタマイズ開発をする場合
1
2
3
4
5
6
module.exports = {
  extends: [
    '@cybozu/eslint-config/presets/node',
    '@cybozu/eslint-config/globals/kintone'
  ]
};
ES2015(ES6) 以上での一般的なコーディング
1
2
3
module.exports = {
  extends: '@cybozu'
};
Node.jsでの一般的なコーディング
1
2
3
4
5
module.exports = {
  extends: [
    '@cybozu/eslint-config/presets/node'
  ]
};

更新履歴

  • 2018年12月21日
    • パッケージ名を「eslint-config-kintone」から「@cybozu/eslint-config」へ変更
  • 2019年8月30日
    • 手順をグローバルインストールする方法から、ローカルインストールする方法へ変更
  • 2023年2月1日
    • サイボウズ製品のInternet Explorerサポート終了に伴い、ES2015(ES6)以上でkintoneカスタマイズする場合のルールセットに変更