rinoguchiフロントエンドのアプリケーションを構築していて、リンターとフォーマッターをどのように設定するのがベストなのか自分なりに調査しました。結論まず最初に、自分がベストだと思う設定方針を書いておきます。はいらない子なのでは?という疑問を誰もが持ったことがあると思います。自分もよく分かってませんでしたので、公式サイトや人気記事にどう書いてあるのかを調べました。併用について記載がありました。https://prettier.io/docs/en/comparison.htmlhttps://prettier.io/docs/en/integrating-with-linters.html要約すると以下のようなことが書いてあります。側としては、立場上当然かもしれませんが、併用を推奨しているようです。併用について記載がありました。https://github.com/eslint/eslint#frequently-asked-questions要約すると以下のようなことが書いてあります。立場としては、併用してもしなくてもいいよ、という感じのようです。分かりやすくまとめていただいてました。以下のようなことが書かれています。いろんな形式のファイルを勝手に良い感じにフォーマットしてくれる点を便利に感じていたので、納得です。併用する方がより良い」ということになりそうです。ついての言及があります。https://prettier.io/docs/en/editors.html要約すると以下のようなことが書いてあります。併用を推奨しているように受け取れます。フォーマットを推奨してるみたいです。併用したほうがよい」ということで問題なさそうです。併用時の競合ルールリンターとフォーマッターを併用する場合、競合するルールの管理が問題になります。両方に全く同じ設定を入れる、という方法もありますが、ダブルメンテになるし、メンテ忘れなどもリスクもあります。Stylelint)側で無効にすることが推奨されてます。https://prettier.io/docs/en/integrating-with-linters.html具体的な設定方法は後述しますが、eslint-config-prettierやstylelint-config-prettierを導入するだけです。フォーマット可能なルールについて確認してみました。なんとなく全体像が把握できた気がしてきます。確認できる設定方法ここからは具体的な設定方法を記載しようと思います。設定は一通り終わりです。実行して意図通り動いていれば設定終了です。「モジュールのインポート形式」「VueやReactを使うか」「TypeScriptを使うか」「コードスタイルに何を使うか」「設定ファイルの形式」など、質問に答えていくと、設定ファイル(.eslintrc.yml)が作成されます。自分の場合は以下のようになりました。設定は一通り終わりです。実行して意図通り動いていれば設定終了です。追加する場合、競合するルールを確認したくなると思います。その場合は、以下のコマンドで確認できます。設定は一通り終わりです。実行して意図通り動いていれば設定終了です。リンターとフォーマッターを実行できるようになりました。上でリントエラーを確認したり、ファイル保存時に自動フォーマットされるようにしたいと思います。拡張をインストールします。formatterESLintStylelintこれらをインストールするだけで、設定ファイルに従ってリントエラーがエディタ上で確認できるようになります。保存時に自動フォーマットされるように、VSCodeの設定ファイル(.vscode/settings.json)を作成します。}}これで設定完了です。リンターに怒られるようなコードを書いて、保存してフォーマットされているかどうか試してみてください。使ってコミット時にリンターを実行したいのですが、記事のボリュームが大きくなりすぎたので、別記事にしました。ツールで違うのでシェルスクリプトだけ軽く紹介しておきます。コマンドラインで簡単に実行できるように、リントコマンドをpackage.jsonにスクリプトとして定義します。ツールのシェルスクリプトで呼び出すだけです。フォーマットの定義はしていませんが、参考までに載せてあります。参考までですが、昔の記事とかを見ると出てくる、現在は非推奨になったライブラリたちを紹介しておきます。使わないように気をつけましょう。--fix実行時に、prettierを実行するプラグイン。現在は非推奨stylelint-prettierstyleint実行時にprettierを実行するものだが、現在は非推奨https://prettier.io/docs/en/integrating-with-linters.html#notes最後にちょっと長くなりましたが、フロントエンドのアプリケーションでの、リンターとフォーマッターの併用について設定方針および設定方法がある程度理解できたと思います。今後はこの方針に従って各リポジトリの初期設定をやっていこうと思います。