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

“source.fixAll”: false,
“source.fixAll.eslint”: true
}
}

4. 效果  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/7c4d3c1302e94604a3413581159a644f.png#pic_center)


由于 `ESLint` 已经配置了代码格式化，所以没有必要使用 `Prettier` 来重复这个功能。要格式化代码，你可以运行 `yarn lint --fix`、`pnpm lint --fix` 或 `bun run lint --fix`，或者参考 `ESLint` 部分中的 `IDE` 设置。  
 如果你的编辑器中安装了 `Prettier`，请在项目中工作时禁用它，以避免冲突。


注意：[我们正在讨论]( )在将来启用 `Prettier`。


### 配置 Stylelint


1. 执行安装命令

pnpm add stylelint @nuxtjs/stylelint-module stylelint-config-standard stylelint-order stylelint-config-recommended-vue -D

2. 配置 `nuxt.config.ts`：

modules: [
// Simple usage
‘@nuxtjs/stylelint-module’,

// With options
[‘@nuxtjs/stylelint-module’, { /* module options */ }]
]

3. 新增 `.stylelintrc.cjs` 文件，具体配置请参考[Stylelint 配置]( )：

module.exports = {
extends: [‘stylelint-config-standard’,‘stylelint-config-recommended-vue’], // 这里保证 stylelint-config-recommended-vue 放在最后，不然 vue 文件会报错
plugins: [‘stylelint-order’],
rules: {
// 颜色指定大写
‘color-hex-case’: ‘upper’,
// 禁止空块
‘block-no-empty’: true,
// 颜色6位长度
‘color-hex-length’: ‘long’,
// 兼容自定义标签名
‘selector-type-no-unknown’: [
true,
{
ignoreTypes: []
}
],
// 忽略伪类选择器 ::v-deep
‘selector-pseudo-element-no-unknown’: [
true,
{
ignorePseudoElements: [‘v-deep’]
}
],
// 禁止低优先级的选择器出现在高优先级的选择器之后。
‘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



**自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。**

**深知大多数大数据工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！**

**因此收集整理了一份《2024年大数据全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。**
![img](https://img-blog.csdnimg.cn/img_convert/b04912b42ee70b9336df22cb53f2e11f.png)
![img](https://img-blog.csdnimg.cn/img_convert/1be30c2d87073eeadcac158a709a3f5c.png)
![img](https://img-blog.csdnimg.cn/img_convert/a9dbe0d91ae4ca30680ee5bfe5a82a1b.png)
![img](https://img-blog.csdnimg.cn/img_convert/22946390753c2ec31fea473c0fcf0e25.png)
![img](https://img-blog.csdnimg.cn/img_convert/0784aa98e1f349458407dcaa1c361b3e.png)

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

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

**如果你觉得这些内容对你有帮助，可以添加VX：vip204888 （备注大数据获取）**
![img](https://img-blog.csdnimg.cn/img_convert/0f237c03046f9f97a07246676778c46d.png)

**一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

知识点，真正体系化！**

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

**如果你觉得这些内容对你有帮助，可以添加VX：vip204888 （备注大数据获取）**
[外链图片转存中...(img-U7riLC6l-1712982807658)]

**一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**