VSCode 插件 Prettier 安装、配置与使用指南

VSCode 插件 Prettier 安装、配置与使用指南

Prettier 是一款强大的代码格式化工具，能够帮助开发者自动统一代码风格，提升代码可读性与团队协作效率。以下是在 VSCode 中安装、配置和使用 Prettier 的详细步骤：v

一、安装 Prettier 插件

1. 打开 VSCode，点击左侧活动栏中的「扩展」图标（或按 Ctrl+Shift+X）
2. 搜索 "Prettier - Code formatter"
3. 选择由 Prettier 官方发布的插件（作者：Prettier），点击「安装」
4. 安装完成后，重启 VSCode 使插件生效

二、基础配置方法

Prettier 支持多种配置方式，推荐通过配置文件统一团队代码风格：

1. 创建配置文件

在项目根目录下创建 .prettierrc.json（JSON 格式）或 .prettierrc.js（JavaScript 格式），例如：

// prettier的默认配置文件
module.exports = {
  // 一行最多 100 字符
  printWidth: 100,
  // 使用 2 个空格缩进
  tabWidth: 2,
  // 不使用缩进符，而使用空格
  useTabs: false,
  // 不尾随分号
  semi: false,
  // 使用单引号
  singleQuote: true,
  // 多行逗号分割的语法中，最后一行不加逗号
  trailingComma: 'none',
  // 单个参数的箭头函数不加括号 x => x
  arrowParens: 'avoid',
  // 对象大括号内两边是否加空格 { a:0 }
  bracketSpacing: true,
  //去除多余空行的设置
  htmlWhitespaceSensitivity: 'ignore'
}

2. 忽略特定文件

创建 .prettierignore 文件，指定不需要格式化的文件或目录：

# .prettierignore 示例
node_modules
dist
build

三、高级配置（推荐）

为避免与 ESLint 等工具冲突，建议结合项目已有规则进行配置：

1. 集成 ESLint 规则

安装 eslint-config-prettier 禁用 ESLint 中与 Prettier 冲突的规则：

npm install --save-dev eslint-config-prettier

 在 .eslintrc.json 中添加：

{
  "extends": ["prettier"] // 确保 "prettier" 是最后一个扩展
}

2. VSCode 工作区配置

在项目根目录下创建 .vscode/settings.json，确保团队成员使用统一的格式化规则：

{
  "editor.defaultFormatter": "esbenp.prettier-vscode", // 设置默认格式化工具
  "editor.formatOnSave": true,                         // 保存时自动格式化
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,                      // 保存时自动修复 ESLint 问题
    "source.organizeImports": true                     // 保存时自动整理导入语句
  },
  "prettier.configPath": ".prettierrc.json"            // 指定 Prettier 配置文件路径
}

四、使用方法

Prettier 支持多种触发格式化的方式：

1. 手动格式化

• 选择代码片段后按 Alt+Shift+F（Windows/Linux）或 Option+Shift+F（Mac）
• 右键点击编辑器，选择「格式化文档」或「格式化所选内容」

2. 保存时自动格式化

启用 editor.formatOnSave 后，每次保存文件时会自动应用 Prettier 格式化

3. 命令面板

按 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（Mac）打开命令面板，输入：

• Format Document with...：选择 Prettier 作为格式化工具
• Format Document：直接使用默认格式化工具

五、常见问题与解决方案

1. Prettier 与 ESLint 规则冲突
   → 安装 eslint-config-prettier 并在 ESLint 配置中禁用冲突规则

2. 仅对特定语言启用 Prettier
   → 在 settings.json 中配置：

   "[javascript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[typescript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   }

3. 格式化后代码未生效
   → 检查：

   • 是否正确设置了默认格式化工具
   • 是否存在多个格式化插件冲突
   • 配置文件路径是否正确

六、推荐资源

• Prettier 官方文档
• VSCode Prettier 插件文档
• Prettier 配置选项参考

通过以上步骤，你可以在 VSCode 中高效使用 Prettier 统一团队代码风格，减少代码审查中的格式争议，专注于代码质量本身。