More than 3 years have passed since last update.

Prettier(フォーマッタ) => ESLint(静的解析)の設定

Last updated at 2020-11-23Posted at 2020-11-23

これはなに

タイトルの内容についての2020年11月23日時点でのメモ。

やること

プロジェクトのディレクトリにてCLIで

$ npm init -y //package.json
$ npm install -D prettier eslint eslint-config-prettier

次に、./node_modules/.binのPATHを通す

PATHを通したら、

$ code -r .eslintrc.json .prettierrc

.eslintrc.jsonは以下のようにする（ミニマルな形）

.eslintrc.json

{
  "env": {
    "es6": true
  },
  "extends": ["prettier"]
}

注意として、extendsの配列に"eslint:recommended"を入れると失敗しました

.prettierrcは以下のようにする（わたしのばあい）

ESLintはフォーマッタとして使用しないので、このファイルに細かいルールを書いていく

ちなみにtabwidthはデフォルトで2なので書かなくてもいい

.prettierrc

{
    "tabWidth": 2,
    "singleQuote": true
}

最後に、settings.jsonに以下を追加

settings.json

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

ここまでやって、

VSCodeの右下にあるESLintとPrettierにチェックがついて、ファイルを保存したときに両方行われていればOK.

参考

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up