Nest.js@v7 で VSCode + ESLint + Prettier による自動フォーマットが効かない & その対策

October 23, 2020

今回の問題

Nest.js@v7.0.0を卒制の企画で使おうとしたが、
インストール直後のままだとVSCode上でformatOnSaveが動かなかった(何故かは不明…)

しかもGithubのNest.jsのissue等を探してもどこにも先駆者がいなかった…

原因

.eslintrc の以下の設定とプラグイン不足(eslint-plugin-prettier)が原因っぽい

.eslintrc

"plugins": ["@typescript-eslint/eslint-plugin"],

対策

eslint-plugin-prettierのをインストールし、 .eslintrc を以下のように修正したら自動フォーマットが動いた

$ npm i eslint-config-prettier

ESLint周りの拡張機能は以下のようになる。

package.json

{
  ...
  "devDependencies": {
    ...
    "@typescript-eslint/eslint-plugin": "3.9.1",
    "@typescript-eslint/parser": "3.9.1",
    "eslint": "7.7.0",
    "eslint-config-prettier": "^6.10.0",
    "eslint-plugin-import": "^2.20.1",
    "eslint-plugin-prettier": "^3.1.4",
}

.eslintrc

{
  "root": true,
  "env": {
    "node": true,
    "es6": true,
    "jest": true
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "./tsconfig.json",
    "sourceType": "module"
  },
  "plugins": [
    "@typescript-eslint"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
    "prettier/@typescript-eslint"
  ],
  "rules": {
    "@typescript-eslint/interface-name-prefix": "off",
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/no-explicit-any": "off"
  }
}

.vscode/settings.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
  }
}