🀄

[Node.js]VSCode使うときに入れておきたいsettings.json

2024/03/23に公開

はじめに

VSCode使うときに自動でフォーマッターかけたい

解決策

リポジトリのルートに.vscode/settings.jsonを用意して以下の設定を用意しておく。
最強ORMであるprismaのスキーマが修正かからないので、"[prisma]"というのを追記。

.vscode/settings.json
{
  "typescript.disableAutomaticTypeAcquisition": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[prisma]": { "editor.defaultFormatter": "Prisma.prisma" },
  "editor.codeActionsOnSave": ["source.fixAll.eslint"]
}

補足

フォーマッターの設定例

.prettierrc
{
  "semi": false,
  "singleQuote": true
}

リンターの設定例

.eslintrc.json
{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:jest/recommended",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["@typescript-eslint", "jest"],
  "rules": {
    "max-len": [
      "warn",
      {
        "code": 150
      }
    ],
    "quotes": ["warn", "single"],
    "indent": ["error", 2],
    "semi": ["error", "never", { "beforeStatementContinuationChars": "never" }],
    "semi-spacing": ["error", { "after": false, "before": false }],
    "semi-style": ["error", "first"],
    "no-extra-semi": "error",
    "no-unexpected-multiline": "error",
    "no-unreachable": "error",
    "object-curly-spacing": ["error", "always"],
    "@typescript-eslint/naming-convention": [
      "error",
      {
        "selector": "class",
        "format": ["PascalCase"]
      },
      // {
      //   "selector": "property",
      //   "format": ["camelCase"]
      // },
      {
        "selector": "method",
        "format": ["camelCase"]
      },
      {
        "selector": "function",
        "format": ["camelCase"]
      },
      {
        "selector": "interface",
        "format": ["PascalCase"]
      },
      {
        "selector": "enum",
        "format": ["PascalCase"]
      },
      {
        "selector": "enumMember",
        "format": ["UPPER_CASE"]
      }
    ]
  }
}

Discussion