検索
Close
カテゴリー内の他の記事

ESLint（JavaScript コードチェッカー）

作成日
更新日
サイト更新情報をフォロー
API更新情報をフォロー
フォローする

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のセットアップ（Windows）

事前準備

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

  1. Node.js公式サイトからダウンロードします。公式サイトはこちら。
  2. ご自身のパソコンに合わせたインストーラーをダウンロードします。
  3. インストールを実行します。

    「Next」をクリックします。

    2018-02-07_10h46_29.png

    ライセンス規約を確認したら、「I accept the terms in ihe Licence Agreement」にチェックを入れて「Next」をクリックします。

    2018-02-07_10h49_44.png

    Node.jsのインストール先フォルダを選択し、「Next」をクリックします。（デフォルトでOKです。）

    2018-02-07_10h50_26.png

     インストールするコンポーネントを選択し、「Next」をクリックします。（デフォルトでOKです。）

    2018-02-07_10h51_20.png

     「Install」をクリックすると、インストールが開始されます。

    2018-02-07_10h52_02.png

     

    2018-02-07_10h52_52.png

    インストールが終了したら、「Finish」をクリックします。

    2018-02-07_10h52_59.png

    これでNode.jsとnpmがインストールされました。

インストール

ESLintと@cybozu/eslint-configをインストールします。
※ここでは、グローバルインストールの手順をご紹介します。
  1. コマンドプロンプトで「node -v」でNode.jsのバージョンを確認します。バージョンが6.14未満の場合はアップデートしてください。 
    > node -v
    v8.9.4
  2. 「npm install -g eslint @cybozu/eslint-config」でESLintと@cybozu/eslint-configをインストールします。コマンドを実行するとインストールが開始します。 
    > npm install -g eslint @cybozu/eslint-config
  3. 「npm ls -g --depth=0」で、ESLintと@cybozu/eslint-configがインストールされていることを確認します。 
    > npm ls -g --depth=0
    (インストール先フォルダ)\npm
    +-- @cybozu/eslint-config@3.0.2
    +-- eslint@5.10.0

  4.  「.eslintrc.js」ファイルを新規作成します。※ファイル名の先頭に「.」を付けてください。
    kintoneカスタマイズの場合、以下の3行を書き込みます。

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

     

  5. チェックしたいソースコードを置いているフォルダの親階層に「.eslintrc.js」ファイルを置きます。

    2018-03-26_16h50_07.png
    ※どのフォルダでも同じ設定で実行したい場合は、「C:\Users\ユーザー名」フォルダ等に置いておくと便利です。

コマンドラインでの実行

「eslint ファイル名」または「eslint フォルダ名」で、ESLintを実行します。

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

> eslint test.js

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

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

実行結果

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

eslint-log.png

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

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

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

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

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

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

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

エディタへの適用

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

Visual Studio Code(Windows)

Windowsでの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をもっと使いこなすために に進んでください。

 

ESLintのセットアップ（Mac）

事前準備

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

  1. Node.js公式サイトからダウンロードします。公式サイトはこちら。
  2. 「DOWNLOADS」タブをクリックし、ご自身のパソコンに合わせたインストーラーをダウンロードします。
    __________2018-03-05_10.58.20.png
  3. インストーラーをダブルクリックし、インストールを実行します。

    「続ける」をクリックします。
    __________2018-03-05_10.58.37.png

使用許諾契約で「続ける」をクリックします。
__________2018-03-05_10.58.55.png

使用許諾契約を読み、「同意する」をクリックします。
__________2018-03-05_10.59.04.png

インストール先を選択し、「続ける」をクリックします。
__________2018-03-05_10.59.24.png

インストールの種類で「インストール」をクリックします。
__________2018-03-05_10.59.32.png

インストールが終了したら、「閉じる」をクリックします。
__________2018-03-05_11.00.03.png

    これでNode.jsとnpmがインストールされました。

インストール

ESLintと@cybozu/eslint-configをインストールします。
※ここでは、グローバルインストールの手順をご紹介します。
  1. ターミナルで「node -v」でNode.jsのバージョンを確認します。バージョンが6.14未満の場合はアップデートしてください。 
    $ node -v
