JavaScriptの構文チェック。

kintone用開発ではjswatchdogを使っていたのですが、エディタでコーディングした後にWebページ開いてコード貼り付けて・・・と意外と面倒。

エディタでリアルタイムに確認できないかなーと思っていたら、ESLint に kintone用の設定パッケージが公開されているのを発見！

せっかくなので、設定方法とともに情報共有します。

■kintone用のESLint設定パッケージはこちら
　eslint-config-kintone　GitHub 　npm

使い方

※私はWindowsです。Macでもたぶん同じ？

1. Node.js とnpm が扱える環境を用意（なければインストール）
2. node -v でNode.jsのバージョンを確認。4.0.0以下ならアップデートする。
3. インストールしたいプロジェクトに移動（cd）する
4. プロジェクト配下にpackage.jsonがない場合、npm --initでpackage.jsonを作成しておく。
5. npm install --save-dev eslint でESLintをインストール
6. npm install --save-dev eslint-config-kintone でeslint-config-kintoneをインストール
7. npm ls コマンドで、ESLintとeslint-config-kintoneが親子関係でインストールされていることを確認する。
8. .eslintrc.json というESLintの設定ファイルをプロジェクト直下に配置する。
   ＜ファイルの配置例＞
   
   ＜.eslintrc.jsonの内容＞
   {
   "extends": "eslint-config-kintone"
   }
   ※自分用に設定変えたいときは、.eslintrc.jsonに追記していけば良いはず。
9. コマンドで実行：.\node_modules.bin\eslint ファイル名orフォルダ名

エディタで使う

↑ の準備が終わったら、使っているエディタに拡張機能を入れればエディタ上でESLintが使えるようになります！

対応エディタはこちら。

エディタ側の設定はそれぞれ違うので、ここでは割愛します。

私は愛用のSublime Textと、

VSCodeにも入れてみました。

VSCodeってESLintの結果めっちゃ見やすい。。。
Sublimeでもこんな感じでできないのかな。誰か教えてください(;▽;)ノ

※ちなみに、Cloud9でも使えます。Node.jsのバージョン要注意。

愛用のエディタにESLintを入れて、リアルタイムにJSチェックをしよう♪