初始化一个 Vue3 项目

使用 vite 创建项目

pnpm create vite vue3-ts-demo

配置@符号指向 src 目录

1. 修改 tsconfig.app.json

在 compilerOptions 中添加以下配置：

{
  "compilerOptions": {
    // ... 其他配置
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

2. 修改 vite.config.ts

添加路径别名配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

3. 注意事项

为了解决 vite.config.ts 中的类型错误，需要安装 @types/node：

pnpm install -D @types/node

这个包提供了 Node.js 的类型定义，包括 path 和 __dirname 等。

Prettier 配置完整教程

概述

Prettier 是一个代码格式化工具，能够自动统一代码风格。本教程将指导你如何在 Vue3 + TypeScript 项目中完整配置 Prettier，包括与 Git hooks 的集成。

安装和配置步骤

1. 安装 Prettier

pnpm add --save-dev --save-exact prettier

说明：

• --save-dev：将 Prettier 安装为开发依赖
• --save-exact：锁定版本号，确保团队成员使用相同的 Prettier 版本

2. 创建 Prettier 配置文件

node --eval "fs.writeFileSync('.prettierrc', JSON.stringify({trailingComma: 'es5', tabWidth: 4, semi: false, singleQuote: true}, null, 2))"

配置说明：

• trailingComma: "es5"：在 ES5 兼容的地方添加尾随逗号
• tabWidth: 4：缩进使用 4 个空格
• semi: false：不在语句末尾添加分号
• singleQuote: true：使用单引号而不是双引号

3. 创建 Prettier 忽略文件

node --eval "fs.writeFileSync('.prettierignore','# Ignore artifacts:\nbuild\ncoverage\n')"

说明：

• 忽略 build 和 coverage 目录
• 这些目录通常包含构建产物和测试覆盖率报告，不需要格式化

4. 格式化现有代码

npx prettier . --write

说明：

• 格式化项目中的所有文件
• --write 参数会直接修改文件

5. 检查代码格式

npx prettier . --check

说明：

• 检查代码是否符合 Prettier 规范
• 不会修改文件，只报告格式问题
• 常用于 CI/CD 流程中

6. 配置 Git Hooks

pnpm add --save-dev husky lint-staged 
pnpm exec husky init
node --eval "fs.writeFileSync('.husky/pre-commit','npx pnpm exec lint-staged\n')"

说明：

• husky：用于管理 Git hooks
• lint-staged：只对暂存区的文件执行格式化
• 在每次提交前自动格式化代码

7. 配置 lint-staged

在 package.json 中添加以下配置：

{
  "lint-staged": {
    "**/*": "prettier --write --ignore-unknown"
  }
}

配置说明：

• **/*：匹配所有文件
• --ignore-unknown：忽略不支持的文件类型

完整的配置文件示例

.prettierrc

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

.prettierignore

# Ignore artifacts:
build
coverage

package.json 相关部分

{
  "devDependencies": {
    "prettier": "^3.0.0",
    "husky": "^8.0.0",
    "lint-staged": "^13.0.0"
  },
  "lint-staged": {
    "**/*": "prettier --write --ignore-unknown"
  }
}

常用 Prettier 配置选项

基础配置

• printWidth: 80：每行最大长度
• tabWidth: 4：缩进空格数
• useTabs: false：使用空格而不是制表符
• semi: true：在语句末尾添加分号
• singleQuote: false：使用双引号
• quoteProps: "as-needed"：对象属性引号的使用规则
• jsxSingleQuote: false：JSX 中使用双引号
• trailingComma: "es5"：尾随逗号规则
• bracketSpacing: true：对象字面量中的括号间距
• bracketSameLine: false：JSX 标签的 > 是否与最后一个属性在同一行
• arrowParens: "always"：箭头函数参数的括号规则

Vue 特定配置

• vueIndentScriptAndStyle: false：是否缩进 Vue 文件中的 script 和 style 标签

工作流程

1. 开发时：正常编写代码，无需手动格式化
2. 提交前：Git hook 自动格式化暂存区的文件
3. CI/CD：使用 prettier --check 确保代码格式正确

团队协作建议

1. 统一配置：团队成员使用相同的 .prettierrc 配置
2. 版本锁定：使用 --save-exact 锁定 Prettier 版本
3. 编辑器集成：在编辑器中启用 Prettier 插件
4. CI 检查：在持续集成中添加格式检查

故障排除

常见问题

1. 格式化不生效

   • 检查 .prettierrc 文件是否存在
   • 确认文件没有被 .prettierignore 忽略

2. Git hook 不工作

   • 确认 husky 已正确安装
   • 检查 .husky/pre-commit 文件权限

3. 与 ESLint 冲突

   • 安装 eslint-config-prettier 禁用冲突的规则
   • 确保 Prettier 在 ESLint 之后运行

总结

通过以上配置，你的 Vue3 + TypeScript 项目将拥有：

• 自动化的代码格式化
• 统一的代码风格
• Git 提交前的自动格式化
• 团队协作的代码一致性

这套配置能够显著提升开发效率和代码质量，是现代前端项目的标准配置。