ESLint、Prettierを使ってコード一貫性を実現する

コーディング技術 JavaScript

ESLint

ESLint とは

ESLint は、コードの一貫性を高め、バグを回避することを目的としている。ECMAScript/JavaScript コードで見つかったパターンを特定し、報告してくれるツール。

JavaScript はコンパイル不要なので、typoや命名間違いなどがコンパイルエラーとして観測できず、ブラウザ上でそのまま処理されてしまう。

ESLint を用いることでそういったバグなどを事前に対処することができるようになる。

ESlint をコマンドラインで使ってみる

前提として、SSL サポートを使用してビルドされたNode.js（16.0.0以上）を整える。

CLI 実行できるようにする時には、次のコマンドを叩く。

% npm init @eslint/config
✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · none
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ What format do you want your config file to be in? · JSON
Local ESLint installation not found.
The config that you've selected requires the following dependencies:

eslint@latest
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · npm
Installing eslint@latest

added 97 packages, and audited 98 packages in 6s

24 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Successfully created .eslintrc.json file in /Users/***/npm/my-app

hoge だけを書いた test.js を用意してコマンドを実行してみる。

% ./node_modules/.bin/eslint test.js
  1:1  error  'hoge' is not defined  no-undef

✖ 1 problem (1 error, 0 warnings)

リントのルールを設定したい場合は、.eslintrc.json を編集する。

Eslint Configuration

セミコロンに対するルールを追加("semi":"error")して、再度実行すると次のようになった。

  1:1  error  'hoge' is not defined  no-undef
  1:5  error  Missing semicolon      semi

✖ 2 problems (2 errors, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

ESLint を VSCode で使ってみる

VSCode で利用する際には拡張機能を入れるだけで良さそう。.eslintrc.json を設定してあげるとそのルールに従う。

image.png

ディレクトリ毎にルールを変えたいような場合は、ワークスペースの .vscode/settings.json にワーキングディレクトリを設定する。

例えば、次のような構成があるとする。

root/
  client/
    .eslintrc.json
    client.js
  server/
    .eslintignore
    .eslintrc.json
    server.js

上記に対してそれぞれLintをかけたい場合、.vscode/settingsjson に下記を設定する。

  "eslint.workingDirectories": [ "./client", "./server" ]

Prettier

Prettier とは？

Prettier はコードを一貫したスタイルに準拠させることを目的としたコードフォーマッター。バグ検出などは行わない。

Prettier をコマンドラインで使ってみる

Prettier をローカル環境で使うようにする。まずはインストール。

% npm install --save-dev --save-exact prettier

added 1 package, and audited 99 packages in 450ms

25 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

次に、Prettier の存在をエディタや他ファイルに知らせるために、構成ファイルを用意する。

echo {}> .prettierrc.json

Prettier とエディターがフォーマットしないファイルを認識できるように、ignore ファイルを用意する。

echo "{\n  # Ignore artifacts:  \n  build\n  coverage\n}" > .prettierignore

コードフォーマットする準備ができたので、コードフォーマットする。全てのファイルを Prettier でフォーマットする時には次のようにする。

% npx prettier --write .                 
.eslintrc.json 22ms
.prettierrc.json 1ms
.vscode/settings.json 1ms
package-lock.json 31ms
package.json 5ms
test.js 1ms

ESLint を使用する際には、互いのフォーマットルールが衝突しないように、eslint-config-prettierをインストールする。

% npm install --save-dev eslint-config-prettier

eslint-config-prettier をインストールしたら、ルールを上書きするために、ESLintの設定ファイル（.eslintrc.*）の extend 要素の最後に prettier を追加する。

Prettier を VS Code で使ってみる

まずは、拡張機能を Prettier - Code formatter で検索し、インストールする。

次に JavaScript に対して Prettier を規定フォーマッターにするのと、セーブ時にフォーマットを実行させるために、ワークフォルダの setting.json に下記を追加する。

  "editor.defaultFormatter": null,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  }

下記のようにセーブ時にフォーマットが実行される。

Image from Gyazo

参考