ESLint/Prettierとは何か、両者の違いについて解説

ESLintとは

ESLintはJavaScriptの静的解析ツールで、
コードの問題点(バグの可能性があるコードなど)を発見、修正してくれる。

例えば下記のような指摘をしてくれる。

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

コマンドでの実行も可能だが、VSCodeのようなエディタと組み合わせることで指摘をリアルタイムで可視化することができる。

設定ファイルの名前はおよそ下記のいずれかである。

  • .eslintrc.js
  • .eslintrc.yml
  • .eslintrc.json
ESLint - Pluggable JavaScript linter
A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease.

ちなみにPrettier同様、コードフォーマットも行うことができる。

Prettierとは

PrettierはJavaScriptのコードフォーマッター。(JavaScript以外でも使える)

インデント、改行などの書き方を自動で統一してくれる。

「保存時に自動でフォーマットする」という使い方が一般的である。

設定ファイルの名前は「.prettierrc」。

規則性のないインデントや改行を「整形前→整形後」のように自動で修正してくれる。

Prettier · Opinionated Code Formatter
Opinionated Code Formatter

両者をどのように使い分けているのか

JavaScriptを導入しているプロジェクトでは、ほとんどESLintとPrettierが併用されていることが多い。

主な理由としては下記2点。

  • Prettierの方がコードフォーマッターとして優秀(少なめの設定でいい感じになる)
  • Prettierは構文チェックができず、その点ESLintが優秀である

要するに「できることがやや重複する部分があるが、それぞれ得意分野を担当させよう」ということである。

あと初心者にとっては静的解析ツールコードフォーマッターの違いが理解しづらいので、
そこも分かりにくくしているポイントである。

まとめ

  • ESLint:静的解析ツール。バグの可能性がある書き方を指摘する。
  • Prettier:コードフォーマッター。インデント、改行などを自動整形してくれる。
タイトルとURLをコピーしました