(eslint和prettier，一个保证js代码质量，一个保证代码美观)
(该文档是通过听尚硅谷课程得出)
一 eslint配置
- 运行项目后自动打开 – 在
package.json中"dev":"vite --open" - eslint校验工具配置
(1)pnpm i eslint -D
(2)npm init @eslint/config或者npx eslint --init(选择第二种以及选择JavaScript modules)
(3) 生成配置文件.eslint.cjs - vue3环境代码校验插件
(1)pnpm install -D eslint-plugin-import eslint-plugin-vue eslint-plugin-prettier eslint-config-prettier eslint-plugin-node @babel/eslint-parser
让所有与prettier规则存在冲突的ESlint rules失效，并使用prettier进行代码校验
eslint-config-prettier:‘^8.6.0’,
eslint-plugin-import:‘^2.27.5’,
eslint-plugin-node:‘^11.1.0’
运行更漂亮的ESlint，使prettier规则优先级更高，ESLint优先级低
eslint-plugin-prettier:‘^4.2.1’
vue.js的ESlint插件（查找vue语法错误，发现错误指令，查找违规风格指南）
eslint-plugin-vue:‘^9.9.0’
该解析器允许使用ESlint校验所有babel code
(2) 修改.eslintrc.cjs配置文件（vue3_admin_vite项目中已修改）
(3) 新增.eslintignore忽略文件
dist
node_modules
(4) 运行脚本pacakage.json新增两个运行脚本
"scripts":{
"lint": "eslint src",
"fix": "eslint src --fix",
"lint:eslint":"eslint src/**/*.{ts,vue} --cache --fix"
}
二 配置prettier
- 安装依赖包
pnpm install -D eslint-plugin-prettier prettier eslint-config-prettier
- 新增
.prettierrc.json文件添加规则
{
printWidth: 100, //一行的字符数，如果超过会进行换行，默认为80
tabWidth: 2, //一个tab代表几个空格数，默认为80
useTabs: false, //是否使用tab进行缩进，默认为false，表示用空格进行缩减
singleQuote: true, //字符串是否使用单引号，默认为false，使用双引号
semi: true, //行位是否使用分号，默认为
trailingComma: 'none', //是否使用尾逗号，有三个可选值",
endOfLine: 'lf', // unix
arrowParens: "avoid", // 箭头函数只有一个参数时可以不加括号
bracketSameLine: false, //html 组件有多个属性，闭合尖括号（/>）不换行
}
- 添加
.prettierignore忽略文件
/dist/*
/html/*
.local
/node_modules/**
**/*.svg
**/*.sh
/public/*
- 运行脚本
"scripts":{
"format":"prettier --write \"./**/*.{html,vue,js,json,md}\"",
}
以上两种配置，通过pnpm run lint去检测语法，如果出现不规范格式，通过pnpm run fix修改
三 配置stylelint
-
pnpm add sass sass-loader stylelint postcss postcss-scss postcss-html stylelint-config-prettier stylelint-config-recess-order stylelint-config-recommended-scss stylelint-config-standard stylelint-config-standard-vue stylelint-scss stylelint-order stylelint-config-standard-scss -D -
新增
.stylelintrc.cjs配置文件
官网：https://stylelint.bootcss.com/
module.export = {
extends:[
'stylelint-config-standard', // 配置stylelint拓展插件
'stylelint-config-html/vue', // 配置vue中template样式格式化
'stylelint-config-standard-scss',// 配置stylelint scss插件
'stylelint-config-recommended-vue/scss',// 配置vue中scss样式格式化
'stylelint-config-recess-order',// 配置stylelint css属性书写顺序插件
'stylelint-config-prettier',// 配置stylelint和prettier兼容
],
overrides:[
{
files:['**/*.(scss|css|vue|html)'],
customSyntax:'postcss-scss',
},
{
files:['**/*.(html|vue)'],
customSyntax:'postcss-html',
}
],
ignoreFiles:[
'**/*.js',
'**/*.jsx',
'**/*.tsx',
'**/*.ts',
'**/*.json',
'**/*.md',
'**/*.yaml',
],
/**
null:关闭该规则
always:必须
*/
rules:{
'value-keyword-case':null, // 在css中使用v-bind不报错
'no-descending-specificity':null, // 禁止在具有较高优先级的选择器后出现被其覆盖的较低优先级的选择器
'function-url-quotes':'always', // 要求或禁止URL的引号'always（必须加上引号）'或'never（没有引号）'
'no-empty-source':null, // 关闭禁止空源码
'selector-class-pattern':null, // 关闭强制选择器类名的格式
'property-no-known':null, // 禁止未知属性（true为不允许）
'block-opening-brace-space-before':'always', // 大括号之前必须要有一个空格或不能有空白符
'value-no-vendor-prefix':null, // 关闭属性值前缀 -webkit-box
'property-no-vendor-prefix':null, // 关闭属性前缀 -webkit-mask
'selector-pseudo-class-no-unknown':[
<!-- 不允许未知的选择器 -->
true,
{
ignorePseudoClasses:['global','v-deep','deep'], // 忽略属性，修改element默认样式的时候能使用到
},
],
},
}
- 新增
stylelintignore忽略文件
/node_modules/*
/dist/*
/html/*
/public/*
- 运行脚本
"scripts":{
"lint:style":"stylelint src/**/*.{css,scss,vue} --cache --fix"
}
四 配置husky
（操作git hook的工具，主要实现代码提交前 eslint 校验和 commit 信息的规范校验,也可以避免多人合作时代码格式化不统一造成的冲突）
- 安装husky：
pnpm install -D husky - 执行：
npx husky-init（如果代码中没有git初始化，实施这一步会报错，解决办法：git init --> npx husky-init）; - 会在根目录下生成一个.husky目录，在这个目录下面会有一个
pre-commit文件，这个文件里面的命令在我们执行commit的时候就会执行
在.husky/pre-commit文件添加如下命令：
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
pnpm run format
在我们对代码执行commit操作的时候，就会执行命令，对代码进行格式化，然后再提交
五 配置commitlint
（主要是对提交信息Commit Message的检查。是一款检查工具和husky一起配合使用。只有当提交信息符合规则的时候，才能够提交）
- 安装包：
pnpm add @commitlint/config-conventional @commitlint/cli -D - 添加配置文件，新建
commitlint.config.cjs（注意是cjs）,然后添加下面的代码:
module.exports = {
extends:['@commitlint/config-conventional'],
rules:{
'type-name':[
2,
'always',
[
'feat',
'fix',
'docs',
'style',
'refactor',
'perf',
'test',
'chore',
'revert',
'build',
],
],
'type-case':[0],
'type-empty':[0],
'scope-empty':[0],
'scope-case':[0],
'subject-full-stop':[0,'never'],
'subject-case':[0,'never'],
'header-max-length':[0,'always',72],
},
}
- 在
package.json中配置script命令
// 在script中添加下面的代码
{
"scripts":{
"commitlint":"commitlint --config commitlint.config.cjs -e -V"
}
}
-
配置结束，现在当我们填写commit信息的时候，前面就需要带着我们下面的subject
‘feat’, // 新特性、新功能
‘fix’, // 修改bug
‘docs’, // 文档修改
‘style’, // 代码格式修改，注意不是css修改
‘refactor’, // 代码重构
‘perf’, // 优化相关，比如提升性能、体验
‘test’, // 测试用例修改
‘chore’, // 其他修改，比如改变构建流程、或者增加依赖库、工具等
‘revert’, // 回滚到上一个版本
‘build’, // 编译相关的修改，例如发布版本、对项目构建或者依赖的改动 -
配置husky
npx husky add .husky/commit-msg
- 在生成的
commit-msg文件中添加下面命令
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
pnpm commitlint
当我们commit提交信息的时候，就不能随意写了，必须是git commit -m 'fix: xxx'符合类型的才可以
需要注意的是类型的后面需要用英文的:,并且冒号后面是需要空一格的，这个是不能省略的
六 强制使用pnpm下载包
(为了统一我们的包管理工具，我们需要强制让用户使用pnpm来安装依赖包)
在根目录创建scripts/preinstall.js文件，添加下面的内容
if(!/pnpm/.test(process.env.npm_execpath || '')){
console.warn(
`\u001b[33mThis repository must using pnpm as the package manager` +
` for scripts to work properly.\u001b[33m\n`
)
process.exit(1)
}
配置命令
"scripts":{
"preinstall":"node ./scripts/preinstall.js"
}
当我们使用npm或者yarn来安装包的时候，就会报错了。
原理就是在install的时候会触发preinstall（npm提供的生命周期钩子函数）这个文件里面的代码