技術ブログ

(技術系中心)基本自分用備忘録なので、あくまで参考程度でお願いします。

ESLintとPrettierの違いについて

ESLintとPrettierの違いについて

ESLintとPrettierはどちらもソースコードの品質を高めるツールになります。

ESLint

  • JavaScriptのための静的検証ツール
  • ファイル内のバグチェックやコーディングスタイルの一貫性を保つ

例)

  • letを使っているが再代入していないので、constを使うべき
  • (TypeScriptの場合)関数の返り値の型が未定義である
  • 宣言されているが、使っていない変数がある
  • 未定義の変数やモジュールを使用している

Prettier

  • コードフォーマッター
  • ルールに従ってソースコードを整形してくれる
  • プロジェクトごとにルールを設定する

ESLintとPrettierの違い

ESLintとPrettierは併用されているケースが多い。

理由はできることが重複する部分があるが、それぞれ得意分野が違うのでそれぞれその分野を担当させようというケースが多いからである。

例)得意分野

ESLint:静的解析ツール。バグの可能性がある書き方を指摘する。

Prettier:コードフォーマッター。インデント、改行などを自動整形してくれる。