Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What is going on with this article?
@peyryo

Prettier と ESLint/stylelint のルールの違い

More than 1 year has passed since last update.

フロントエンド初心者の自分が、
Prettier, ESLint, stylelint などのツールを整理するための備忘録です。

それぞれの役割

自分が認識しているそれぞれの役割はだいたいこんなかんじ。

  • Prettier
    • 自動でコードをきれいにしてくれるコードフォーマッター
  • ESLint
    • JavaScriptの静的解析ツール
  • stylelint
    • CSSの静的解析ツール

ただ、Prettierがどこまで自動で整形してくれるかが自分のなかであいまいでしたので、調べてみました。

公式に書いてあった

訳すとこんな感じ。

↓↓↓

Linterで適用するルールは大きく二つに分かれます。

  • 書式に関するルール
    • 1行の長さは80文字まで、スペースとタブの混在を禁止、など
  • 品質に関するルール
    • 未使用な変数定義の禁止、暗黙的なグローバル変数の禁止、など

書式のルールはPrettierに任せてください! ただし、品質に関するルールは面倒見れません...

まとめ

Prettier はコードをきれいにするには非常に便利ですが、 ESLint/stylelint を併用して使用したほうが
バグの少ない品質の高いコードになります。併用しましょう。

以上。

1
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
peyryo

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
1
Help us understand the problem. What is going on with this article?