カテゴリー内の他の記事

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

作成日2018年01月26日 05:25
更新日2019年08月30日 01:19

Index

はじめに
ESLintとは
@cybozu/eslint-configとは
対応エディタ
ESLintのセットアップ
ESLintをもっと使いこなすために
参考サイト
変更履歴

はじめに

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 を扱える環境が必要です。

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

インストール

ESLintと@cybozu/eslint-configをインストールします。

作業用ディレクトリを用意します。
例：作業用ディレクトリの名前を「Source」とする場合
```
> mkdir Source
```
用意したディレクトリに移動し、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が存在しない場合も警告が表示されます。
ここでは詳細については割愛させていただきますが、必要に応じてご用意ください。
ESLintと@cybozu/eslint-configがインストールされていることを確認します。
```
> npm ls --depth=0
(インストール先ディレクトリ)\npm
+-- @cybozu/eslint-config@x.x.x
+-- eslint@x.x.x
```
※ x.x.x : バージョン番号
作業ディレクトリ内に「.eslintrc.js」ファイルを新規作成します。※ファイル名の先頭に「.」を付けてください。

Macの場合、下記コマンドでファイルを作成してください。
```
$ vi eslintrc.js
```
「.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が実行できているかどうか確認するため、エラーが出るような内容になっています。

実行結果

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

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

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

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

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

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

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

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

エディタへの適用

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

Visual Studio Code

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

VSCodeを立ち上げて、「拡張機能」をクリックします。
「ESLint」を検索し、「インストール」をクリックします。

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

実行結果

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

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

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"]
};

参考サイト

ESLint:
- User guide > Integrations
- User guide > Getting Started with ESLint
- User guide > Rules
npm: Getting started > 03 - How to prevent permissions errors　※Mac固有の内容

変更履歴

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

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

Topに戻る

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

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

中村 2018年04月02日 04:07

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

cybozu Development team 2018年04月03日 03:11

中村様

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

cybozu developer network 事務局です。

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

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

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

川上 2018年05月22日 02:01

横から失礼します。

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

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

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

＞＞

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

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

＞＞

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

宜しくお願い致します。

cybozu Development team 2018年05月22日 08:59

川上様

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

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

offにしたい場合は

"linebreak-style": "off"

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

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

とご記載ください。

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

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

hohashi 2019年06月05日 11:58

すいません。

インストールの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

---

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

cybozu Development team 2019年06月06日 06:30

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

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

まちだ 2019年08月01日 00:14

質問です。
「ES2017でのkintoneカスタマイズ」のルールセットを利用したいのですが、

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

こちらのインストール方法でよろしいでしょうか。
.eslintrc.jsをユーザーホームディレクトリ配下に置いて、どのフォルダのjsをVSCで
開いてもeslintが使えるようにしたいです。

cybozu Development team 2019年08月01日 01:07

まちだ様

お世話になっております。
cybozu developer network 運営でございます。

> こちらのインストール方法でよろしいでしょうか。
> .eslintrc.jsをユーザーホームディレクトリ配下に置いて、どのフォルダのjsをVSCで
> 開いてもeslintが使えるようにしたいです。

はい、こちらのインストール方法でご利用頂けます。

まちだ 2019年08月01日 02:26

ご返信ありがとうございます。
申し訳ないのですが、追加で質問させて下さい。

eslint test.jsを実行したところ、以下のエラーが出力されます。
グローバルインストールしたパッケージの場所を認識していないように思うのですが
対処方法があれば教えて下さい。

