Vue3 前端开发环境配置：VSCode 与 Prettier 设置

三、.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. 自动格式化：直接按 Ctrl + S 保存文件
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. 保存文件时自动格式化，支持 Vue3 <script setup> 语法。