前端项目vscode最优配置（vue3+ts）

一颗奇趣蛋2025-04-11 11:17

一. vscode插件

vue-offical (vue3)
prettier eslint (在项目中配置prettierrc可使多人项目有相同的格式化规则，文后附prettierrc通用配置文件)
eslint

.prettierrc 复制代码

{
  "tabWidth": 2,
  "singleQuote": true,
  "semi": false,
  "trailingComma": "es5",
  "arrowParens": "always",
  "endOfLine": "auto",
  "printWidth": 100,
  "editor.formatOnSave": true
}

二. vscode 配置

setting.json

js 复制代码

{
  "editor.fontSize": 16,
  "editor.unicodeHighlight.ambiguousCharacters": false,
  "gitlens.ai.model": "anthropic:claude-3-5-sonnet-latest",
  "files.autoSave": "afterDelay",
  "editor.formatOnSave": true,
  "workbench.colorTheme": "Monokai Dimmed",
  "prettier.printWidth": 1000,
  //配置eslint
  "eslint.validate": ["javascript", "javascriptreact", "html", "vue"],
  // "eslint.run": "onSave",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "editor.mouseWheelZoom": true,
  "editor.minimap.renderCharacters": false,
  "debug.javascript.defaultRuntimeExecutable": {
    "pwa-node": "node"
  },
  "open-in-browser.default": "{\"open-in-browser.default\":\"Chrome\"}",
  "files.associations": {
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript"
  },
  "emmet.includeLanguages": {
    "wxml": "html"
  },
  "minapp-vscode.disableAutoConfig": true,
  "[python]": {
    "editor.formatOnType": true
  },
  "editor.detectIndentation": false,
  "explorer.compactFolders": false,
  // html使用prettier格式化
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    // "editor.defaultFormatter": "Vue.volar"
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // json使用prettier格式化
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.tabSize": 2,
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "px2rem.rootFontSize": 64,
  "px2rem.autoRemovePrefixZero": false
}