ESLint(kintone用設定)でJSのコードチェックをする方法

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. コマンドで実行:.ode_modules.bin\eslint ファイル名orフォルダ名

 

エディタで使う

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

対応エディタはこちら

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

私は愛用のSublime Textと、

VSCodeにも入れてみました。

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

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

 

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