はじめに
JavaScriptのコードチェッカーとして、2016年5月よりご愛用いただいたjswatchdogに代わり、
2018年4月以降は、保守の観点からESLintを推奨します。
また、ESLintの設定として、kintoneのカスタマイズ開発向けの@cybozu/eslint-configを推奨します。
この記事では、初心者の方向けに、ESLintのセットアップ手順をご説明します。
ESLintとは
他のツールと異なり、独自のルールを作成して拡張として追加できることが特徴です。
@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公式サイトからインストーラをダウンロードします。公式サイトはこちら。
- ダウンロードしたインストーラを実行し、画面に従ってセットアップを行います。
インストール
- 作業用ディレクトリを用意します。
例:作業用ディレクトリの名前を「Source」とする場合
> mkdir Source
- 用意したディレクトリに移動し、ESLintと@cybozu/eslint-configをインストールします。
> cd Source
TypeScript とPrettierがインストールされていない場合、警告が出ます。
> npm install --save-dev eslint @cybozu/eslint-config
こちらの記事で紹介している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がインストールされていることを確認します( x.x.x : バージョン番号)。
> npm ls --depth=0
次のエラーメッセージが表示された場合、バージョンを指定して eslint をインストールし直してください。
(インストール先ディレクトリ)\npm
+-- @cybozu/eslint-config@x.x.x
+-- eslint@x.x.x
エラーメッセージ> 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 のバージョン番号(太字部分)です。
-
作業ディレクトリ内に「.eslintrc.js」ファイルを新規作成します。※ファイル名の先頭に「.」を付けてください。
Macの場合、下記コマンドでファイルを作成してください。$ vi .eslintrc.js
-
「.eslintrc.js」ファイルに以下の3行を書き込みます。
module.exports = {
※上記の例はES5(ECMAScript5)を使ったkintone開発向けのルールです。
"extends": "@cybozu/eslint-config/presets/kintone-customize-es5"
};
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からプラグインの読み込み方に変更があったため、手順をグローバルインストールからローカルインストールに変更しました。
Windows環境だと.jsファイルで
4:21 error Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style
のCRLFエラーが出ます。
kintoneのJSファイルの行末は、CRLFでも動作するようですが、LFとCRLFのどちらが好ましいのでしょうか?
中村様
お世話になっております。
cybozu developer network 事務局です。
eslint-config-kintoneではLF以外はエラーとなるように設定しております。
しかし、ご自身のプロジェクト等で改行コードを統一していれば、LF/CRLFどちらを利用されても大丈夫です。
※ CRLFの場合は別途eslint-config-kintoneの設定を変更する必要があります。
横から失礼します。
error Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style
このエラーを消す設定が全くわからず苦労しております。
どのように設定を変更すれば、このエラーは消えるのでしょうか。
>>
eslint-config-kintoneではLF以外はエラーとなるように設定しております。
※ CRLFの場合は別途eslint-config-kintoneの設定を変更する必要があります。
>>
上記のようにありましたが、詳細をご教授いただければ幸いです。
宜しくお願い致します。
川上様
本記事の「ESLintをもっと使いこなすために」ー「ルール設定の変更」に、特定ルールの除外方法を記載していますのでご確認ください。
改行設定は、エラーメッセージの最後に記載されている通り「linebreak-style」というルールです。
offにしたい場合は
改行設定をWindows(CRLF)で統一したい場合は
とご記載ください。
※ルール設定の詳細な書き方は、ESLintの公式サイトに掲載されています。
https://eslint.org/docs/user-guide/configuring#configuring-rules
すいません。
インストールの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
---
解決策があればお教えください
hohashi 様
お世話になっております。
TypeScript と Prettier がないので warn (警告)が表示されております。
警告なので、TypeScript とPrettier が不要であれば、インストールしなくて 3. 以降に進むことはできるかと思います。
こちらの記事で紹介しているESLint の設定である @cybozu/eslint-config/presets/kintone-customize-es5 を使う場合には不要です。
必要であれば、以下のコマンドで TypeScript と Prettier パッケージも一緒にインストールしていただけないでしょうか。
よろしくお願いいたします。
質問です。
「ES2017でのkintoneカスタマイズ」のルールセットを利用したいのですが、
> npm install -g typescript prettier eslint @cybozu/eslint-config
こちらのインストール方法でよろしいでしょうか。
.eslintrc.jsをユーザーホームディレクトリ配下に置いて、どのフォルダのjsをVSCで
開いてもeslintが使えるようにしたいです。
まちだ 様
お世話になっております。
cybozu developer network 運営でございます。
> こちらのインストール方法でよろしいでしょうか。
> .eslintrc.jsをユーザーホームディレクトリ配下に置いて、どのフォルダのjsをVSCで
> 開いてもeslintが使えるようにしたいです。
はい、こちらのインストール方法でご利用頂けます。
ご返信ありがとうございます。
申し訳ないのですが、追加で質問させて下さい。
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 developer network 運営でございます。
大変申し訳ございません、さきほどのコマンドで eslint 実行可能と申しましたが、
以下のように eslint-plugin-import の追加が必要でございます。
また、まちだ 様のエラーは .eslintrc.js に書かれている内容が、エラーとなっている可能性がございますので、
.eslintrc.js の内容をご共有頂けないでしょうか。
以上、ご確認お願い致します。
ご指摘どおり、以下実行してみました。
(特に前にインストールしたパッケージのuninstallなどしていません)
npm ls -g --depth=0 の実行結果にeslint-plugin-importが見えなくても良いのでしょうか?
eslintrc.jsの内容はtypeコマンドで表示しましたので、見ていただけると助かります。
まちだ 様
お世話になっております。
cybozu developer network 運営でございます。
.eslintrc.js の中身は問題なさそうです。
現状でも、eslint コマンドの実行は不可能でしょうか。
ご確認お願い致します。
何度もありがとうございます。
残念ながら、現時点でも実行結果は変わらないです。
まちだ 様
お世話になっております。
cybozu developer network 運営でございます。
該当のエラーは グローバルに @cybozu/eslint-config パッケージがインストールされていない場合に表示されるエラーとなっております。
一度 今回グローバルにインストールされたパッケージをすべて削除し、再インストールか、
ローカルに @cybozu/eslint-config をインストールして動作するか確認お願いできますでしょうか。
お手数ですがよろしくお願い致します。
グローバルに再インストール(uninstall後)してみましたが、事象に変化ありませんでした。
ローカルにインストールすれば、カレントのjsについては正常にeslintが実行できました。
ソースの配置がまとまっておりませんので、グローバルで利用したかったのですが残念です。
まちだ 様
お世話になっております。
cybozu developer network 運営でございます。
グローバルにインストールされたモジュールへのパスが通っていない可能性がございます。
外部サイトではございますが、こちらの一度ご確認お願い致します。
https://qiita.com/shintarogit/items/70f193829f4360dca771
以上、よろしくお願い致します。
ご回答いただき、助かりました。
NODE_PATHを設定することで、eslitのコマンド実行はどのフォルダでも正常に動作しました。
ありがとうございました。
こちら何も設定をしていない状態から、
VSCODEのダウンロードをしてからこの設定をしたのですが
導入後のエディター部分で
constとかfanctionで
"Parsing error: The keyword 'const' is reservedeslint"
と出力されてそれ以降のチェックがされないようになってしまいます。
こんな感じの記述を.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 様
お世話になっております。cybozu developer network 運営事務局です。
ESLintをもっと使いこなすために の「様々なルールセットを利用する」に記載している通り、
本記事でのセットアップは ECMAScript5(ES5) に合わせたルールでご紹介しています。
これは、ES6(ES2015)以上では Internet Exploror で動作しない書き方が多く含まれるためです。
"const” はES6で追加された機能です。このため、ES5に合わせたルールではエラーとなります。
ES2017での開発を行う場合は、
を
に書き換えてお使いください。
"@cybozu" :ES2017向けのルールセット
"@cybozu/eslint-config/globals/kintone" :kintone開発向けのglobal定義(kintoneAPI実行時に使う「kintone」等でエラーにならないようにするもの)
また、Typescript で開発を行う場合は以下に書き換えてください。
用意されているすべてのルールセットは、GitHub の README でご確認いただけます。
cybozu Development team 様
すみません、回答頂いた部分を書き換えて下記のような設定をしていますが、正常に動作しません。
どこを直せば良いでしょうか・・・?
shunta 様
記載いただいた内容で「.eslintrc.js」を書き換えて試してみましたが、正常に動作していることが確認できました。
記載内容は問題ないようなので、他の箇所に原因があると考えられます。
「.eslintrc.js」の配置場所や、他のルールでは動作するか等ご確認いただけますでしょうか?
cybozu Development team 様
承知しました、確認ありがとうございます。
一応、
cybozu Development team 様
改めてインストールしてみましたが、どうしても動作しませんでした・・・
package.json
cybozu Development team 様
こちら解決しました。
この記述をすることで動作しました。
なぜこうなるかまではわかりませんでした。
shunta 様
こちら原因調査に時間がかかってしまい申し訳ございません。
解決されたとのことでしたが、こちらで調べて分かったことについてお伝えします。
エラーメッセージを拝見し調査したところ、
shunta 様の最初うまくいっていなかった原因としては、ESLintをグローバル インストールしていたため、
「package.json」を参照できていなかったのではないかと思いました。
ESLint v6以降、eslintをグローバルインストールしてプラグインを使うことが非推奨となっています。
外部サイトではございますが、こちらが参考になりました。
§ プラグインの読み込み方が大幅に変更されました。
shunta様が解決された方法では、setting.jsonに
グローバルインストールされた/Source/に配置されている「package.json」を参照する、という記載をしているため、
「package.json」が参照でき、正常に動作したのではないかと思いました。
なるほど・・・
グローバルインストールの内容を確認したんですが、インストールされてるようには見えず…
若干謎がまだ残ってはいますが、とりあえずなんかがグローバルぽく認識されたということですかね
ありがとうございました!
C:\Users\shunta\Documents\vscode>npm list -g
C:\Program Files (x86)\Nodist\bin
`-- (empty)
質問失礼いたします。
3.の手順で大量のエラーが出て躓いてしまいました。
UNMET PEER DEPENDENCY eslint@7.0.0と表示されていたので、このバージョンをインストールすればよいのかと思い、
npm install eslinet@7.0.0 --saveを実行しましたが、エラーの内容は変わらず。。
当方、初学者ゆえ質問の仕方に失礼あるかもしれませんが、ご教授お願いできますか。
エラー内容は下記↓↓
kosaito@MacBook-Air Source % npm ls --depth=0
/Users/kosaito/kintone-dev/Source
├── @cybozu/eslint-config@10.0.3
├── UNMET PEER DEPENDENCY eslint@7.0.0
├── prettier@2.0.5
└── typescript@3.8.3
npm ERR! peer dep missing: eslint@^6.4.0, required by @cybozu/eslint-config@10.0.3
npm ERR! peer dep missing: eslint@^5.0.0 || ^6.0.0, required by @typescript-eslint/eslint-plugin@2.31.0
npm ERR! peer dep missing: eslint@^5.0.0 || ^6.0.0, required by @typescript-eslint/parser@2.31.0
npm ERR! peer dep missing: eslint@2.x - 6.x, required by eslint-plugin-import@2.20.2
npm ERR! peer dep missing: eslint@^3 || ^4 || ^5 || ^6, required by eslint-plugin-jsx-a11y@6.2.3
npm ERR! peer dep missing: eslint@^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0, required by eslint-plugin-react@7.19.0
npm ERR! peer dep missing: eslint@^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0, required by eslint-plugin-react-hooks@2.5.1
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: doctrine@2.1.0 /Users/kosaito/kintone-dev/Source/node_modules/eslint-plugin-react/node_modules/doctrine
kosaito 様
お世話になっております。cybozu developer network 運営事務局です。
お返事が遅くなり申し訳ございません。
kosaito 様が対応してくださった ESLint v7.0.0 のインストールですが、記載してくださったエラーの内容を確認いたしますと、
> npm ERR! peer dep missing: eslint@^6.4.0, required by @cybozu/eslint-config@10.0.3
とあります。
こちらのエラーですが、@cybozu/eslint-config のパッケージ自体が ESLint v6.4.0 までにしか対応していないために発生しております。
現在、ESLint のバージョンアップに対応している状況です。
大変恐れ入りますが、以下のようにバージョンを変更したものを再度実行していただくようお願いいたします。
> npm install eslinet@6.4.0 --save
回答有り難うございます!バージョン変更のコマンドを実行してみたのですが、今度は以下のようなエラーがでました。
kosaito@MacBook-Air Source % npm install eslinet@6.4.0 --save
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/eslinet - Not found
npm ERR! 404
npm ERR! 404 'eslinet@6.4.0' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/kosaito/.npm/_logs/2020-05-15T15_25_14_997Z-debug.log
registryの設定ファイルのパス?ですかね?すみません、どこをどのように修正すればよいかご教授いただけると助かります。
kosaito 様
お世話になっております。cybozu developer network 運営事務局です。
前回のコメントでお伝えしたコマンドにタイプミスがございました。
お手数をおかけいたしますが、以下のコマンドで再度実行していただくことは可能でしょうか?
> npm install eslint@6.4.0 --save
お手間を取らせてしまい申し訳ございません。よろしくお願いいたします。