Vue3 前端专属配置（VSCode settings.json + .prettierrc）

直接复制即用，完美适配 Vue3 + Vite + JavaScript/TypeScript 项目，解决格式化冲突、缩进、引号、换行等所有问题。

一、先确认你已安装这2个插件

打开 VSCode 扩展面板 Ctrl+Shift+X，安装：

Vue Language Features (Volar) → Vue3 官方必备插件
Prettier - Code formatter → 代码格式化核心插件

二、VSCode settings.json 配置（Vue3专用）

打开方式：

Ctrl+Shift+P → 输入 Open Settings (JSON) → 回车，全选替换下面代码：

json 复制代码

{
  // ==================== Vue3 核心格式化配置 ====================
  // 默认格式化工具 = Prettier
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // 保存文件时自动格式化（最实用）
  "editor.formatOnSave": true,
  // 粘贴代码自动格式化
  "editor.formatOnPaste": true,
  // 选中代码可手动格式化
  "editor.formatOnSelection": true,
  // 自动修复ESLint错误（配合格式化）
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

  // ==================== 分语言指定格式化器 ====================
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  // ==================== Vue3 语法优化 ====================
  // Volar 插件格式化支持
  "vue.autoInsertParentheses": true,
  // 关闭VSCode自带的格式化冲突
  "javascript.format.enable": false,
  "typescript.format.enable": false,
  // 缩进统一为2个空格（Vue3标准）
  "editor.tabSize": 2,
  "editor.insertSpaces": true
}

三、.prettierrc 配置文件（Vue3 团队标准）

使用方式：

在你的Vue3项目根目录 ，新建一个文件，命名为 .prettierrc，复制以下内容：

json 复制代码

{
  "printWidth": 120,            // 一行最大字符数（Vue3推荐）
  "tabWidth": 2,                // 缩进2空格（强制标准）
  "useTabs": false,             // 禁用Tab，用空格缩进
  "semi": true,                 // 语句末尾加分号
  "singleQuote": true,          // 使用单引号（Vue3标准）
  "quoteProps": "as-needed",    // 对象属性仅必要时加引号
  "jsxSingleQuote": true,       // JSX使用单引号
  "trailingComma": "es5",       // 末尾逗号（数组/对象保留）
  "bracketSpacing": true,      // 对象大括号内保留空格 { name: xxx }
  "bracketSameLine": false,    // HTML标签反尖括号单独一行（Vue标准）
  "arrowParens": "avoid",      // 箭头函数单参数省略括号
  "endOfLine": "lf",           // 换行符统一为LF（避免Windows/Mac冲突）
  "htmlWhitespaceSensitivity": "css" // HTML空格敏感度（不破坏布局）
}

四、格式化快捷键（Vue3 一键格式化）

格式化整个文件 ：Shift + Alt + F（Windows）/ Shift + Option + F（Mac）
自动格式化 ：直接按 Ctrl + S 保存文件，自动格式化代码
格式化选中代码 ：选中代码 → 按 Shift + Alt + F

五、额外优化（可选，解决ESLint冲突）

如果你的Vue3项目用了 ESLint，执行这行命令安装兼容包：

bash 复制代码

npm install eslint-config-prettier eslint-plugin-prettier -D

然后在 .eslintrc.cjs 中添加：

js 复制代码

module.exports = {
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    'plugin:prettier/recommended' // 关键：Prettier+ESLint兼容
  ]
}

总结

复制 settings.json → 配置VSCode格式化行为
项目根目录新建 .prettierrc → 统一Vue3代码风格
保存文件自动格式化，快捷键一键格式化
完美支持 Vue3 <script setup> 语法、CSS/Scss、TS/JS