これは何？
javascriptのコードが解析されていい感じに整形されるようにします。
- リンター(解析): ESLint
- フォーマッター(整形): prettier
ESLint
npm init @eslint/config
インストールすると、設定に関する質問がいくつかあるのでそれに答えます。
style guideはAirbnbが1番人気のようです。
Airbnbの設定は日本語にも訳されていて、わかりやすいと思います。
↓ Google、Airbnb、Standardの大まかな違いは以下の記事にまとめられています。
.eslintrcがjsもしくはjsonもしくはymlで作成されるので、そこで自分好みの設定をすることができます。
"off" or 0 - turn the rule off
"warn" or 1 - turn the rule on as a warning (doesn’t affect exit code)
"error" or 2 - turn the rule on as an error (exit code will be 1)
-
"off"=> 指定したルールは無視される -
"warn"ルールに反している場合,注意をされる -
"error"ルールに反している場合、ガチギレされる
"rules": {
"no-unused-vars": "off",
"indent": ["warn", 2],
"semi": "error",
}
例えば上記のように設定した場合、使われていない変数があっても警告は表示されない、インデントが2出なかった場合、注意をされる、セミコロンがなかった場合、ガチギレされるになります。
※ 設定できるruleの一覧
設定時にstyle guideを選んだ場合は、デフォルトでそのstyle guideのruleが適用されていて、.eslintrcでオーバーライドする形になります。
以下のコマンドでリンターを走らせることができます。
npx eslint 解析したいファイルまたはディレクトリ
prettier
ESLintでコードを解析して、prettierでコードをよりprettyにする(整形する)ことができます。
npm install --save-dev --save-exact prettier
echo {}> .prettierrc.json
.prettierrc.jsonにprettierの設定を書きます。
{
"singleQuote": true,
"semi": false
}
例えば上記のように設定すると、ダブルクォートがシングルクォートに変換され、末尾のセミコロンがある場合は削除されます。
※ 追加できるオプション
以下のコマンドでprettierを走らせることができます。
npx prettier --write 対象のファイルまたはディレクトリ
対象外にしたいファイルやディレクトリがある場合は.prettierignoreを作成し、追加することで対象外にできます。
ESLintとprettierを同時に使う
package.jsonにESLintで解析するのと同時にprettierで整形できるようにコマンドを設定します。
"scripts": {
"clean": "npx prettier --write src && npx eslint --fix src"
}
上記のように設定すると、npm run cleanによってESLintとprettierが走るようになります。
ESLint側とprettier側で設定が違うとコンフリクトしてしまうので、擦り合わせをする必要があります。
↑ どちらもconflictするruleをESLint側でoffにするものなのでどちらを使ってもいいと思います。
eslint-config-prettierを使ってみます。
npm install --save-dev eslint-config-prettier
{
"extends": [
"some-other-config-you-use",
"prettier" // <= 追加
]
}
conflictがあるかどうかの確認は以下のコマンド(ディレクトリではなくファイル指定)
npx eslint-config-prettier 対象のファイル
- conflictがあった場合
The following rules are unnecessary or might conflict with Prettier:
- indent
- conflictがなかった場合
No rules that are unnecessary or conflict with Prettier were found.