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 を編集する。
セミコロンに対するルールを追加("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 を設定してあげるとそのルールに従う。
ディレクトリ毎にルールを変えたいような場合は、ワークスペースの .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
}
下記のようにセーブ時にフォーマットが実行される。