v8.9.4
  2. Macでグローバルインストールする場合、権限エラーが出やすくなります。それを回避するために、
    以下の手順で、別の新規ディレクトリを作成してそちらにインストールするよう設定します。

    2-1.「mkdir」で「.npm-global」というディレクトリを作ります。
    $ mkdir ~/.npm-global
    2-2.「npm config set prefix」で、作成したディレクトリにインストールされる設定をします。 
    $ npm config set prefix
    2-3.「vi ~/.profile」で「~/.profile」ファイルを新規作成または開きます。※ファイル名の先頭に「.」を付けてください。
    $ vi ~/.profile
    2-4.「~/.profile」ファイルに以下の1行を書き込みます。※「export PATH」で、システム環境変数を更新しています。 
    export PATH=~/.npm-global/bin:$PATH
    （参考）ターミナルのviエディタの操作の一例です。
      2-4-1.「a」でviの入力モードに変更
      2-4-2.  上記の1行を書き込み
      2-4-3. escキーでviのコマンドモードに変更
      2-4-4.「:wq」で保存して終了

    2-5.「source ~/.profile」で、システム環境変数の更新を反映します。 
    $ source ~/.profile
  3. 「npm install -g eslint @cybozu/eslint-config」でESLintと@cybozu/eslint-configをインストールします。コマンドを実行するとインストールが開始します。
    $ npm install -g eslint @cybozu/eslint-config
  4. 「npm ls -g --depth=0」で、ESLintと@cybozu/eslint-configがインストールされていることを確認します。
    $ npm ls -g --depth=0
（ホームディレクトリ）/.npm-global/lib
├── @cybozu/eslint-config@3.0.2
└── eslint@5.10.0
  5. 「vi ~/.eslintrc.js」で「.eslintrc.js」ファイルを新規作成します。
    $ vi ~/.eslintrc.js
  6. 「~/.eslintrc.js」ファイルに以下の3行を書き込みます。
    module.exports = {
        "extends": "@cybozu/eslint-config/presets/kintone-customize-es5"
    };
    ※上記の例はES5(ECMAScript5)を使ったkintone開発向けのルールです。
    　ES6(ECMAScript2015)を利用したい場合や、Node.js、Reactでの開発を行う場合の設定については、「様々なルールセットを利用する」を参照してください。

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

コマンドラインでの実行

Windowsのコマンドラインでの実行手順と同様です。

エディタへの適用

Windowsのエディタへの適用手順と同様です。

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」へ変更

Topに戻る 

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

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

Avatar
中村

Windows環境だと.jsファイルで
4:21 error Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style
のCRLFエラーが出ます。
kintoneのJSファイルの行末は、CRLFでも動作するようですが、LFとCRLFのどちらが好ましいのでしょうか?

Avatar
cybozu Development team

中村様

お世話になっております。

cybozu developer network 事務局です。

 

eslint-config-kintoneではLF以外はエラーとなるように設定しております。

しかし、ご自身のプロジェクト等で改行コードを統一していれば、LF/CRLFどちらを利用されても大丈夫です。

※ CRLFの場合は別途eslint-config-kintoneの設定を変更する必要があります。

Avatar
川上

横から失礼します。

error Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style 

 

このエラーを消す設定が全くわからず苦労しております。

どのように設定を変更すれば、このエラーは消えるのでしょうか。

＞＞

eslint-config-kintoneではLF以外はエラーとなるように設定しております。

※ CRLFの場合は別途eslint-config-kintoneの設定を変更する必要があります。

＞＞

上記のようにありましたが、詳細をご教授いただければ幸いです。

宜しくお願い致します。

Avatar
cybozu Development team

川上様

 

本記事の「ESLintをもっと使いこなすために」ー「ルール設定の変更」に、特定ルールの除外方法を記載していますのでご確認ください。

改行設定は、エラーメッセージの最後に記載されている通り「linebreak-style」というルールです。

offにしたい場合は

"linebreak-style": "off"

改行設定をWindows(CRLF)で統一したい場合は

"linebreak-style": [
 "error",
 "windows"
 ]

とご記載ください。

 

※ルール設定の詳細な書き方は、ESLintの公式サイトに掲載されています。

https://eslint.org/docs/user-guide/configuring#configuring-rules

Avatar
hohashi

すいません。

インストールの2で
npm install -g eslint @cybozu/eslint-config
を実行すると以下のエラーが発生して先に進めません。

----

npm WARN @cybozu/eslint-config@4.0.1 requires a peer of typescript@^3.3.3333 but none is installed. You must install peer dependencies yourself.
npm WARN eslint-plugin-prettier@3.1.0 requires a peer of prettier@>= 1.13.0 but none is installed. You must install peer dependencies yourself.
npm WARN @typescript-eslint/experimental-utils@1.9.0 requires a peer of typescript@* but none is installed. You must install peer dependencies yourself.
npm WARN tsutils@3.14.0 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev but none is inst

---

解決策があればお教えください

Avatar
cybozu Development team

hohashi 様

お世話になっております。

TypeScript と Prettier がないので warn （警告）が表示されております。
警告なので、TypeScript とPrettier が不要であれば、インストールしなくて 3. 以降に進むことはできるかと思います。

こちらの記事で紹介しているESLint の設定である @cybozu/eslint-config/presets/kintone-customize-es5 を使う場合には不要です。
必要であれば、以下のコマンドで TypeScript と Prettier パッケージも一緒にインストールしていただけないでしょうか。

$ npm install -g typescript prettier eslint @cybozu/eslint-config

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

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