カテゴリー内の他の記事

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

Index

はじめに

JavaScriptのコードチェッカーとして、2016年5月よりご愛用いただいたjswatchdogに代わり、
2018年4月以降は、保守の観点からESLintを推奨します。

また、ESLintの設定として、kintoneのカスタマイズ開発向けの@cybozu/eslint-configを推奨します。

この記事では、初心者の方向けに、ESLintのセットアップ手順をご説明します。

ESLintとは

ESLintは、2013年にNicholas C. Zakas氏がオープンソースプロジェクトとして公開したJavaScriptの構文チェックツールです。
他のツールと異なり、独自のルールを作成して拡張として追加できることが特徴です。
 
ESLintは、柔軟なルールの設定が可能であり、多くのルールセットが公開されています。
有名なルールセットとしては、Google社が公開しているeslint-config-googleがあり、一般のJavaScript開発向けとしても普及しています。

@cybozu/eslint-config とは

@cybozu/eslint-configは、サイボウズのエンジニアが用意したESLintのルールセットです。
この中にkintone開発のためのESLintのルールセットも用意されています。

@cybozu/eslint-configの特徴として次のものがあります。

  • kintone開発の際に、コードの品質を保つことができます。(jswatchdogと同様です。)
  • ESLintは元々コマンドラインツールですが、対応エディタに拡張としてインストールして使うこともできます。
    その場合、コーディングしながらリアルタイムでチェックすることが可能です。
  • コマンドライン上で実行するときは、自動修正機能もあります。

コードはGitHub上に公開されています。

対応エディタ

Sublime TextやAtomなどメジャーなエディタに対応しています。今回はVisual Studio Codeで説明します。 対応エディタはESLint公式サイトをご確認ください。

ESLintのセットアップ

事前準備

ESLintを実行するには、Node.js とnpm を扱える環境が必要です。

  1. Node.js公式サイトからインストーラをダウンロードします。公式サイトはこちら
  2. ダウンロードしたインストーラを実行し、画面に従ってセットアップを行います。

インストール

ESLintと@cybozu/eslint-configをインストールします。
  1. 作業用ディレクトリを用意します。
    例:作業用ディレクトリの名前を「Source」とする場合
    > mkdir Source
  2. 用意したディレクトリに移動し、ESLintと@cybozu/eslint-configをインストールします。
    > cd Source
    > npm install --save-dev eslint @cybozu/eslint-config
    TypeScript とPrettierがインストールされていない場合、警告が出ます。
    こちらの記事で紹介しているESLint の設定である @cybozu/eslint-config/presets/kintone-customize-es5 を使う場合にはTypeScript とPrettierは不要です。
    TypeScript とPrettierが必要な場合、以下のコマンドで TypeScript と Prettier パッケージもインストールしてください。
    > npm install --save-dev typescript prettier

    また、作業ディレクトリ内にpackage.jsonが存在しない場合も警告が表示されます。
    ここでは詳細については割愛させていただきますが、必要に応じてご用意ください。

  3. ESLintと@cybozu/eslint-configがインストールされていることを確認します( x.x.x : バージョン番号)。
    > npm ls --depth=0
    (インストール先ディレクトリ)\npm
    +-- @cybozu/eslint-config@x.x.x
    +-- eslint@x.x.x
    次のエラーメッセージが表示された場合、バージョンを指定して eslint をインストールし直してください。
    エラーメッセージ
    > npm ls --depth=0
    (インストール先ディレクトリ)\npm
    ├── @cybozu/eslint-config@x.x.x
    ├── UNMET PEER DEPENDENCY eslint@x.x.x
    ├── prettier@x.x.x
    └── typescript@x.x.x
    npm ERR! peer dep missing: eslint@^y.y.y, required by @cybozu/eslint-config@x.x.x
    npm ERR! peer dep missing: ... 同様のエラーメッセージ
    実行するコマンド
    > npm install --save-dev eslint@y.y.y

    ※ y.y.y はエラーメッセージ「npm ERR! peer dep missing: eslint@^y.y.y, required by @cybozu/eslint-config@x.x.x」にある ESLint のバージョン番号(太字部分)です。

  4. 作業ディレクトリ内に「.eslintrc.js」ファイルを新規作成します。※ファイル名の先頭に「.」を付けてください。
    2018-03-26_16h50_07.png
    Macの場合、下記コマンドでファイルを作成してください。

    $ vi .eslintrc.js
  5. 「.eslintrc.js」ファイルに以下の3行を書き込みます。

    module.exports = {
    "extends": "@cybozu/eslint-config/presets/kintone-customize-es5"
    };
    ※上記の例はES5(ECMAScript5)を使ったkintone開発向けのルールです。
    ES6(ECMAScript2015)を利用したい場合や、Node.js、Reactでの開発を行う場合の設定については、「様々なルールセットを利用する」を参照してください。

     (参考)Macターミナルのviエディタの操作の一例です。
    5-1.「a」でviの入力モードに変更
    5-2. 上記の3行を書き込み
    5-3. escキーでviのコマンドモードに変更
    5-4.「:wq」で保存して終了

