ESLintを使ったJavaSciptコードの静的解析方法の説明です。
ESLintでは独自に作成したコーディングルールに沿っているか？のチェックやチェック動作の細かな設定変更も行えますが、まずはWindowsへのインストールからデフォルトルールでのチェック実行までを説明します。
ESLintとは
オープンソースで提供されているJavaScriptの静的構文チェックツールで以下のようなチェックを行ってくれます。
・ECMAScriptに準拠したコードになっているか？
・コーディングルールに従っているか？
・問題が発生しやすいコードはないか？
どういった種類のチェックを行うのか、チェックする際のルール等はカスタマイズすることが可能です。
Node.jsのインストール
ESLintを動作させるのにNode.jsとnpmが必要になるのでインストールしていきます。
以下のダウンロードページからインストーラーを取得して実行します。
今回はnode-v18.12.1-x64.msiを利用しました。
オプションはデフォルトのままでOKですが、必要に応じてインストールフォルダなどは変更してください。
https://nodejs.org/ja/download/
インストールが終わったらコマンドプロンプトで以下のコマンドを実行してみましょう。
バージョンが表示されたら正しくインストールされています。
node -v
npmの初期設定
npmとはNode Package Managerの略で名前の通りNodeのパッケージを管理するツールです。
EsLintはnpmを利用してインストールするため初期設定を行い「package.json」を作成しておきます。
任意のフォルダを作成（今回は「C:\eslint」）し、以下の初期化コマンドを実行します。
C:\eslint>npm init
以下のように色々オプションを聞かれるので任意の値を入れます。
ESLintを使う上では特に何でもよいので今回はデフォルト値を入力します。
入力が完了すると「package.json」が作成されます。
package name: (eslint)
version: (1.0.0)
description: eslint project
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to C:\eslint\package.json:
{
"name": "eslint",
"version": "1.0.0",
"description": "eslint project",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
ESLintのインストール
公式ページはコチラです。
https://eslint.org/
先ほど「npm init」を行い「package.json」を作成したフォルダに移動し以下のコマンドを実行します。
インストールが始まりオプションに関して問われるので回答していきます。
選択肢はコマンドプロンプトで上下または左右キーで選択ができます。「1」とか「2」を入力するわけではないので戸惑わないように。
npm init @eslint/config
? How would you like to use ESLint? ...
> To check syntax only
To check syntax and find problems
To check syntax, find problems, and enforce code style
構文の確認、問題の発見、コードスタイルの適用のどれに使用するかを選択します。
今回はECMScript6に準拠しているかをチェックするので構文の確認のみを選択します。
? What type of modules does your project use? ...
> JavaScript modules (import/export)
CommonJS (require/exports)
None of these
モジュールの種類を選択します。今回はJavaScriptを選択します。
? Which framework does your project use? ...
React
Vue.js
> None of these
利用しているフレームワークを選択します。今回は利用なし（None of these）を選択します。
? Does your project use TypeScript? » No / Yes
TypeScriptの利用有無です。今回は No に設定します。
? Where does your code run? ... (Press <space> to select, <a> to toggle all, <i> to invert selection)
√ Browser
Node
コードの実行場所を指定します。ブラウザ、ブラウザーかNode(サーバーサイド)が選択できます。
今回はとりあずブラウザのみ選択しておきます。
? What format do you want your config file to be in? ...
> JavaScript
YAML
JSON
設定ファイルのフォーマット指定です。今回はデフォルトのJavaScriptに設定します。
eslint@latest
? Would you like to install them now? » No / Yes
最新版を今インストールするか？なので yes で回答します。
? Which package manager do you want to use? ...
> npm
yarn
pnpm
どこパッケージを利用するか？です。npmを指定します。
ここまで回答するとインストールが始まります。
インストールが完了したら以下のコマンドを実行してみます。バージョンが表示されたら成功です。
※package.jsonがあるフォルダで実行する必要があります。
npx eslint -v
静的コード解析の実行
デフォルトの設定で解析を実行する場合は
eslintをインストールしたフォルダに移動して以下のようにコマンドを実行するだけです。
例１）ファイル名を直接指定する場合
npx eslint hogehoge.js
例２）指定フォルダ配下の直下にあるファイルをすべて対象とする場合（サブフォルダ配下のファイルは対象外）
npx eslint src\*
例３）指定フォルダ配下のファイルをすべて対象とする場合（サブフォルダ配下のファイルも含む）
npx eslint src\**
実行結果はデフォルトでは以下のように標準出力に出力されます。
C:\eslint>npx eslint .\src\**
C:\eslint\src\jquery-3.6.1.js
18:44 error 'module' is not defined no-undef
147:11 error 'Symbol' is already defined as a built-in global variable no-redeclare
694:15 error Unexpected control character(s) in regular expression: \x1f, \x1f no-control-regex
753:45 error Empty block statement no-empty
✖ 134 problems (134 errors, 0 warnings)
オプションはコマンドライン引数、または設定ファイルで指定が出来ます。
多くのオプションがあるのでカスタマイズしたい場合は以下のガイドを参照ください。
https://eslint.org/docs/latest/user-guide/command-line-interface
チェック結果のファイル出力
ESLintでチェックした結果をファイル出力したい場合は「-o ファイル名」のオプションを付与しますがデフォルトではファイルフォーマットが標準出力するためのフォーマットになっているため制御文字が多く含まれた状態で出力されてしまいます。
ファイル出力する場合は「--format」オプションも一緒に指定しましょう。
以下のように多くのフォーマットに対応しています。
checkstyle
compact
html
jslint-xml
json
junit
stylish (the default)
tap
unix
visualstudio
例えばHTML形式でファイル出力したい場合は以下のようにコマンドを実行します。
npx eslint .\src\** -f html -o output.html
シンプルなカンマ区切りテキストでの出力。Excelなどに貼り付けたい場合は便利です。
npx eslint .\src\** -f compact -o simple.txt
以上