ESLintとPrettierについて

ESLintとは

構文の記述間違いや決められたルールに沿ってコードが書かれているかをチェックするツールです。
ESLintを使うことで潜在的なバグを見つけることが可能です。

ESLintの設定

ESLintではルールによって「エラーにする/警告にする/offにする」というエラーレベルを個別に設定することが可能です。
ルールの設定は、.eslintrc.jsかpackage.jsonファイルで設定されています。
これは環境構築時の設定で変わります。

ESLintのフォーマット機能

ESLintはフォーマッターとしても利用することができます。
以下は、.vueファイルのscriptタグとtemplateタグのインデント設定です。
.eslintrc.js

"indent": ["error", 4],
"vue/html-indent": ["error", 4]

"indent"はscriptタグの設定で、"vue/html-indent"がtemplateタグの設定になります。

Prettierとは

フォーマッターでコードの整形のみを行ってくれるツールです。
ESLintではチェックを行ってくれましたが、こちらはフォーマットのみです。
※読み方は「プリティア」

Prettierのフォーマット設定

.prettierrcに設定を記述します。

{
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

参考サイト