コマンドライン / ターミナルでの実行

下記コマンドでESLintを実行すると、チェック結果が表示されます。

> npx eslint [フォルダ名] or [ファイル名]

例:「test.js」というファイルに対して実行する場合

> npx eslint test.js

▼「test.js」のサンプルコード

※ESLintが実行できているかどうか確認するため、エラーが出るような内容になっています。

実行結果

実行すると、画像のようにエラー内容が表示されます。

eslint-log.png

サンプルコードの場合は、

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

とエラーが表示されています。

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

エラーが表示された場合、エラーレベル(error/warning)に応じて修正してください。

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

エラー内容の詳細については、ESLint公式サイトのRulesを参照してください。

エディタへの適用

エディタへの適用方法をご紹介します。

Visual Studio Code

Visual Studio Code(以下VSCode)への適用手順をご紹介します。

  • VSCodeを立ち上げて、「拡張機能」をクリックします。

    2018-02-14_17h41_14.png

  • 「ESLint」を検索し、「インストール」をクリックします。

    2018-02-02_16h36_56.png

    インストールが終了したらVSCodeを再起動します。拡張機能はVSCodeを再起動することで有効になります。

実行結果

エラーがあれば入力と同時に検証され、問題がある部分に赤の波線が表示されます。

エラーの詳細内容が「問題」タブに表示されます。

eslint-vscode.png

 

ESLintをもっと使いこなすために

ESLintに慣れてきた方向けに、もう一歩進んだ使い方をご紹介します。

自動修正機能の使用

コマンドラインでの実行で「--fix」オプションをつけると、自動的にコードを修正しファイルが更新されます。
※エラーの種類によっては、自動で修正できないものもあります。

ルール設定の変更

特定のルールを除外したいなど、ルールの設定を変更したい場合は、.eslintrcのファイルを編集します。

  • 例1: Garoonカスタマイズ開発で使う時に、garoonのオブジェクトエラーを除外したい場合
    「globals」のキーを追加し、「garoon」を「readonly」にします。
  • 例2: 特定のルールを除外したい場合
    「rules」のキーを追加し、除外したい設定の値を「off」にします。

以下は、例1と例2の内容を反映した.eslintrcのサンプルです。

様々なルールセットを利用する

ここまでの手順で紹介した設定では、ES5(ECMAScript5:JavaScriptのバージョン)でkintoneのカスタマイズ開発を行う方向けのルールセットを利用していました。
@cybozu/eslint-configには、そのほかのシーンでも活用することのできるルールが用意されています。
必要に応じて、「.eslintrc.js」ファイルを書き換えてご利用ください。

ここでは、代表的なパターンをいくつか紹介します。すべてのルールは、GitHubのREADMEをご覧ください。

ES2017での一般的なコーディング

module.exports = {
  extends: "@cybozu"
};

ES2017でのkintoneカスタマイズ

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

Node.js での一般的なコーディング

module.exports = {
  extends: "@cybozu/eslint-config/presets/node"
};

Node.js でのkintoneカスタマイズ

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

参考サイト

変更履歴

2018/12/21 利用するパッケージを「eslint-config-kintone」から「@cybozu/eslint-config」へ変更

2019/8/30 ESLint v6.0.0からプラグインの読み込み方に変更があったため、手順をグローバルインストールからローカルインストールに変更しました。

Topに戻る 

記事に関するフィードバック

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

Avatar
kosaito

回答ありがとうございます。

無事、eslint@6.4.0はインストールできたようなのですが、他のエラーが多発してしまいました。

extraneousがつくエラーは「不要なライブラリ」ということでしょうか?ここで表示されているライブラリは

Sourceディレクトリの階層にあるpackege-lock.jsonの中に記述はあるようなのですが

 

 

kosaito@MacBook-Air Source % npm ls --depth=0                   

/Users/kosaito/kintone-dev/Source

├── @cybozu/eslint-config@10.0.3

├── cross-spawn@7.0.2

├── debug@2.6.9

├── eslint@6.4.0

├── espree@7.0.0

├── inquirer@7.1.0

├── optionator@0.9.1

├── prettier@2.0.5

├── type-fest@0.8.1

└── typescript@3.9.2

 

npm ERR! extraneous: debug@4.1.1 /Users/kosaito/kintone-dev/Source/node_modules/@typescript-eslint/typescript-estree/node_modules/debug

npm ERR! extraneous: debug@4.1.1 /Users/kosaito/kintone-dev/Source/node_modules/@babel/traverse/node_modules/debug

