VSCode + Prettier 配置全攻略：让你的微信小程序开发体验提升一个档次
VSCode + Prettier 深度配置指南：打造极致微信小程序开发体验
微信小程序开发中，代码格式混乱、团队协作风格不统一是常见痛点。今天我们不谈基础配置，而是从工程化角度出发，分享一套经过实战验证的Prettier深度集成方案，覆盖从基础格式化到WXML/WXSS适配的全流程优化。
1. 环境准备与核心插件配置
在开始之前，确保你的VSCode已安装以下扩展：
- Prettier - Code formatter（官方插件）
- Volar（增强Vue/WXML支持）
- WXML - Language Services（微信官方语法支持）
小技巧：通过快捷键Ctrl+Shift+X（Windows）或Cmd+Shift+X（Mac）快速打开扩展商店。
// 推荐的基础settings.json配置 { "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true, "editor.tabSize": 2, "files.autoSave": "afterDelay", "files.autoSaveDelay": 1000 }注意：全局配置建议放在用户级settings.json中，而项目特定规则应使用.prettierrc文件
2. 多层级配置策略解析
2.1 配置文件优先级实战
微信小程序项目通常会遇到三类配置冲突：
- VSCode用户设置（全局）
- 项目级.prettierrc
- 编辑器工作区设置
通过这个实验可以验证优先级：
# 在项目根目录创建测试文件 echo '{"semi": false}' > .prettierrc echo 'console.log("hello");' > test.js观察格式化后分号是否保留。正确的优先级顺序应该是：
- 项目级.prettierrc
- 工作区.vscode/settings.json
- 用户settings.json
2.2 智能覆盖规则配置
针对微信小程序特有的文件类型，需要特殊处理：
// .prettierrc 完整配置示例 { "printWidth": 100, "tabWidth": 2, "singleQuote": true, "overrides": [ { "files": "*.wxml", "options": { "parser": "html", "printWidth": 120 } }, { "files": "*.wxss", "options": { "parser": "css" } } ] }实际案例：某电商小程序项目通过这套配置：
- WXML文件放宽行宽限制（120字符）
- JS文件保持严格规范（100字符）
- 所有文件统一使用单引号
3. 高级定制与疑难解决
3.1 保存时自动格式化的陷阱
虽然editor.formatOnSave很方便，但可能遇到这些问题：
- 与ESLint规则冲突
- 某些文件意外被格式化
- 格式化性能影响保存速度
解决方案：
{ "[javascript]": { "editor.formatOnSave": true }, "[wxml]": { "editor.formatOnSave": false }, "prettier.disableLanguages": ["wxml", "plaintext"] }3.2 团队协作配置方案
推荐两种团队共享配置的方式：
方案A：配置共享包
- 创建
@team/prettier-confignpm包 - 包含基础.prettierrc配置
- 项目通过
"prettier": "@team/prettier-config"引用
方案B：模板仓库
# 初始化项目时自动复制配置 npx degit team/repo-template my-project4. 性能优化与进阶技巧
4.1 选择性格式化策略
对于大型项目，全量格式化可能很耗时。可以通过.prettierignore文件排除不需要格式化的目录：
# .prettierignore /dist/ /node_modules/ /miniprogram_npm/4.2 与Git工作流集成
在pre-commit钩子中自动格式化：
# 安装husky和lint-staged npm install husky lint-staged --save-dev # package.json配置 { "husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "*.{js,json,wxml,wxss}": [ "prettier --write", "git add" ] } }4.3 自定义解析器开发
对于特殊需求，可以开发自定义解析器：
// prettier-plugin-wxml.js module.exports = { parsers: { "wxml": { parse: text => myWxmlParser(text), astFormat: "wxml-ast" } } }在配置中引用：
{ "plugins": ["./prettier-plugin-wxml.js"] }这套配置体系已在多个日活百万级的小程序项目中验证，能显著提升开发效率和代码一致性。关键在于根据团队实际需求灵活调整，而非盲目套用默认配置。