prettier代码格式化

一、先安装 2 个必须包

在你的项目里运行（任意包管理器）：

运行

npm install -D prettier prettier-plugin-tailwindcss

• prettier：代码格式化
• prettier-plugin-tailwindcss：官方推荐，比 Headwind 更稳的 Tailwind 类排序

二、创建 2 个配置文件（直接复制）

1..prettierrc（格式化规则）

在项目根目录新建：

{ "semi": false, "singleQuote": true, "tabWidth": 2, "printWidth": 100, "trailingComma": "es5", "plugins": ["prettier-plugin-tailwindcss"] }

2..prettierignore（不需要格式化的文件）

/node_modules /dist /build .DS_Store *.log

三、添加格式化命令（编译时自动格式化）

打开package.json，添加脚本：

"scripts": { "format": "prettier --write .", "build": "npm run format && 你的原来编译命令" }

✅以后你运行编译时：

运行

npm run build

会先自动格式化整个项目所有代码→ 再编译！

四、VS Code 自动格式化（保存就格式化）

打开 VS Code 设置settings.json：

{ // 默认格式化工具 = Prettier "editor.defaultFormatter": "esbenp.prettier-vscode", // 保存时自动格式化 "editor.formatOnSave": true, // 自动格式化全部类型文件 "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } }

五、最终效果（你想要的全部实现）

1. 写代码时：保存 → Prettier 自动格式化 + Tailwind 类自动排序
2. 编译时：npm run build→先格式化整个项目所有文件，再编译
3. 样式冗余：类排得整整齐齐，多余类一眼看见
4. 团队协作：所有人代码风格完全统一