携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情
项目初始化规范配置
配置eslint代码规范检查
1.安装eslint
npm install esint
2.初始化eslint
npx eslint --init
3.选择相应的配置
# 选择 帮我们找到不规范的语法，并且强制应用代码规范
? How would you like to use ESLint? …
To check syntax only
To check syntax and find problems
❯ To check syntax, find problems, and enforce code style
# 选择 (import/export)代码规范（ES6 代码规范）
? What type of modules does your project use? …
❯ JavaScript modules (import/export)
CommonJS (require/exports)
None of these
# 选择 项目中使用的前端框架
? Which framework does your project use? …
React
❯ Vue.js
None of these
# 是否验证 ts 代码规范
? Does your project use TypeScript? › No / Yes
# 代码的运行环境是 浏览器/node
? Where does your code run? … (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser
✔ Node
# 选择一个流行的代码规范
? How would you like to define a style for your project? …
❯ Use a popular style guide
Answer questions about your style
Inspect your JavaScript file(s)
# 选择 Standard 代码规范
? Which style guide do you want to follow? …
Airbnb: https://github.com/airbnb/javascript
❯ Standard: https://github.com/standard/standard
Google: https://github.com/google/eslint-config-google
XO: https://github.com/xojs/eslint-config-xo
# ESLint配置文件 代码的保存格式
? What format do you want your config file to be in? …
❯ JavaScript
YAML
JSON
# 是否同意开始安装
? Would you like to install them now with npm? › No / Yes
...
Successfully created .eslintrc.js file
# 配置成功
————————————————
版权声明：本文为CSDN博主「后海 0_o」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_45137565/article/details/120403170
4.添加.eslintrc.cjs文件中的校验规则
rules: {
// 禁止空格和 tab 的混合缩进
'no-mixed-spaces-and-tabs': 1,
// 禁用 debugger
'no-debugger': 1,
// 禁止不必要的布尔转换
'no-extra-boolean-cast': 1,
// 禁止使用多个空格c
'no-multi-spaces': 1,
// 要求在函数标识符和其调用之间有空格
'func-call-spacing': 1,
// 关闭 强制在函数括号内使用一致的换行
'function-paren-newline': 0,
// 强制隐式返回的箭头函数体的位置
'implicit-arrow-linebreak': 1,
// 强制在对象字面量的属性中键和值之间使用一致的间距
'key-spacing': 1,
// 强制在关键字前后使用一致的空格
'keyword-spacing': 1,
// 要求调用无参构造函数时有圆括号
'new-parens': 1,
// 禁止出现多行空行
'no-multiple-empty-lines': 1,
// 检查后面是否有分号,没有则报错
semi: [2, 'always'],
// 要求操作符周围有空格
'space-infix-ops': 1,
'no-sparse-arrays': 2,
// 不允许有声明后未使用的变量或者参数
'no-unused-vars': 'off',
'import/no-unresolved': 'off',
'import/no-extraneous-dependencies': 'off',
'import/extensions': 'off',
'global-require': 'off',
'vue/script-setup-uses-vars': 'off', // 如果使用 script-setup 可開啟
'vue/component-definition-name-casing': 'off' // 驼峰命名
}
5.编辑package.json文件
"scripts": {
"lint": "eslint src/**/*.{ts,tsx,vue,js,jsx} --fix"
},
- --fix：自动修复命令
配置git commit hook
目的：
配置了ESlint，但是eslint只是在代码提交时进行审核并且需要npm run lint，这里使用hook钩子，在提交时候自动对代码进行校验。
1.安装lint-staged
npm install --save-dev lint-staged # requires further setup
2.编辑package.json文件
"lint-staged": {
"src/**/*.{js,jsx,vue,ts,tsx}": [
"npm run lint",
"git add"
]
}
会在 git commit 的时候运行 npm run lint，并且抛出报错 位置和原因，错误的代码也不会被提交
在开发和构建时进行校验
目的：
- ESLint 配置目的是在代码提交时进行审核
- VSCode 是编写代码时候辅助校验
- 开发和构建验证是在 浏览器渲染时候校验并抛出异常
1.安装 vite-plugin-eslint
npm install vite-plugin-eslint --save-dev
2.编辑vite.config.ts文件
...
import eslintPlugin from 'vite-plugin-eslint'
plugins: [
...
eslintPlugin({
// 配置
cache: false // 禁用 eslint 缓存
})
]
})
Git Commit 提交规范
目的：规范化的 Git commit 日志，便于后续代码 review，版本发布以及日志自动化生成等等
常用 commit 类型说明：
[
• 'feat', // 新功能（feature）
• 'fix', // 修补bug
• 'docs', // 文档（documentation）
• 'style', // 格式（不影响代码运行的变动）
• 'refactor', // 重构（即不是新增功能，也不是修改bug的代码变动）
• 'test', // 增加测试
• 'revert', // 回滚
• 'config', // 构建过程或辅助工具的变动
• 'chore' // 其他改动
]
1.安装配置
npm install --save-dev @commitlint/config-conventional @commitlint/cli husky
2.根目录下创建配置文件commitlint.config.js
module.exports = {
extends: ['@commitlint/config-conventional'],
rules: {
'type-enum': [
2,
'always',
[
'feat', // 新功能（feature）
'fix', // 修补bug
'docs', // 文档（documentation）
'style', // 格式（不影响代码运行的变动）
'refactor', // 重构（即不是新增功能，也不是修改bug的代码变动）
'test', // 增加测试
'revert', // 回滚
'config', // 构建过程或辅助工具的变动
'chore' // 其他改动
]
],
'type-empty': [2, 'never'], // 提交不符合规范时,也可以提交,但是会有警告
'subject-empty': [2, 'never'], // 提交不符合规范时,也可以提交,但是会有警告
'subject-full-stop': [0, 'never'],
'subject-case': [0, 'never']
}
};
3.编辑package.json文件
"husky": {
"hooks": {
"commit-msg": "lint-staged && commitlint -e $HUSKY_GIT_PARAMS"
}
},
