Vue3 前端开发配置指南：VSCode settings.json 与 Prettier

本文提供 Vue3 + Vite + JavaScript/TypeScript 项目的 VSCode 环境配置方案，解决格式化冲突、缩进、引号及换行等问题。

一、安装必要插件

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

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

二、VSCode settings.json 配置

打开方式

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

{
  "// ==================== Vue3 核心格式化配置 ====================",
  "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" },
  "// ==================== Vue3 语法优化 ====================",
  "vue.autoInsertParentheses": true,
  "javascript.format.enable": false,
  "typescript.format.enable": false,
  "editor.tabSize": 2,
  "editor.insertSpaces": true
}

三、.prettierrc 配置文件

在 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. 保存文件即自动格式化，支持 <script setup> 语法及 CSS/Scss、TS/JS。