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 公式サイト (External link) からインストーラーをダウンロードします。
    必要な Node.js のバージョンは、 package.json (External link) の engines プロパティを確認してください。
    たとえば次の記載の場合、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
    
    cd works
    npm init -y
    npm install --save-dev eslint @cybozu/eslint-config

    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 (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 (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 カスタマイズする場合のルールセットに変更