※ この記事は Toshi Akazawaさんが投稿した内容の復旧記事です
「ESLint（kintone用設定）でJSのコードチェックをする方法」という魅力的な記事を拝見しました。私はmacOS使いなのですが、実際に試してみると一部macOS特有の事情も発見しましたし、また一部私には理解できない部分もありました。そこで、macOSで実際に行った内容を細かに記載しておきます。
なお、[C]項はmacOS固有の話ですが、他はWindowsの方にも参考になるかと思います。お役に立てれば幸いです。
[A] 参考サイト
(1) npm とか bower とか一体何なんだよ！Javascript 界隈の文脈を理解しよう
そもそもnode.jpとかnpmとか何?っていう疑問に答えているサイトです。ここだけの話にしておいてもらいたいのですが、私も最初このサイトを見てから作業を始めました(^^;
(2) いまさら聞けない！npmのこれだけは知っておきたい基礎知識
実際にmacOSでnpmパッケージをインストールする際には、macOSではこの記事の内容が大事でした。以下の[C]の項で一部引用させていただきました。
[B] 準備
今回は別件で作成した nyalloWorld.js というコード（以下 nyalloプロジェクト）をMac内に配置しています。Hello World の代わりに Mew Worldとネコ語で挨拶するためのコードです。
また、私のMac内でのホームディレクトリは /Users/aka/ です。
以下で、行頭の$マークはコマンドプロンプトです。
(1) nyalloプロジェクトを配置する
~/Documents/nyallo/src/nyalloWorld.js
となるように、ディレクトリとファイルを配置しました。この時点では nyallo/以下に他のディレクトリやファイルはありません。
※macOSでは、「書類」フォルダ はディレクトリ名としては「Documents」となっています。
(2) Visual Studio Code（以下、VSCode）をインストールする
https://code.visualstudio.com/からMac版をダウンロードし、解凍後、インストール（単に、アプリケーションフォルダに移動するだけ）します。
(3) nyalloWorld.jsをVSCodeで開いてみる
エラーなどは発生していません。実際には、わざとセミコロンの抜けなどを設けてあるのですが。
(4) node.jsのインストール
https://nodejs.org/en/ からLTS(Long Term Support)版をダウンロードしインストールします。
インストールが終わると、nodeとnpmの両方のコマンドが使えるようになります。以下の操作は、Macのターミナルアプリでそれぞれのバージョンを確認しているところです。
$ node --version
v8.9.3
$ npm --version
5.5.1
[C] npmでインストールされるグローバルパッケージのディレクトリを変更する
macOS固有の内容です。Aより一部引用させてもらっております。
［参考］macOSではPC内のユーザ全員が利用できるようなインストール方法と、自分だけが使えればいいよというインストール方法があり、前者をグローバルインストール、後者をローカルインストールと呼んでいます。グローバルパッケージという言い方は、「誰でも利用できるようにインストールしたパッケージ」という意味です。
(1) パッケージがインストールされるディレクトリを確認する
$ npm config get prefix
/usr/local
/usr/local/ だと、root権限が必要となるため、サードパーティ製オブジェクトの解決時にパーミッションエラーが発生する可能性があるとのこと。また、セキュリティ上の懸念もあり得るとのこと。そこで、prefixの値をホームディレクトリ内の .node_modules_global に変更し、こういった問題の発生を回避することにします。
(2) npmによるパッケージのインストール先を.node_modules_global に変更
$ cd （ホームディレクトリへ移動）
$ mkdir .node_mudules_global
$ npm config set prefix=$HOME/.node_modules_global
(3) prefixの値を確認
$ npm config get prefix
/Users/aka/.node_modules_global
.npmrcというファイルがホームディレクトリに作成されていることを確認します。
$ cat .npmrc
prefix=/Users/aka/.node_modules_global
(4) npmの再インストール
npm自身も $HOME/.node_modules_global内にインストールし直します。
$ npm install npm --global
(5) 環境変数PATHの値変更
環境変数PATHの先頭に$HOME/.node_modules_globalを加え、このディレクトリ内のnpmが優先的に使われるようにします。
このため、.profileというファイルを作り、次の一行を書き込みます。
export PATH="$HOME/.node_modules_global/bin:$PATH"
ここで、一旦ターミナルを終了し、再度ターミナルを開きます。そして環境変数PATHの先頭に$HOME/.node_modules_global/binが加わっていることを確認します。
$ echo $PATH
/Users/aka/.node_modules_global/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin
$HOME/.node_modules_global/bin内のnpmが優先的に使われることを確認する。
$ which npm
/Users/aka/.node_modules_global/bin/npm
(6) グローバルパッケージの一覧
npmでインストールしたパッケージを一覧にしてみます。
$ npm list -g --depth=0
/Users/aka/.node_modules_global/lib
└──[npm@5.6.0](mailto:npm@5.6.0)
ちゃんと、npmがホームディレクトリ配下にインストールされていることがわかりました。
[D] ESLintをインストールする
(1) ESLintとeslint-config-kintoneのイントール
次のように操作します。
$ npm install -g eslint
$ npm install -g eslint-config-kintone
インストールされたか確認します。
$ npm list -g --depth=0
/Users/aka/.node_modules_global/lib
├──[eslint@4.18.2](mailto:eslint@4.18.2)
├──[eslint-config-kintone@1.2.0](mailto:eslint-config-kintone@1.2.0)
└──[npm@5.6.0](mailto:npm@5.6.0)
[E] プロジェクトごとに必要な設定
(1) package.jsonファイルの作成
nyalloプロジェクトのディレクトリに package.json ファイルを作ります。以下のように操作すると、コマンドラインでいろいろ質問されますが、ESLintを試すだけのプロジェクトであれば、リターンキーを押していくだけで大丈夫です。
$ cd ~/Documents/nyallo/
$ npm init
すると以下のように、package.jsonがnyalloディレクトリ内に作成されます。
$ ls -l
-rw-r--r-- 1 aka staff 249 12 15 20:29 package.json
drwxr-xr-x 3 aka staff 96 12 15 18:37 src
(2) .eslintrc.jsonというファイルを作る
次のよう入力します。
$ eslint --init
するといろいろ聞かれますが、私は以下のように答えました。イタリックの部分が私の回答です。
? How would you like to configure ESLint? **_Answer questions about your style_**
? Are you using ECMAScript 6 features? _ **Yes** _
? Are you using ES6 modules? **_No_**
? Where will your code run? _ **Browser** _
? Do you use CommonJS? _ **No** _
? Do you use JSX? _ **No** _
? What style of indentation do you use? _ **Spaces** _
? What quotes do you use for strings? _ **Single** _
? What line endings do you use? _ **Unix** _
? Do you require semicolons? _ **Yes** _
? What format do you want your config file to be in? _ **JSON** _
Successfully created .eslintrc.json file in /Users/aka/Documents/nyallo
(3) 構文チェックを実行
これでJavaScriptコードの構文チェックができるようになりました。ここではコマンドを使い、その動作を確認してみましょう。
今、/Users/aka/Documents/nyallo/ がカレントディレクトリです。./src/nyalloWorld.js の構文をチェックするには次のように入力します。
$ eslint src/
すると以下のようにいろいろと間違いを指摘されます。ちゃんと構文チェックが動作していることがわかります。
4:10 error 'hh' is defined but never used no-unused-vars
13:19 error Strings must use singlequote quotes
13:44 error Missing semicolon semi
14:5 error 'kintone' is not defined no-undef
15:29 error Missing semicolon semi
しかし、‘use strict’ が抜けていることは指摘してくれていませんし、'kintone’オブジェクトがエラーとして検出されているなど、変なところがあります。というのは、まだeslint-config-kintoneが動作していなからなのです。
(4) .eslintrc.jsonを編集する
eslint-config-kintoneを動作させるためには、.eslintrc.jsonファイルを編集する必要があります。まず、.eslintrc.jsonを開き、以下のような行を探してください。
"extends": "eslint:recommended",
この行を次のように書き換えて保存してください。
"extends": "eslint-config-kintone",
ここで、再度構文チェックを実行してみてください。
$ eslint src/
すると今度はエラー内容が以下のように変わります。
4:10 error 'hh' is defined but never used no-unused-vars
6:1 error Line 6 exceeds the maximum line length of 120 max-len
12:2 error Use the function form of 'use strict' strict
13:44 error Missing semicolon semi
15:29 error Missing semicolon semi
18:10 error Multiple spaces found before '// function' no-multi-spaces
'use strict’を使いなさいと指摘してくれています。また、'kintone’オブジェクトについてはエラーが消えました。つまり、eslint-config-kintoneが効果的に働いているということがわかりますね。
(5)プラグインを作成する場合
上では、~/Document/nyallo/にて作業しましたが、プラグインを作成する場合は、以下の場所で作業してください。
この図で言うと、（nyalloWorldディレクトリではなく、ひとつ上の）plugin01-nyalloWorldディレクトリで作業してください。理由は次のとおりです。
nyalloWorldディレクトリで作業すると、このディレクトリ内に.eslintrc.jsonファイルができあがります。すると、package.shスクリプトでプラグインを生成する際に「dot fileがあるのはダメよ」と怒られてしまい、プラグインを生成できないからです。
[F] VSCodeで構文チェックする
(1) VSCodeにESLintをインストール
VSCodeを起動します。
左端の四角いアイコン（赤丸）をクリック → 上部の「・・・」アイコン（赤丸）をクリック → 「お勧めの拡張機能を表示」を選びます。
すると、ESLintなどの拡張機能が表示されます。ここで、ESLintの「インストール」ボタンをクリックします。
これで以下のようにESLintがVSCodeに組み込まれます。なお、ここでいうESLintは[D]でインストールしたものではなく、[D]のものとVSCodeを紐付けるためのもののようです（未確認）。
(2) VSCodeを一旦終了する
組み込んだ拡張機能はVSCodeを再起動することで有効になるようです。
(3) nyalloWorld.jsをVSCodeで開く
~/Documents/nyallo/src/nyalloWorld.jsをVSCodeで開いてください。
しかし、Bと何も変わりません・・・ 何か失敗した気分になりますが、粘り強く待ちましょう。短いコードでも10秒くらいは待たないといけないみたいです。すると、以下のように赤波線でイケナイ箇所を指摘してくれます。
左下の角に「×」印がありますね（赤矢印）。ここをクリックしてください 。すると、画面下部（赤の囲み）にエラー内容が表示されます。
イケテナイところをどんどん直しましょう。するとリアルタイムにエラーが消えていきます。
hhという関数が一度も使ってないよというエラーが残ります。しかし、この短いコードでは仕方ありません。
このように、VSCodeを使い、コーディングしながら構文チェックができるようになりました。生産性が上がりそうですね！
Toshi Akazawa @Akazawa Studio LLC