下面是为 Vue3 + TypeScript + Vite 项目单独配置 Prettier 的详细步骤(不包含 ESLint 配置):
1. 安装 Prettier
bash
npm install --save-dev prettier
2. 创建 Prettier 配置文件
在项目根目录下创建 .prettierrc.js
(或 .prettierrc.json
):
javascript
module.exports = {
// 单引号
singleQuote: true,
// 句尾不使用分号
semi: false,
// 每行代码最大长度
printWidth: 100,
// 对象属性末尾加逗号(尽可能)
trailingComma: 'all',
// 箭头函数单参数时不加括号
arrowParens: 'avoid',
// HTML 文件空格敏感性
htmlWhitespaceSensitivity: 'ignore',
// Vue 文件中 script 和 style 标签缩进
vueIndentScriptAndStyle: true,
// 换行符自动检测
endOfLine: 'auto'
}
或者使用 JSON 格式(.prettierrc.json
):
json
{
"singleQuote": true,
"semi": false,
"printWidth": 100,
"trailingComma": "all",
"arrowParens": "avoid",
"htmlWhitespaceSensitivity": "ignore",
"vueIndentScriptAndStyle": true,
"endOfLine": "auto"
}
3. 创建忽略文件
创建 .prettierignore
文件,指定不需要格式化的文件/目录:
node_modules
dist
*.md
*.json
*.yaml
*.yml
4. 添加格式化脚本
在 package.json
的 scripts
部分添加:
json
{
"scripts": {
"format": "prettier --write .",
"format:check": "prettier --check ."
}
}
5. 配置 VS Code(可选)
如果你使用 VS Code,可以安装 Prettier 扩展,然后创建 .vscode/settings.json
:
json
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
6. 使用 Prettier
-
手动格式化整个项目:
bashnpm run format
-
检查格式问题(不修改文件):
bashnpm run format:check
7. 与 Vite 集成(可选)
虽然 Prettier 通常不需要与 Vite 直接集成,但如果你想在开发过程中自动格式化,可以安装:
bash
npm install --save-dev vite-plugin-prettier
然后在 vite.config.ts
中添加:
typescript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import prettier from 'vite-plugin-prettier'
export default defineConfig({
plugins: [
vue(),
prettier({
// 配置选项,与.prettierrc.js一致
singleQuote: true,
semi: false,
// 其他配置...
})
]
})
这样配置后,你的 Vue3 + TypeScript + Vite 项目就拥有了完整的 Prettier 格式化支持,可以保持代码风格一致。