vscode中设置保存代码后自动格式化

前端卿年
4,652 阅读3分钟

VSCode 代码格式化配置指南

配置步骤

步骤 1：安装 Prettier 扩展

在 VSCode 扩展市场搜索并安装 Prettier - Code formatter 扩展。

安装方法：

  1. 打开 VSCode
  2. 按 Ctrl+Shift+X 打开扩展面板
  3. 搜索 "Prettier - Code formatter"
  4. 点击 "安装" 按钮

💡 提示：确保安装的是官方版本，发布者为 Prettier

image.png

步骤 2：创建项目级 Prettier 配置

2.1 创建配置文件

在项目根目录创建 .prettierrc.cjs 文件：


    module.exports = {
      printWidth: 120, // 每行代码最大长度
      tabWidth: 2, //一个tab代表几个空格数，默认为80
      useTabs: false, //是否使用tab进行缩进，默认为false，表示用空格进行缩减
      semi: true, // 声明后带分号
      vueIndentStyle: true, //启用 Vue 缩进风格
      singleQuote: false, // 使用单引号
      jsxSingleQuote: false, // 使用单引号
      jsxBracketSameLine: true, // 启用jsx语法，> 放在末尾
      trailingComma: 'all',
      htmlWhitespaceSensitivity: 'strict', // 对 HTML 空白字符敏感
      endOfLine: 'auto', // 在行尾自动添加分号
    };
2.2 创建忽略文件（可选）

创建 .prettierignore 文件，排除不需要格式化的文件：

# .prettierignore

# 构建产物
dist/
build/
unpackage/

# 依赖
node_modules/

# 配置文件
*.config.js
*.config.ts
manifest.json
pages.json

# 静态资源
*.png
*.jpg
*.jpeg
*.gif
*.svg
*.ico
*.woff
*.woff2
*.ttf
*.eot

# 文档
*.md
*.txt

# 其他
.DS_Store
Thumbs.db

步骤 3：配置 VSCode 默认格式化程序

3.1 通过右键菜单设置
  1. 在任意 .vue 文件中点击鼠标右键
  2. 选择 "使用...格式化文档"
  3. 点击 "配置默认格式化程序..."
  4. 选择 "Prettier - Code formatter"
3.2 通过快捷键验证

按 Shift+Alt+F 测试格式化功能是否正常工作。

image.png

image.png

image.png

步骤 4：配置保存时自动格式化

4.1 创建工作区配置

在项目根目录创建 .vscode 文件夹，然后创建 settings.json 文件：


    {
      "editor.formatOnSave": true, //保存时自动格式化
    }
4.2 针对成熟项目的建议

⚠️ 重要提醒：由于项目已处于成熟阶段，为避免每次保存文件时自动格式化带来的大量代码变更，建议：

  1. 先进行全局格式化：对整个项目进行一次性格式化
  2. 团队协商：与团队成员协商是否启用保存时自动格式化
  3. 渐进式启用：可以先在新文件中使用，逐步推广到整个项目

步骤 5：项目全局格式化

5.1 安装项目依赖
# 使用 pnpm（推荐，与项目技术栈一致）
pnpm add -D prettier

# 或使用 npm
npm install prettier --save-dev
5.2 执行全局格式化
# 格式化所有支持的文件
npx prettier --write .

# 仅格式化 src 目录
npx prettier --write "src/**/*.{js,ts,vue,json,css,scss}"

# 检查文件是否符合格式化规范（不实际修改文件）
npx prettier --check .
5.3 添加 package.json 脚本

在 package.json 中添加格式化脚本：

{
  "scripts": {
    "format": "prettier --write .",
    "format:check": "prettier --check .",
    "format:src": "prettier --write \"src/**/*.{js,ts,vue,json,css,scss}\""
  }
}

📋 最佳实践

  1. 团队规范统一：

    • 所有团队成员使用相同的 Prettier 配置
    • 定期同步配置文件更新

  2. 配置文件管理：

    • 将 .prettierrc.cjs 和 .vscode/settings.json 纳入版本控制
    • 使用 .prettierignore 排除不需要格式化的文件

  3. 渐进式采用：

    • 新功能模块优先使用格式化
    • 重构现有代码时同步应用格式化
    • 避免一次性格式化整个项目导致的合并冲突

  4. 编辑器配置：

    • 配置编辑器显示空白字符，便于检查格式
    • 设置合适的行长度标尺线（120 字符）

常见问题排查

Q1: 格式化不生效

解决方案：

  • 检查是否安装了 Prettier 扩展
  • 确认 .prettierrc.cjs 文件语法正确
  • 验证文件类型是否在支持列表中

Q2: 与 ESLint 冲突

解决方案：

  • 安装 eslint-config-prettier 禁用 ESLint 的格式化规则
  • 配置 ESLint 仅负责代码质量检查

Q3: uni-app 特殊文件格式化异常

解决方案：

  • 在 .prettierrc.cjs 中添加 uni-app 特殊文件的解析器配置
  • 对于 .nvue 文件使用 vue 解析器

Q4: 保存时格式化过慢

解决方案：

  • 使用 .prettierignore 排除大文件和不必要的文件
  • 考虑仅对修改的文件进行格式化
avatar
文章
阅读
粉丝