react+vite+hooks+commitlint基本框架搭建

react+vite+hooks+commitlint基本框架搭建

1. 创建项目

pnpm create vite

选择react
TypeScript+SWC ，（swc是用Rust编写的JavaScript编译器,相比默认的tsc具有更强大的性能和速度，并且生态支持完全相同）

2. 安装prettier

pnpm i prettier eslint-config-prettier eslint-plugin-prettier -D

.eslintrc.cjs中添加

'plugin:prettier/recommended'

3.根目录添加 .vscode / settings.json 文件（）自选

{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint":true 
    }
}

package.json添加 命令

"scripts": {
···
"format":"prettier --write 'src/**/*.+(js|ts|jsx|tsx)'"
···
}

注意事项

若您的package.json文件中有"type": “module”，您可以将".eslintrc.js重命名为eslintrc.cjs”
.eslintrc.cjs会有个警告：‘module’ is not defined.
解决：打开.eslintrc.js,更改env配置为：

 "env": {
       "browser": true,
       "es2021": true,
       "node": true,
   },

4.添加.prettierrc.cjs

实例：

module.exports = {
    singleQuote: true, //字符串是否使用单引号
    trailingComma: "none", //是否使用尾逗号
    printWidth: 100, // 宽度限制 
    proseWrap:"never",
    endOfLine:"auto",
    semi: false, //行位是否使用分号
    tabWidth: 4, // Tab键宽度
    vueIndentScriptAndStyle:true,//Vue单文件组件中，处理 <script> 和 <style> 缩进
    arrowParens:'avoid',//  (x) => {} 箭头函数参数只有一个时是否要有小括号. 可选 avoid| always
    useTabs:true, // 采用tab缩进还是空白缩进
    bracketSpacing: true, // 是否保留括号中的空格 默认true
    bracketSpacing: true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
  }

配置完后，重启vscode即可生效

5. 安装 sass

pnpm add sass sass-loader -D

6. 配置husky规范提交

可参考源码
https://github.com/typicode/husky
相关命令如下

pnpm i husky -D
//添加 .husky 文件
npm pkg set scripts.prepare="husky install"
npm run prepare
//添加执行命令
npx husky add .husky/pre-commit "npm run lint"
npx husky add .husky/pre-commit "npm run format"
npx husky add .husky/pre-commit "git add ."

配置完之后如下：

7.配置commitlint提交规范

github源码：https://github.com/conventional-changelog/commitlint
相关命令如下：

注意电脑类型
	//mac
	pnpm install --save-dev @commitlint/{config-conventional,cli}
	//windows
	pnpm install --save-dev @commitlint/config-conventional @commitlint/cli

	// Configure commitlint to use conventional config
	echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
	//husk文件夹中添加 commit-msg 文件
	npx husky add .husky/commit-msg  'npx --no -- commitlint --edit ${1}'

由于项目为esModule(es6)新规范 ，所以将commitlint.config.js 更改为.cjs结尾

配置完毕，以下是提交示例：
git commit -m 'chore: 添加readme'
git空格commit空格-m空格'chorm:空格xxx'

'build'  打包,
'chore' 小东西,
'ci',
'docs'  文档,
'feat' 功能,
'fix' 修复,
'perf' 性能优化,
'refactor' 重构代码,
'revert' 恢复,
'style' 样式,
'test'  添加缺失的测试, 重构测试,