Nuxt3 实战 (二)：配置 Eslint、Prettierrc、Husky等项目提交规范(1)

],
// 禁止低优先级的选择器出现在高优先级的选择器之后。
‘no-descending-specificity’: null,
// 不验证@未知的名字，为了兼容scss的函数
‘at-rule-no-unknown’: null,
// 禁止空注释
‘comment-no-empty’: true,
// 禁止简写属性的冗余值
‘shorthand-property-no-redundant-values’: true,
// 禁止值的浏览器引擎前缀
‘value-no-vendor-prefix’: true,
// property-no-vendor-prefix
‘property-no-vendor-prefix’: true,
// 禁止小于 1 的小数有一个前导零
‘number-leading-zero’: ‘never’,
// 禁止空第一行
‘no-empty-first-line’: true,
// 属性的排序
‘order/properties-order’: [
‘position’,
‘top’,
‘right’,
‘bottom’,
‘left’,
‘z-index’,
‘display’,
‘justify-content’,
‘align-items’,
‘float’,
‘clear’,
‘overflow’,
‘overflow-x’,
‘overflow-y’,
‘margin’,
‘margin-top’,
‘margin-right’,
‘margin-bottom’,
‘margin-left’,
‘border’,
‘border-style’,
‘border-width’,
‘border-color’,
‘border-top’,
‘border-top-style’,
‘border-top-width’,
‘border-top-color’,
‘border-right’,
‘border-right-style’,
‘border-right-width’,
‘border-right-color’,
‘border-bottom’,
‘border-bottom-style’,
‘border-bottom-width’,
‘border-bottom-color’,
‘border-left’,
‘border-left-style’,
‘border-left-width’,
‘border-left-color’,
‘border-radius’,
‘padding’,
‘padding-top’,
‘padding-right’,
‘padding-bottom’,
‘padding-left’,
‘width’,
‘min-width’,
‘max-width’,
‘height’,
‘min-height’,
‘max-height’,
‘font-size’,
‘font-family’,
‘font-weight’,
‘text-align’,
‘text-justify’,
‘text-indent’,
‘text-overflow’,
‘text-decoration’,
‘white-space’,
‘color’,
‘background’,
‘background-position’,
‘background-repeat’,
‘background-size’,
‘background-color’,
‘background-clip’,
‘opacity’,
‘filter’,
‘list-style’,
‘outline’,
‘visibility’,
‘box-shadow’,
‘text-shadow’,
‘resize’,
‘transition’
]
}
}

4. 向 `package.json` 的 `scripts` 中添加命令：

“lint:style”: “stylelint src/`/*.{css,less,vue} --fix”, // 这里记得修改 nuxt.config.ts 的 srcDir 值为 ‘src/’

> 
> `stylelint` 的坑比较多，如果大家在配置后发现不生效，可以自行百度解决一下。
> 
> 
> 


### 配置 Husky


1. 执行安装命令

pnpm add husky -D

2. 初始化脚本

pnpm exec husky init

完成之后会在根目录生成一个 `.husky` 文件夹。


### 配置 Lint-staged


1. 执行安装命令

pnpm add lint-staged -D

2. 向 `package.json` 的 `scripts` 中添加命令：

“pre-commit”: “lint-staged”

3. 可以根据项目需要在 `package.json` 中添加配置，或者根目录新建 `.lintstagedrc` 配置文件：

{
“lint-staged”: {
“*.{js,jsx,vue,ts,tsx}”: [
“eslint --fix”,
“prettier --write”
]
}
}

4. 将 `.husky/pre-commit` 脚本的内容改为：

npm run pre-commit

配置完成后，这样当我们每次执行 `git` 命令的时候就会去检查暂存区的文件，有语法错误就会提示。


### 配置 Commitlint


1. 执行安装命令

pnpm add @commitlint/config-conventional @commitlint/cli -D

2. 根目录添加 `commitlint.config.cjs` 配置文件：

module.exports = {
extends: [‘@commitlint/config-conventional’],
rules: {
‘type-enum’: [
// type枚举
2,
‘always’,
[
‘build’, // 编译相关的修改，例如发布版本、对项目构建或者依赖的改动
‘feat’, // 新功能
‘fix’, // 修补bug
‘docs’, // 文档修改
‘style’, // 代码格式修改, 注意不是 css 修改
‘refactor’, // 重构
‘perf’, // 优化相关，比如提升性能、体验
‘test’, // 测试用例修改
‘revert’, // 代码回滚
‘ci’, // 持续集成修改
‘config’, // 配置修改
‘chore’ // 其他改动
]
],
‘type-empty’: [2, ‘never’], // never: type不能为空; always: type必须为空
‘type-case’: [0, ‘always’, ‘lower-case’], // type必须小写，upper-case大写，camel-case小驼峰，kebab-case短横线，pascal-case大驼峰，等等
‘scope-empty’: [0],
‘scope-case’: [0],
‘subject-empty’: [2, ‘never’], // subject不能为空
‘subject-case’: [0],
‘subject-full-stop’: [0, ‘never’, ‘.’], // subject以.为结束标记
‘header-max-length’: [2, ‘always’, 72], // header最长72
‘body-leading-blank’: [0], // body换行
‘footer-leading-blank’: [0, ‘always’] // footer以空行开头
}
}

3. 向 `package.json` 的 `scripts` 中添加命令：

{
“scripts”: {
“commitlint”: “commitlint --config commitlint.config.cjs -e -V”
}
}

4. 新增 `.husky/commit-msg` 配置文件：

npx husky add .husky/commit-msg

![img](https://img-blog.csdnimg.cn/img_convert/78d5e4b2b547825a071b5cd8690d223d.png)
![img](https://img-blog.csdnimg.cn/img_convert/611101961f20c3c68a425a1f0bdf5611.png)
![img](https://img-blog.csdnimg.cn/img_convert/6e0a838c7cdcb69afa5aecb46ff69a61.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**

8OqVu-1714416253999)]
[外链图片转存中...(img-Qo5sA85m-1714416253999)]

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**