https://zenn.dev/kazuwombat/articles/20e0c0cc83c3f2

JavaScriptを書いていて保存を押しても一瞬修正されてすぐに戻ってしまう....こんな経験ありませんか？PrettierとESLintのフォーマッターがコンフリクトしている状態です🥺

今まで自分は起きるたびに色々いじってたらなんか直ってしまい、しばらくしてまた遭遇するということを繰り返し、毎回イライラしていました。

そこで、本記事では

1. 【概念編】でなぜコンフリクトが起きるのかを理解する
2. 【実践編】で実際に手を動かしてコンフリクトを再現し、解決する。

の流れでコンフリクトを完全理解していきます。

これを読めば今後PrettierとLinterのコンフリクトでイライラすることはなくなるでしょう！ ではいってみましょう！

【概念編】なぜコンフリクトが起きるのか

コーディングルールにおける2つのカテゴリ

PrettierやESLintの話にいく前にコーディングルールの2つのカテゴリについて理解しておく必要があります。 コーディングルールはスタイルに関するルール(Stylistic Rules) と コードの品質に関するルール(Code-quality Rules) の2つのカテゴリに分けることができます。

スタイルに関するルールとは、プログラムの実行結果に直接影響しない書き方(スタイル)のルールです。 行の最大長(max-len)やスペースorタブ(no-mixed-spaces-and-tabs)などが挙げられます。

例) スペースを使うかタブを使うか

  console.log("hello")
	console.log("hello")

コードの品質に関するルールとはプログラムに直接影響し、バグを引き起こす可能性が高い書き方を取り締まるルールです。 例) ESLintの *no-implicit-globals:*

/*eslint no-implicit-globals: "error"*/
var foo = 1;
function bar() {}

Prettierの責務

この2つのコーディングルールの中で Prettierはスタイルに関するルール(Stylistic Rules)のみ を担当します。コードの品質に関するルールについてはノータッチです。