1. 为什么需要代码自动格式化作为一个写了十几年代码的老司机我见过太多因为代码风格不统一导致的团队协作问题。想象一下这样的场景你接手一个项目发现有的代码缩进是2个空格有的是4个空格有的用单引号有的用双引号大括号的位置更是五花八门。这种代码就像是用不同方言写的文章读起来特别费劲。Prettier这个工具就是为了解决这个问题而生的。它不像ESLint那样会检查代码质量而是专注于一件事把代码格式化成统一的风格。我在多个项目中实践下来发现它最大的价值就是让团队不再为代码风格争论把精力集中在真正的业务逻辑上。2. 安装Prettier插件2.1 插件安装步骤首先打开VS Code点击左侧活动栏的扩展图标或者直接按CtrlShiftX在搜索框输入Prettier - Code formatter。认准这个由Prettier官方发布的插件安装量已经超过2000万非常可靠。安装完成后你会在右下角看到Prettier的图标。如果项目里已经有.prettierrc配置文件这里会显示当前使用的配置。我建议在团队项目中统一配置这个文件这样所有人的格式化规则都是一致的。2.2 验证安装为了确认插件安装成功可以随便打开一个JS文件右键选择格式化文档然后在弹出的选项中选择Prettier - Code formatter。如果代码的格式发生了变化说明插件工作正常。我在第一次使用时发现有些文件没反应后来才知道是因为文件类型没被识别需要在设置中额外配置。3. 配置保存时自动格式化3.1 基础设置真正提升效率的秘诀是配置保存时自动格式化。打开VS Code设置Ctrl,在搜索框输入format on save勾选Editor: Format On Save选项。这个功能实测下来非常稳每次保存文件时都会自动格式化。但这里有个坑要注意如果你同时安装了多个格式化插件需要先设置Prettier为默认格式化工具。搜索default formatter找到Editor: Default Formatter选择Prettier - Code formatter。我遇到过因为没设置这项导致格式化失效的情况。3.2 高级配置对于有特殊需求的场景可以在项目根目录创建.vscode/settings.json文件加入以下配置{ editor.defaultFormatter: esbenp.prettier-vscode, editor.formatOnSave: true, editor.formatOnSaveMode: file, [javascript]: { editor.defaultFormatter: esbenp.prettier-vscode } }这样配置有几个好处确保项目所有成员使用相同的VS Code设置可以针对不同文件类型设置不同的格式化规则避免了全局设置可能带来的冲突4. Prettier配置详解4.1 常用配置项在项目根目录创建.prettierrc文件可以自定义格式化规则。这是我常用的配置{ printWidth: 80, tabWidth: 2, useTabs: false, semi: true, singleQuote: true, trailingComma: es5, bracketSpacing: true, arrowParens: always }这些配置项的含义printWidth每行代码的最大长度tabWidth缩进空格数useTabs是否使用tab缩进semi语句末尾是否加分号singleQuote是否使用单引号trailingComma对象和数组最后一个元素是否加逗号4.2 忽略特定文件有些文件我们不想被格式化比如压缩过的JS文件或者自动生成的代码。这时可以创建.prettierignore文件语法和.gitignore类似/dist/* /build/* *.min.js我在一个老项目中就遇到过问题Prettier格式化了第三方库的压缩文件导致代码无法运行。加上ignore配置后就解决了。5. 常见问题排查5.1 格式化不生效如果保存时没有自动格式化首先检查以下几点确认Prettier插件已安装并启用检查formatOnSave是否已勾选查看Default Formatter是否设置为Prettier尝试重启VS Code有时候插件会莫名其妙失效重启编辑器是最快的解决方法。我在Windows和Mac上都遇到过这种情况。5.2 与其他工具的冲突当项目中同时使用ESLint和Prettier时可能会出现规则冲突。解决方法是通过eslint-config-prettier禁用ESLint中与Prettier冲突的规则npm install --save-dev eslint-config-prettier然后在.eslintrc.js中扩展配置module.exports { extends: [some-other-config, prettier] }5.3 文件类型支持Prettier默认支持多种文件类型包括JavaScript、TypeScript、CSS、SCSS、JSON等。但对于Vue文件需要额外安装vetur插件并在设置中配置{ vetur.format.defaultFormatter.html: prettier, vetur.format.defaultFormatter.js: prettier, vetur.format.defaultFormatter.css: prettier }6. 团队协作最佳实践6.1 统一团队配置为了确保团队成员使用相同的格式化规则我建议将.prettierrc和.vscode/settings.json提交到代码仓库在项目README中说明Prettier的使用方法在CI/CD流程中加入格式检查我们团队在项目初始化时会运行以下命令npx prettier --write .这会对所有支持的文件进行一次全局格式化确保代码库风格一致。6.2 与Git集成可以在pre-commit钩子中运行Prettier确保提交的代码都是格式化过的。使用husky和lint-staged可以轻松实现npm install --save-dev husky lint-staged然后在package.json中添加{ husky: { hooks: { pre-commit: lint-staged } }, lint-staged: { *.{js,jsx,ts,tsx,json,css,scss,md}: [ prettier --write ] } }7. 性能优化建议7.1 排除大文件对于大型项目Prettier格式化可能会有点慢。可以通过.prettierignore排除不需要格式化的文件比如*.min.js *.bundle.js /assets/7.2 增量格式化VS Code默认会在保存时格式化整个文件。如果文件很大可以尝试设置{ editor.formatOnSaveMode: modifications }这样只会格式化修改过的部分速度会快很多。不过这个功能还在实验阶段可能不太稳定。7.3 选择性启用对于特别大的项目可以考虑只在特定文件类型上启用自动格式化。比如{ [javascript]: { editor.formatOnSave: true }, [typescript]: { editor.formatOnSave: true }, editor.formatOnSave: false }这样只有JS和TS文件会触发自动格式化其他文件类型不受影响。
VS Code配置Prettier实现保存时一键美化代码
1. 为什么需要代码自动格式化作为一个写了十几年代码的老司机我见过太多因为代码风格不统一导致的团队协作问题。想象一下这样的场景你接手一个项目发现有的代码缩进是2个空格有的是4个空格有的用单引号有的用双引号大括号的位置更是五花八门。这种代码就像是用不同方言写的文章读起来特别费劲。Prettier这个工具就是为了解决这个问题而生的。它不像ESLint那样会检查代码质量而是专注于一件事把代码格式化成统一的风格。我在多个项目中实践下来发现它最大的价值就是让团队不再为代码风格争论把精力集中在真正的业务逻辑上。2. 安装Prettier插件2.1 插件安装步骤首先打开VS Code点击左侧活动栏的扩展图标或者直接按CtrlShiftX在搜索框输入Prettier - Code formatter。认准这个由Prettier官方发布的插件安装量已经超过2000万非常可靠。安装完成后你会在右下角看到Prettier的图标。如果项目里已经有.prettierrc配置文件这里会显示当前使用的配置。我建议在团队项目中统一配置这个文件这样所有人的格式化规则都是一致的。2.2 验证安装为了确认插件安装成功可以随便打开一个JS文件右键选择格式化文档然后在弹出的选项中选择Prettier - Code formatter。如果代码的格式发生了变化说明插件工作正常。我在第一次使用时发现有些文件没反应后来才知道是因为文件类型没被识别需要在设置中额外配置。3. 配置保存时自动格式化3.1 基础设置真正提升效率的秘诀是配置保存时自动格式化。打开VS Code设置Ctrl,在搜索框输入format on save勾选Editor: Format On Save选项。这个功能实测下来非常稳每次保存文件时都会自动格式化。但这里有个坑要注意如果你同时安装了多个格式化插件需要先设置Prettier为默认格式化工具。搜索default formatter找到Editor: Default Formatter选择Prettier - Code formatter。我遇到过因为没设置这项导致格式化失效的情况。3.2 高级配置对于有特殊需求的场景可以在项目根目录创建.vscode/settings.json文件加入以下配置{ editor.defaultFormatter: esbenp.prettier-vscode, editor.formatOnSave: true, editor.formatOnSaveMode: file, [javascript]: { editor.defaultFormatter: esbenp.prettier-vscode } }这样配置有几个好处确保项目所有成员使用相同的VS Code设置可以针对不同文件类型设置不同的格式化规则避免了全局设置可能带来的冲突4. Prettier配置详解4.1 常用配置项在项目根目录创建.prettierrc文件可以自定义格式化规则。这是我常用的配置{ printWidth: 80, tabWidth: 2, useTabs: false, semi: true, singleQuote: true, trailingComma: es5, bracketSpacing: true, arrowParens: always }这些配置项的含义printWidth每行代码的最大长度tabWidth缩进空格数useTabs是否使用tab缩进semi语句末尾是否加分号singleQuote是否使用单引号trailingComma对象和数组最后一个元素是否加逗号4.2 忽略特定文件有些文件我们不想被格式化比如压缩过的JS文件或者自动生成的代码。这时可以创建.prettierignore文件语法和.gitignore类似/dist/* /build/* *.min.js我在一个老项目中就遇到过问题Prettier格式化了第三方库的压缩文件导致代码无法运行。加上ignore配置后就解决了。5. 常见问题排查5.1 格式化不生效如果保存时没有自动格式化首先检查以下几点确认Prettier插件已安装并启用检查formatOnSave是否已勾选查看Default Formatter是否设置为Prettier尝试重启VS Code有时候插件会莫名其妙失效重启编辑器是最快的解决方法。我在Windows和Mac上都遇到过这种情况。5.2 与其他工具的冲突当项目中同时使用ESLint和Prettier时可能会出现规则冲突。解决方法是通过eslint-config-prettier禁用ESLint中与Prettier冲突的规则npm install --save-dev eslint-config-prettier然后在.eslintrc.js中扩展配置module.exports { extends: [some-other-config, prettier] }5.3 文件类型支持Prettier默认支持多种文件类型包括JavaScript、TypeScript、CSS、SCSS、JSON等。但对于Vue文件需要额外安装vetur插件并在设置中配置{ vetur.format.defaultFormatter.html: prettier, vetur.format.defaultFormatter.js: prettier, vetur.format.defaultFormatter.css: prettier }6. 团队协作最佳实践6.1 统一团队配置为了确保团队成员使用相同的格式化规则我建议将.prettierrc和.vscode/settings.json提交到代码仓库在项目README中说明Prettier的使用方法在CI/CD流程中加入格式检查我们团队在项目初始化时会运行以下命令npx prettier --write .这会对所有支持的文件进行一次全局格式化确保代码库风格一致。6.2 与Git集成可以在pre-commit钩子中运行Prettier确保提交的代码都是格式化过的。使用husky和lint-staged可以轻松实现npm install --save-dev husky lint-staged然后在package.json中添加{ husky: { hooks: { pre-commit: lint-staged } }, lint-staged: { *.{js,jsx,ts,tsx,json,css,scss,md}: [ prettier --write ] } }7. 性能优化建议7.1 排除大文件对于大型项目Prettier格式化可能会有点慢。可以通过.prettierignore排除不需要格式化的文件比如*.min.js *.bundle.js /assets/7.2 增量格式化VS Code默认会在保存时格式化整个文件。如果文件很大可以尝试设置{ editor.formatOnSaveMode: modifications }这样只会格式化修改过的部分速度会快很多。不过这个功能还在实验阶段可能不太稳定。7.3 选择性启用对于特别大的项目可以考虑只在特定文件类型上启用自动格式化。比如{ [javascript]: { editor.formatOnSave: true }, [typescript]: { editor.formatOnSave: true }, editor.formatOnSave: false }这样只有JS和TS文件会触发自动格式化其他文件类型不受影响。
