项目代码规范工具链配置
eslint
yarn add eslint eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/parser @typescript-eslint/eslint-plugin -D
新建 .eslintrc.cjs
:
module.exports = {
extends:[
'eslint:recommended',
'plugin:react/recommended',
'plugin:@typescript-eslint/recommended',
// prettier的eslint插件
'prettier',
'plugin:prettier/recommended'
],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaFeatures:{
jsx: true
},
ecmaVersion: 'latest',
sourceType: 'module'
},
plugins: ['react', 'react-hooks', '@typescript-eslint', 'prettier'],
rules: {
'prettier/prettier': 'error',
quotes: ['error', 'single'], // 单引号
semi: ['error', 'never'], // 结尾不追加分号
'@typescript-eslint/no-non-null-assertion': 'off',
'react/react-in-jsx-scope': 'off', // 解决 jsx文件内 不引入 React from ‘react’ 的报错
'@typescript-eslint/no-var-requires': 0 // 解决require部分没有通过import引入
},
settings: {
react: {
version: 'detect'
}
}
}
排除不进行校验的文件.eslintignore
:
.eslintrc.cjs
node_modules
package.json
pnpm-lock.yaml
dist
bin
esm-cjs
docs
package.json 新增
"scripts": {
"lint": "eslint --fix --ext .js,.jsx,.ts,.tsx ./",
},
- --fix 开启自动修复
prettier配置
yarn add prettier eslint-plugin-prettier eslint-config-prettier -D
.prettierrc.js
:
module.exports = {
semi: false,
singleQuote: true,
eslintIntegration: true,
trailingComma: "none", // 函数后面不加逗号
bracketSpacing: true
}
- .prettierignore文件配置同上selint的配置!
设置自动保存
设置icon-设置-input键入 formatter
设置为默认格式化工具 然后搜索 format on save 勾选此
这样就完成了基本的配置
代码提交阶段--husky
以下插件仅在当前为.git根目录时有效,否则会报错,根据需求进行配置!
yarn add husky -D
npx husky install
完成之后执行
npx husky add .husky/pre-commit "npm run lint"
来注册 Husky 的 pre-commit 钩子。执行完后你可以在项目的 .husky
目录下看到详细的脚本内容。
在package.json注册prepare命令
"prepare": "husky install"
随后进行commit的格式检查 安装:
yarn add commitlint @commitlint/cli @commitlint/config-conventional -D
根目录新建 .commitlintrc.js
module.exports = {
extends: ['@commitlint/config-conventional']
}
然后命令行执行新建命令
npx husky add .husky/commit-msg "npx --no-install commitlint --edit \"$1\""
- commit提交格式 git commit -m '[type]: [desc]'
其中type
可接受类型有:[build, chore, ci, docs, feat, fix, perf, refactor, revert, style, test]
冒号后有空格,这个是必须的,否则会报错!
desc为描述
- 但现在进行的是全量检查,需要安装
lint-staged
进行处理
yarn add lint-staged -D
package.json中新增:
"lint-staged":{
"**/*.{js,jsx,ts,tsx}":[
"eslint --fix"
]
}
然后需要在 .husky/pre-commit
中进行修改
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx --no -- lint-staged
即可
- 至此,完成了eslint prettier husky commitlint的完成工具链配置
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgbbahi
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13