------------------------------
C:\Users\まちだ>eslint test.js
Oops! Something went wrong! :(
ESLint: 6.1.0.
ESLint couldn't find the config "@cybozu" to extend from. Please check that the name of the config is correct.
The config "@cybozu" was referenced from the config file in "C:\Users\まちだ\.eslintrc.js".
If you still have problems, please stop by https://gitter.im/eslint/eslint to chat with the team.

C:\Users\まちだ>npm ls -g --depth=0
C:\Users\まちだ\AppData\Roaming\npm
+-- @cybozu/eslint-config@6.0.1
+-- eslint@6.1.0
+-- prettier@1.18.2
`-- typescript@3.5.3

npm ERR! peer dep missing: eslint@^5.0.0, required by @typescript-eslint/eslint-plugin@1.13.0
npm ERR! peer dep missing: eslint@^5.0.0, required by @typescript-eslint/parser@1.13.0

cybozu Development team 2019年08月01日 02:59

まちだ様

お世話になっております。
cybozu developer network 運営でございます。

大変申し訳ございません、さきほどのコマンドで eslint 実行可能と申しましたが、
以下のように eslint-plugin-import の追加が必要でございます。

npm install -g eslint @cybozu/eslint-config eslint-plugin-import

また、まちだ様のエラーは .eslintrc.js に書かれている内容が、エラーとなっている可能性がございますので、
.eslintrc.js の内容をご共有頂けないでしょうか。

以上、ご確認お願い致します。

cybozu Development teamにより編集されました 2019年08月01日 02:59

まちだ 2019年08月01日 03:30

ご指摘どおり、以下実行してみました。
（特に前にインストールしたパッケージのuninstallなどしていません）
npm ls -g --depth=0　の実行結果にeslint-plugin-importが見えなくても良いのでしょうか？

eslintrc.jsの内容はtypeコマンドで表示しましたので、見ていただけると助かります。

C:\Users\まちだ>npm install -g eslint @cybozu/eslint-config eslint-plugin-import
C:\Users\まちだ\AppData\Roaming\npm\eslint -> C:\Users\まちだ\AppData\Roaming\npm\node_modules\eslint\bin\eslint.js
npm WARN @cybozu/eslint-config@6.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/parser@1.13.0 requires a peer of eslint@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @typescript-eslint/eslint-plugin@1.13.0 requires a peer of eslint@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN tsutils@3.14.1 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 installed. You must install peer dependencies yourself.

+ eslint@6.1.0
+ eslint-plugin-import@2.18.2
+ @cybozu/eslint-config@6.0.1
added 22 packages from 13 contributors, removed 5 packages, updated 3 packages and moved 31 packages in 7.928s

C:\Users\まちだ> npm ls -g --depth=0
C:\Users\まちだ\AppData\Roaming\npm
+-- @cybozu/eslint-config@6.0.1
+-- eslint@6.1.0
+-- prettier@1.18.2
`-- typescript@3.5.3

npm ERR! peer dep missing: eslint@^5.0.0, required by @typescript-eslint/eslint-plugin@1.13.0
npm ERR! peer dep missing: eslint@^5.0.0, required by @typescript-eslint/parser@1.13.0

C:\Users\まちだ>type .eslintrc.js
module.exports = {
extends: ["@cybozu", "@cybozu/eslint-config/globals/kintone"]
};

cybozu Development team 2019年08月01日 05:17

まちだ様

お世話になっております。
cybozu developer network 運営でございます。

.eslintrc.js の中身は問題なさそうです。

現状でも、eslint コマンドの実行は不可能でしょうか。

ご確認お願い致します。

cybozu Development teamにより編集されました 2019年08月01日 05:18

まちだ 2019年08月01日 05:20

何度もありがとうございます。
残念ながら、現時点でも実行結果は変わらないです。

C:\Users\まちだ>eslint test.js

Oops! Something went wrong! :(

ESLint: 6.1.0.

ESLint couldn't find the config "@cybozu" to extend from. Please check that the name of the config is correct.

The config "@cybozu" was referenced from the config file in "C:\Users\まちだ\.eslintrc.js".

If you still have problems, please stop by https://gitter.im/eslint/eslint to chat with the team.

まちだにより編集されました 2019年08月01日 05:21

cybozu Development team 2019年08月01日 05:39

まちだ様

お世話になっております。
cybozu developer network 運営でございます。

該当のエラーはグローバルに @cybozu/eslint-config パッケージがインストールされていない場合に表示されるエラーとなっております。
一度今回グローバルにインストールされたパッケージをすべて削除し、再インストールか、
ローカルに @cybozu/eslint-config をインストールして動作するか確認お願いできますでしょうか。

お手数ですがよろしくお願い致します。

まちだ 2019年08月01日 06:09

グローバルに再インストール（uninstall後）してみましたが、事象に変化ありませんでした。
ローカルにインストールすれば、カレントのjsについては正常にeslintが実行できました。

ソースの配置がまとまっておりませんので、グローバルで利用したかったのですが残念です。

まちだにより編集されました 2019年08月01日 06:20

cybozu Development team 2019年08月01日 06:17

まちだ様

お世話になっております。
cybozu developer network 運営でございます。

グローバルにインストールされたモジュールへのパスが通っていない可能性がございます。

外部サイトではございますが、こちらの一度ご確認お願い致します。
https://qiita.com/shintarogit/items/70f193829f4360dca771

以上、よろしくお願い致します。

まちだ 2019年08月01日 13:18

ご回答いただき、助かりました。
NODE_PATHを設定することで、eslitのコマンド実行はどのフォルダでも正常に動作しました。
ありがとうございました。

shunta 2019年12月11日 03:49

こちら何も設定をしていない状態から、

VSCODEのダウンロードをしてからこの設定をしたのですが

導入後のエディター部分で

constとかfanctionで

"Parsing error: The keyword 'const' is reservedeslint"

と出力されてそれ以降のチェックがされないようになってしまいます。

        "no-undef": "error"
    },
    "env": {"es6": true},
    "parserOptions": {
        "ecmaVersion": 2019

こんな感じの記述を.eslintrc.jsに記述すると見た目動作してるように思うのですが、こちらの方法で扱って問題ないでしょうか・・・？

もし適切な対応方法があれば教えてください

またもう一点

https://developer.cybozu.io/hc/ja/articles/360023293091-TypeScript%E3%81%A7kintone%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E9%96%8B%E7%99%BA%E3%82%92%E3%81%97%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86

こちらの入力補完機能との併用したいのですが、TSファイルにも反応してくれるようにする設定はどこですればよいでしょうか

shuntaにより編集されました 2019年12月11日 09:20

cybozu Development team 2019年12月13日 04:48

shunta 様

お世話になっております。cybozu developer network 運営事務局です。

ESLintをもっと使いこなすためにの「様々なルールセットを利用する」に記載している通り、
本記事でのセットアップは ECMAScript5(ES5) に合わせたルールでご紹介しています。
これは、ES6(ES2015)以上では Internet Exploror で動作しない書き方が多く含まれるためです。

"const” はES6で追加された機能です。このため、ES5に合わせたルールではエラーとなります。

ES2017での開発を行う場合は、

extends: "@cybozu/eslint-config/presets/kintone-customize-es5"

を

extends: ["@cybozu", "@cybozu/eslint-config/globals/kintone"]

に書き換えてお使いください。

"@cybozu" ：ES2017向けのルールセット
"@cybozu/eslint-config/globals/kintone" ：kintone開発向けのglobal定義（kintoneAPI実行時に使う「kintone」等でエラーにならないようにするもの）

また、Typescript で開発を行う場合は以下に書き換えてください。

extends: ["@cybozu/eslint-config/presets/typescript", "@cybozu/eslint-config/globals/kintone"]

用意されているすべてのルールセットは、GitHub の README でご確認いただけます。

shunta 2019年12月13日 08:16

cybozu Development team 様

すみません、回答頂いた部分を書き換えて下記のような設定をしていますが、正常に動作しません。

どこを直せば良いでしょうか・・・？

module.exports = {
    // 通常JavaScript
    "extends": ["@cybozu", "@cybozu/eslint-config/globals/kintone"],


    "rules": {
        "indent": ["error" , 4 , {"SwitchCase": 1}],
        "no-mixed-spaces-and-tabs": "error",
        "semi": "error",
        "no-multiple-empty-lines": [1, {"max": 1}],
        "quotes": 0
    }
};

shuntaにより編集されました 2019年12月13日 09:14

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