npm ERR! extraneous: debug@2.6.9 /Users/kosaito/kintone-dev/Source/node_modules/eslint-import-resolver-node/node_modules/debug

npm ERR! extraneous: debug@2.6.9 /Users/kosaito/kintone-dev/Source/node_modules/eslint-module-utils/node_modules/debug

npm ERR! extraneous: debug@2.6.9 /Users/kosaito/kintone-dev/Source/node_modules/eslint-plugin-import/node_modules/debug

npm ERR! extraneous: semver@5.7.1 /Users/kosaito/kintone-dev/Source/node_modules/normalize-package-data/node_modules/semver

npm ERR! extraneous: semver@6.3.0 /Users/kosaito/kintone-dev/Source/node_modules/eslint-plugin-node/node_modules/semver

npm ERR! extraneous: doctrine@2.1.0 /Users/kosaito/kintone-dev/Source/node_modules/eslint-plugin-react/node_modules/doctrine

npm ERR! extraneous: ms@2.0.0 /Users/kosaito/kintone-dev/Source/node_modules/debug/node_modules/ms

npm ERR! extraneous: cross-spawn@6.0.5 /Users/kosaito/kintone-dev/Source/node_modules/eslint/node_modules/cross-spawn

npm ERR! extraneous: debug@4.1.1 /Users/kosaito/kintone-dev/Source/node_modules/eslint/node_modules/debug

npm ERR! extraneous: doctrine@3.0.0 /Users/kosaito/kintone-dev/Source/node_modules/eslint/node_modules/doctrine

npm ERR! extraneous: eslint-utils@1.4.3 /Users/kosaito/kintone-dev/Source/node_modules/eslint/node_modules/eslint-utils

npm ERR! extraneous: espree@6.2.1 /Users/kosaito/kintone-dev/Source/node_modules/eslint/node_modules/espree

npm ERR! extraneous: ignore@4.0.6 /Users/kosaito/kintone-dev/Source/node_modules/eslint/node_modules/ignore

npm ERR! extraneous: inquirer@6.5.2 /Users/kosaito/kintone-dev/Source/node_modules/eslint/node_modules/inquirer

npm ERR! extraneous: levn@0.3.0 /Users/kosaito/kintone-dev/Source/node_modules/eslint/node_modules/levn

npm ERR! extraneous: optionator@0.8.3 /Users/kosaito/kintone-dev/Source/node_modules/eslint/node_modules/optionator

npm ERR! extraneous: regexpp@2.0.1 /Users/kosaito/kintone-dev/Source/node_modules/eslint/node_modules/regexpp

npm ERR! extraneous: semver@6.3.0 /Users/kosaito/kintone-dev/Source/node_modules/eslint/node_modules/semver

npm ERR! extraneous: strip-ansi@5.2.0 /Users/kosaito/kintone-dev/Source/node_modules/eslint/node_modules/strip-ansi

npm ERR! extraneous: estraverse@5.1.0 /Users/kosaito/kintone-dev/Source/node_modules/esquery/node_modules/estraverse

npm ERR! extraneous: is-fullwidth-code-point@2.0.0 /Users/kosaito/kintone-dev/Source/node_modules/slice-ansi/node_modules/is-fullwidth-code-point

npm ERR! extraneous: string-width@3.1.0 /Users/kosaito/kintone-dev/Source/node_modules/table/node_modules/string-width

npm ERR! extraneous: type-fest@0.11.0 /Users/kosaito/kintone-dev/Source/node_modules/ansi-escapes/node_modules/type-fest

npm ERR! extraneous: chalk@3.0.0 /Users/kosaito/kintone-dev/Source/node_modules/inquirer/node_modules/chalk

npm ERR! extraneous: emoji-regex@8.0.0 /Users/kosaito/kintone-dev/Source/node_modules/string-width/node_modules/emoji-regex

Avatar
cybozu Development team

kosaito様

記載いただいたnpm ERRですが、「npm ls --depth=0 」利用時のエラーでしょうか。

 @cybozu/eslint-config@10.0.3 および  eslint@6.4.0 以外のパッケージも入っているため ERRがどれに対するものか、区別がつかない状況です。

まずは現状でESLintがコマンドラインまたはエディタで利用できるかお試しいただき、できた場合は @cybozu/eslint-config の利用としては現状で問題ありませんので、

できなかった場合にご連絡をお願いできますでしょうか。

なお手順を一からやりなおす際は、(npm uninstall パッケージ --save-dev)で一度インストールしたパッケージを削除してからをおすすめいたします。

よろしくお願いいたします。

cybozu Development teamにより編集されました
Avatar
kosaito

回答ありがとうございます。

 

使用したところ問題なさそうでした!

お手数をおかけいたしました!

サインインしてコメントを残してください。