Vue3 前端开发配置：VSCode settings.json 与 .prettierrc 设置

一、前置插件安装

打开 VSCode 扩展面板 Ctrl+Shift+X，安装以下插件：

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

---

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

打开方式

Ctrl+Shift+P → 输入 Open Settings (JSON) → 回车，替换以下内容：

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.formatOnSelection": true,
  "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" },
  "vue.autoInsertParentheses": true,
  "javascript.format.enable": false,
  "typescript.format.enable": false,
  "editor.tabSize": 2,
  "editor.insertSpaces": true
}

---

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

使用方式

在 Vue3 项目根目录新建文件 .prettierrc，内容如下：

{
  "printWidth": 120,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "jsxSingleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "bracketSameLine": false,
  "arrowParens": "avoid",
  "endOfLine": "lf",
  "htmlWhitespaceSensitivity": "css"
}

---

四、格式化快捷键

1. 格式化整个文件：Shift + Alt + F（Windows）/ Shift + Option + F（Mac）
2. 自动格式化：保存文件时自动执行
3. 格式化选中代码：选中代码后按 Shift + Alt + F

---

五、ESLint 兼容性优化（可选）

若项目使用 ESLint，请安装兼容包：

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

在 .eslintrc.cjs 中添加：

module.exports = {
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    'plugin:prettier/recommended'
  ]
};

---

总结

1. 配置 settings.json 设定 VSCode 格式化行为
2. 创建 .prettierrc 统一代码风格
3. 启用保存自动格式化
4. 支持 Vue3 <script setup> 语法及多语言混合编写