フロントエンド初心者の自分が、
Prettier, ESLint, stylelint などのツールを整理するための備忘録です。
それぞれの役割
自分が認識しているそれぞれの役割はだいたいこんなかんじ。
- Prettier
- 自動でコードをきれいにしてくれるコードフォーマッター
- ESLint
- JavaScriptの静的解析ツール
- stylelint
- CSSの静的解析ツール
ただ、Prettierがどこまで自動で整形してくれるかが自分のなかであいまいでしたので、調べてみました。
公式に書いてあった
訳すとこんな感じ。
↓↓↓
Linterで適用するルールは大きく二つに分かれます。
- 書式に関するルール
- 1行の長さは80文字まで、スペースとタブの混在を禁止、など
- 品質に関するルール
- 未使用な変数定義の禁止、暗黙的なグローバル変数の禁止、など
書式のルールはPrettierに任せてください！ ただし、品質に関するルールは面倒見れません...
まとめ
Prettier はコードをきれいにするには非常に便利ですが、 ESLint/stylelint を併用して使用したほうが
バグの少ない品質の高いコードになります。併用しましょう。
以上。