# ESLintとVisual Studio CodeでJavaScriptコードの構文をリアルタイムにチェックする（macOS版） **URL:** \ **Category:** kintone 開発相談\ **Created:** [2018 年 3 月 26 日午前 2:55 UTC](https://community.cybozu.dev/t/topic/2948 "2018-03-26T02:55:52Z")\ **Posts on this page:** 1\ **Page:** 1
**Author:** ![Legacy\_Account98](https://avatars.discourse-cdn.com/v4/letter/l/a587f6/32.png) [@Legacy\_Account98](https://community.cybozu.dev/u/Legacy_Account98)\ **Post date:** [2018 年 3 月 26 日午前 2:55 UTC](https://community.cybozu.dev/t/topic/2948/1 "2018-03-26T02:55:52Z")
※ この記事は [Toshi Akazawa](https://community.cybozu.dev/hc/ja/profiles/811107020)さんが投稿した内容の復旧記事です [「ESLint（kintone用設定）でJSのコードチェックをする方法」](https://community.cybozu.dev/hc/ja/community/posts/115009626906)という魅力的な記事を拝見しました。私はmacOS使いなのですが、実際に試してみると一部macOS特有の事情も発見しましたし、また一部私には理解できない部分もありました。そこで、macOSで実際に行った内容を細かに記載しておきます。 なお、[C]項はmacOS固有の話ですが、他はWindowsの方にも参考になるかと思います。お役に立てれば幸いです。   ## **[A] 参考サイト** (1) [npm とか bower とか一体何なんだよ！Javascript 界隈の文脈を理解しよう](https://qiita.com/megane42/items/2ab6ffd866c3f2fda066) そもそもnode.jpとかnpmとか何?っていう疑問に答えているサイトです。ここだけの話にしておいてもらいたいのですが、私も最初このサイトを見てから作業を始めました(^^; (2) [いまさら聞けない！npmのこれだけは知っておきたい基礎知識](https://www.webprofessional.jp/beginners-guide-node-package-manager/) 実際に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/](https://code.visualstudio.com/%20)からMac版をダウンロードし、解凍後、インストール（単に、アプリケーションフォルダに移動するだけ）します。 **(3) nyalloWorld.jsをVSCodeで開いてみる** エラーなどは発生していません。実際には、わざとセミコロンの抜けなどを設けてあるのですが。 **(4) node.jsのインストール** [https://nodejs.org/en/](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](https://www.akazawa.org/)