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
ライセンス
ドキュメント
https://github.com/cybozu/eslint-config/blob/master/README.md
下準備
ESLint を実行するには、Node.js とパッケージ管理ツールの npm が必要です。
Node.js をインストールすると、npm は自動でインストールされます。
-
Node.js 公式サイト
からインストーラーをダウンロードします。
必要な Node.js のバージョンは、 package.jsonの engines プロパティを確認してください。
たとえば次の記載の場合、Node.js のバージョン 14 以上が必要です。1 2 3
"engines": { "node": ">=14" },
-
ダウンロードしたインストーラーを実行し、画面にしたがってセットアップします。
Quickstart
Step1:必要なパッケージのインストール
ESLint と@cybozu/eslint-config をインストールします。
-
作業用ディレクトリーを作成します。ここでは、例として「works」というディレクトリー名にします。
1
mkdir works
-
作成した作業用ディレクトリーに移動します。
-
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
-
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」という名前のファイルを作成します。
ファイル名の先頭には「.」が必要です。
|
|
Step3:チェック対象のファイルを作成
ESLint でチェックしたい JavaScript ファイルを準備します。
ここでは、例として次の内容の JavaScript ファイル「sample.js」を作成します。
この JavaScript ファイルは、ESLint を適用すると、エラーとなる内容になっています。
|
|
Step4:ESLintの実行
ESLint を実行します。
|
|
実行すると、次のようなメッセージが表示されます。
|
|
この場合、「sample.js」に次のエラーを含むことがわかります。
- warning セミコロンがありません。
- warning 演算子の前後はスペースが必要です。
- error 'result'という値が使用されていません。
エラーが表示された場合、エラーのレベル(error/warning)に応じて、JavaScript ファイルを修正します。
エラー内容の詳細は、
ESLint 公式サイトの Rules
を確認してください。
- error:必ず修正してください。JavaScript が動かなかったり、意図しない動作をすることがあります。
- warning:修正するほうが望ましいですが、必須ではありません。
エラーのないファイルに対して実行すると、メッセージは表示されません。
|
|
Step5:コードの自動修正
エラーによっては、自動修正できるエラーもあります。
エラーを自動修正する場合には、--fix
オプションを付けて実行します。
|
|
コマンドを実行すると、JavaScript ファイルが修正されます。
自動修正できなかったエラーが残っていれば、修正できなかったエラーの内容が表示されます。
|
|
自動修正できないエラーは、エラーの内容に応じて自分で修正します。
補足
他のルールセットを利用する
Quickstart では、ES2015(ES6)以上で kintone のカスタマイズ開発をする方向けのルールセットを利用していました。
@cybozu/eslint-config には、その他のシーンでも活用できるルールが用意されています。
必要に応じて、「.eslintrc.js」を書き換えてください。
ここでは、代表的なパターンをいくつか紹介します。
すべてのルールは、GitHub の
README
を参照してください。
ES5 で kintone のカスタマイズ開発をする場合
|
|
Node.js で kintone のカスタマイズ開発をする場合
|
|
ES2015(ES6) 以上での一般的なコーディング
|
|
Node.js での一般的なコーディング
|
|
更新履歴
- 2018 年 12 月 21 日
- パッケージ名を「eslint-config-kintone」から「@cybozu/eslint-config」へ変更
- 2019 年 8 月 30 日
- 手順をグローバルインストールする方法から、ローカルインストールする方法へ変更
- 2023 年 2 月 1 日
- サイボウズ製品の Internet Explorer サポート終了に伴い、ES2015(ES6)以上で kintone カスタマイズする場合のルールセットに変更