(多分)正しいPrettier×ESLintとStylelintの組み方

2021-10-19

ここ数年ずーっと Prettier と ESLint および Stylelint の組み方を模索していたのですが、ようやく正解だと思われる方法にたどり着いたので、備忘録がてら。


前提

基本的にフォーマットは Prettier  におまかせします。

そのため、ESLint と Stylelint 側で Prettier のフォーマットルールにバッティングするルールを無効化します。

Prettier × ESLint

ESLint の組み方

最低限必要なパッケージは以下のとおりです。

で、あとは設定を組むだけです。

{ "extends": [ "eslint:recommended", // 必ず配列の末尾に設定すること "prettier" ] }

簡単ですね。

ESLint を組むときの注意点

eslint-plugin-prettierprettier-eslint の導入は不要です。

これらの導入は推奨されておらず、基本的に考慮する必要もありません。

Prettier × Stylelint

Stylelint の組み方

ESLint の場合とほぼ同様です。

今回は stylelint-config-standard も導入したとします。

{ "extends": [ "stylelint-config-standard", // 必ず配列の末尾に設定すること "stylelint-config-prettier" ] }

こちらもめちゃくちゃ簡単ですね。

Stylelint を組むときの注意点

こちらも ESLint と同様に stylelint-prettier および prettier-stylelint の導入は不要です。

 詳細

Prettier の公式ドキュメント を読んでいただければと、自分は読んでもよくわかりませんでした。

全体的にパッケージの名前がややこしすぎますね、ほんと良くない。

備考

Prettier の導入は必要ないのか

あくまで Linter 側の設定を無効にするパッケージを導入しているだけなので、Prettier 自体の導入は関係ないです。

ただ実際には husky × lint-staged の組み合わせで動作させると思いますので、必然的に Prettier も導入することになるかと。

ESLint と Stylelint のフォーマットもかけたい

ぶっちゃけ Prettier のフォーマットだけだと物足りないので、Linter 側でもフォーマットはかけることがほとんどだと思います。

VS Code であれば以下の設定でいけると思います。

{ "editor.codeActionsOnSave": { "source.fixAll.eslint": true, "source.fixAll.stylelint": true }, "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true }

上記の設定だと【Prettier でフォーマットをかける → Linter でフォーマットをかける】という流れになるっぽいです。


そんな感じです、いろいろとややこしいですね。

© 2018 kk-web