项目规范如何生成
项目地址
虽然现在很多脚手架都能帮我们自动生成和配置好,但是我觉得还是有必要手动实现下
代码风格格式化配置(prettier)
1 yarn add -- dev -- exact prettier
2 新建文件 . prettierrc. js . prettierignore
3 在这两个文件中配置规则 和 需要忽略的文件
4 package . json中配置脚本 "prettier" : "prettier --cache --write 'src/**/*.{ts,tsx,jsx,js}'"
5 上述脚本表示 格式src下面所有的ts/ tsx/ js/ jsx文件 -- cache表示只修复暂存区改动过的文件
6 地址 https: / / prettier. io/ docs/ en/ integrating- with - linters. html
代码质量检测配置(eslint)
1 yarn add eslint -- dev
2 yarn add eslint -- dev ( 按需求选择)
3 yran add eslint- config- prettier -- dev (解决eslint和prettier冲突)
4 修改. eslintrc. js文件 plugins: [ 'react' , '@typescript-eslint' , 'prettier' ] , extends : [
'eslint:recommended' ,
'plugin:react/recommended' ,
'plugin:@typescript-eslint/recommended' ,
'prettier' ,
] ,
5 添加脚本 "lint" : "eslint --cache --fix --ext .js,.jsx,.ts,.tsx src/** "
样式检查(stylelint)
1 yarn add stylelint stylelint- config- standard - D
2 在项目的根目录中创建一个配置文件,内容如下:. stylelintrc. js
3 stylelint 可能和 prettier冲突
4 下载 yarn add stylelint- config- prettier - D
5 module. exports = {
extends : [ 'stylelint-config-standard' , 'stylelint-config-prettier' ] ,
rules : {
'selector-class-pattern' : '.' ,
} ,
}
只检测 git 暂存区的代码(lint-staged)
1 yarn add lint- staged - D
2 在package . json中 添加 "lint-staged"
"lint-staged" : {
"./**/*.{ts,tsx,jsx,js,html}" : "yarn run lint & yarn run prettier" ,
"./**/*.{css,scss,less}" : "yarn run lint:style"
} ,
3 或者在根目录下新建. lintStagedrc文件
{
"./**/*.{ts,tsx,jsx,js,html}" : "yarn run lint & yarn run prettier" ,
"./**/*.{css,scss,less}" : "yarn run lint:style"
} , 和在package . json中是一样的
在 git commit 之前做这些工作(husky)
1 yarn add husky - D
2 npx husky install
3 添加一个脚本 "prepare" : "husky install"
"scripts" : {
"dev" : "vite" ,
"build" : "tsc && vite build" ,
"preview" : "vite preview" ,
"prettier" : "prettier --write 'src/**/*.{ts,tsx,jsx,js}'" ,
"lint" : "eslint --cache --fix 'src/**.{ts,tsx,jsx,js}'" ,
"lint:style" : "stylelint 'src/**/*.{css,less,sass}' --fix" ,
"prepare" : "husky install"
} ,
4 添加一个commit之前执行的勾子
npx husky add . husky/ pre- commit "npx lint-staged"
对 git commit message 做出限制(@commitlint/cli)
1 yarn add @commitlint/ cli - D
2 yarn add @commitlint/ config- conventional - D 包含一些commit规则
3 添加一个勾子 yarn husky add . husky/ commit- msg 'yarn commitlint --edit $1'
4 根目录下新建文件 . commitlintrc. js
module. exports = {
extends : [ '@commitlint/config-conventional' ] ,
rules : {
'type-enum' : [
2 ,
'always' ,
[
'feature' ,
'update' ,
'fixbug' ,
'refactor' ,
'optimize' ,
'style' ,
'docs' ,
'chore' ,
] ,
] ,
'type-case' : [ 0 ] ,
'scope-empty' : [ 0 ] ,
'scope-case' : [ 0 ] ,
'subject-full-stop' : [ 0 , 'never' ] ,
'subject-case' : [ 0 , 'never' ] ,
'header-max-length' : [ 0 , 'always' , 72 ] ,
} ,
}