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

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

https://github.com/cybozu/eslint-config

MITライセンス

https://github.com/cybozu/eslint-config/blob/master/README.md

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

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

   1 2 3

   "engines": { "node": ">=14" },

2. ダウンロードしたインストーラーを実行し、画面にしたがってセットアップします。

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

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

1
2
3
4
5
6

module.exports = {
  extends: [
    '@cybozu',
    '@cybozu/eslint-config/globals/kintone'
  ]
};

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);
})();

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

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

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

1

npx eslint sample.js

エラーによっては、自動修正できるエラーもあります。
エラーを自動修正する場合には、--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

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