一、先安装 2 个必须包在你的项目里运行任意包管理器运行npm install -D prettier prettier-plugin-tailwindcssprettier代码格式化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 } }五、最终效果你想要的全部实现写代码时保存 → Prettier 自动格式化 Tailwind 类自动排序编译时npm run build→先格式化整个项目所有文件再编译样式冗余类排得整整齐齐多余类一眼看见团队协作所有人代码风格完全统一