VSCodeで自動保存時にESLint + Prettierを実行する

必要なパッケージをインストール

bash

$ yarn add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint typescript eslint-config-prettier
# move to project root directory, then

eslintの設定ファイルを作成する

$ touch eslintrc.cjs

eslintの設定ファイルを編集する

eslintrc.cjs

/* eslint-env node */
module.exports = {
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier",
  ],
  parser: "@typescript-eslint/parser",
  plugins: ["@typescript-eslint"],
  root: true,
}

VSCodeで保存時にEslintをPrettierを実行する設定

Prettierとeslintの拡張機能をインストールする

setting.jsonを編集する

setting.json

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

参考

https://typescript-eslint.io/getting-started

https://prettier.io/docs/en/integrating-with-linters.html

https://github.com/prettier/eslint-config-prettier