開発編　ESLint、Prettierでjavascriptのコード整形・コードチェックの実施

2021年4月18日 00:50

javascriptの開発でソースコードの整形ツールとコードチェッカーを使用します。各ツールのインストール方法と動作を確認します。

各ツールの説明
○ESLint
　・JavaScriptのコードの間違いをチェックしてくれるツール。
　　読み方はイーエスリント。
　　このツールは、コードを整形する機能も付属しています。
○Prettier
　・ソースコードを整形してくれるツール。
　　読み方はプリティア。

コード整形の機能は、「ESLint」と「Prettier」の両方のツールで備わっています。ただ、「ESLint」は、コード整形できないケースがあるので、コード整形は「Prettier」を使用します。「Prettier」は、事前に設定ファイルを作成する作業がないので、初心者でも簡単に使用できるのがグッドです。

１．ESLint、Prettierのインストール

npmコマンドを使用して、「prettier」をインストールをします。

# npm install prettier@2.1.1 -D

以下のサイトが参考になります。
〇Prettier 入門～ESLintとの違いを理解して併用する～

以下、補足。
◆npmとは
npmとは、JavaScript 系のパッケージを管理するツールのこと。
Node Package Manager の略。フロントエンド開発には欠かせないツール。
必要とするパッケージをインストールする際、依存するパッケージもまとめてインストールしてくれます。

◆package.json　ファイル　とは
npmコマンドを実行した時、カレントディレクトリに配置されるファイル。
package.jsonにはインストールするモジュールを記入することができます。
このファイルがあるおかげで、node_modulesの中身はGitなどに登録しなくても開発環境の移行が容易になります。

◆npm install のオプション「-D」ってどんな意味？
「-D」は、「--save-dev」のショートカット　になります。
テストツールなど、開発者が使用するパッケージの場合に指定するオプション。package.json の devDependencies に記録されます。

２．Prettierでコード整形の実行結果を確認

サンプルソースファイル（app.js）に対して、「Prettier」で整形してみます。

# prettier app.js --write

実行した結果を確認したところ、想定外の動きがありました。
＜想定内＞
　・インデントが整えられる。
　・カンマ区切りで書かれた複数の要素は、縦一列に並べられる。
＜想定外＞
　・カンマが不足している箇所は、カンマが自動追加されます。
　　→エラー箇所に対して、コードの修正までやってくるとは想定していなかった。エンジニアの立場として、コードの修正まで実施されてしまうのは怖いなぁと思いました。
　・関数の名前が間違っていてもエラーは起きない。
　　→コード整形のツールとはいえ、コードのチェックも少しはされるものだと思っていたが、コードのチェックの機能は全くないみたい。

３．ESlintでコードチェッカーの実行結果を確認

サンプルソースファイル（app.js）に対して、「ESLint」でコードチェックをしてみます。

# eslint --fix app.js

--以下が出力結果--
#  1:7  error  'Person' is defined but never used         no-unused-vars
# 13:7  error  'hoge' is assigned a value but never used  no-unused-vars
# 21:3  error  'consola' is not defined                   no-undef

1:7 error 'Person' is defined but never used no-unused-vars
→クラス'Person'を定義していても、使用していない場合はエラーになる。
13:7 error 'hoge' is assigned a value but never used no-unused-vars
→定数'hoge'を処理で使用していない場合はエラーになる。
21:3 error 'consola' is not defined no-undef
→スペルミス（誤：consola、正：console）はエラーになる。

４．まとめ

・ESLintとPrettierを組み合わせて使用すると開発に便利。

・npmコマンドで一括インストールが可能。

・Prettierは、整形ツールらしく、「タブ／スペース／改行」でソースコードの整形を実施してくれる。ただし、文法エラー等の箇所を自動修正する特性があり、「カンマ」等も追加して整形するケースもある。

・ESLintは、エラーの行数と列をエラーメッセージに表示するので、エラー箇所は簡単に特定できる。エラーメッセージは英語だが、エラーの文章は簡単な英語なので、何が問題なのかは理解できる。

以上