VSCode 插件 Prettier 安装、配置与使用指南_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_modulesdistbuild

三、高级配置（推荐）

为避免与 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 统一团队代码风格，减少代码审查中的格式争议，专注于代码质量本身。