新規投稿
フォローする

ESLintとVisual Studio CodeでJavaScriptコードの構文をリアルタイムにチェックする(macOS版)

※ この記事は 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](2)より一部引用させてもらっております。

[参考]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

ちゃんと、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
├── eslint-config-kintone@1.2.0
└── 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](3)と何も変わりません・・・ 何か失敗した気分になりますが、粘り強く待ちましょう。短いコードでも10秒くらいは待たないといけないみたいです。すると、以下のように赤波線でイケナイ箇所を指摘してくれます。


 

左下の角に「×」印がありますね(赤矢印)。ここをクリックしてください 。すると、画面下部(赤の囲み)にエラー内容が表示されます。

イケテナイところをどんどん直しましょう。するとリアルタイムにエラーが消えていきます。


hhという関数が一度も使ってないよというエラーが残ります。しかし、この短いコードでは仕方ありません。

このように、VSCodeを使い、コーディングしながら構文チェックができるようになりました。生産性が上がりそうですね!

Toshi Akazawa @Akazawa Studio LLC

3

0件のコメント

ログインしてコメントを残してください。