项目搭建与环境配置：
使用 pnpm 包管理工具，搭建一个初步基于vite的react+typescript+sass+antd的项目。
本文目录如下：
[TOC]
一、vite安装及配置
终端输入命令行，根据提示选择安装react+ts的项目
pnpm create vite my-app-name --template react-ts
进入package.json 文件内，可以看到script内的配置
"scripts": {
"dev": "vite",
"build": "tsc && vite build",}
//输入 pnpm run dev启动项目
//输入 pnpm run bulid 打包项目
接着继续配置项目目录中的 vite.config.ts 文件，具体配置参考：vite中文配置官方文档
根据项目要求配置如下：
export default defineConfig({
plugins: [
react(),//react()配置后不需要每页再引入react，且具备热更新
vitePluginImp({//按需引入 Antd 的样式和组件
libList: [
{
libName: 'antd',
style: (name) => `antd/es/${name}/style`,
}
]
})
],
resolve: {
alias:{
'@': path.resolve(__dirname, './src') //设置路径别名，需要引用/src下面的文件时只需要在前面添加@即可
},
extensions: ['.js', '.ts', '.json'] // 导入时想要省略的扩展名列表
},
css: {
preprocessorOptions: {
scss: {//引入项目自定义变量
additionalData: `@import "./src/style/_variables.scss";`
}
}
},
esbuild: {//打包的时候去除掉调试的代码
drop: ["console", "debugger"],
},
server: {
port:3022,//启动端口
}
})
二、tsconfig配置及报错解决方案
打开tsconfig.config.json和tsconfig.node.json会发现报错：
"moduleResolution": "bundler"
//——解决方案：将bundler改为node即可
"moduleResolution": "node"
注意要将报错的地方都修改，其他配置根据自己需要参考tsconfig配置即可。
这里列举几个常用的config:
"useDefineForClassFields": true
useDefineForClassFields: 开启此选项后，TypeScript 编译器会将类中的属性声明为 JavaScript 中的Object.defineProperty，而不是将它们赋值给this。这可用于更好地控制类属性的访问级别和可枚举性。
"noFallthroughCasesInSwitch": true,
forceConsistentCasingInFileNames: 开启此选项后，TypeScript 编译器将在编译时检查文件名的大小写是否一致，并给出警告。
三、安装husky\prettier\lint-staged
（一）husky安装及配置commit message规范
参考了官方文档Getting started | ? husky (typicode.github.io)，推荐两种方案，我这里采取了第一种自动化方案，在终端中输入以下命令行：
pnpm dlx husky-init
pnpm install
这种方案会在我们的package.json中script调式中添加”prepare”: “husky install”，并生成pre-commit文件（在pre-commit文件，会在代码提交之前运行，这里我当时没配置好，也是导致我后续报错的原因，想知道为什么的话，就继续看下去吧）
在提交代码时，要根据规定的commit规范提交
- feat: 新功能、新特性
- fix: 修改 bug
- perf: 更改代码，性能优化
- refactor: 代码重构（重构，在不影响代码内部行为、功能下的代码修改）
- docs: 文档修改
- style: 代码格式修改, 注意不是 css 修改（例如分号修改）
- test: 测试用例新增、修改
- build: 影响项目构建或依赖项修改
- revert: 恢复上一次提交
- ci: 持续集成相关文件修改
- chore: 其他修改（不在上述类型中的修改）
- release: 发布新版本
- workflow: 工作流相关文件修改
（二）prettier安装
根据文档Install · Prettier操作，通过命令行安装
pnpm install --save-dev --save-exact prettier
在项目根目录新建一个.prettierrc.json文件，里面的内容为美化代码的规则，如这里设置的
{
// 不使用分号结尾
"semi": false,
// 使用两个空格作为一个缩进级别
"tabWidth": 2,
// 使用单引号而不是双引号
"singleQuote": true,
// 行宽限制为 80 个字符，超出则换行
"printWidth": 80,
// 不使用尾随逗号
"trailingComma": "none"
}
接着在eslintrc.json的文件中添加（防止eslint和prettier冲突）
...,
"extends": [
...,
"prettier"
],
...,
（三）lint-staged安装
根据文档lint-staged – npm (npmjs.com)通过命令行安装：
pnpm install --save-dev lint-staged
接着在package.json中配置
"lint-staged": {
"*.{js,jsx,ts,tsx}": [
"prettier --write"
],
"*.{md,json}": [
"prettier --write --no-error-on-unmatched-pattern"
]
}
在调试script中配置，或根据
"scripts": {
...
"lint-staged": "lint-staged"
...
}
（在pre-commit中添加 npm run lint-staged)
bug：解决方案、反思
在提交commit的时候出现
> git -c user.useConfigOnly=true commit --quiet --allow-empty-message --file -
Unknown command: "lint-staged"
Did you mean this?
npm run lint-staged # run the "lint-staged" package script
To see a list of supported npm commands, run:
npm help
husky - pre-commit hook exited with code 1 (error)
出现这个错误是因为我在package.json中配置了”lint-staged”: “lint-staged”
"scripts": {
...
"lint-staged": "lint-staged"
},
但是并没有修改pre-commit中的内容，它仍然是
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npm lint-staged
解决方案1
修改pre-commit中的内容，在npm后面加上run
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npm run lint-staged
解决方案2
删除script中配置的”lint-staged”: “lint-staged”，在pre-commit中配置
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx --no-install lint-staged --concurrent false
npx --no-install lint-staged --concurrent false 这一行使用 npx 命令来运行 lint-staged。lint-staged 是一个工具，它可以在 Git commit 之前检查暂存区中的文件，以确保它们符合代码风格和规范。--no-install 参数告诉 npx 不要在本地安装 lint-staged，而是从 npm registry 中动态获取。--concurrent false 参数告诉 lint-staged 不要并发执行检查，而是按顺序一个一个执行。
反思
出现bug后要仔细阅读报错信息
-注意报错文件，可以帮助我们及时定位到错误文件：husky – pre-commit
-注意报错信息，引导我们可以从哪方面修改:Did you mean this?
npm run lint-staged # run the “lint-staged” package script
