配置 eslint - ESLint 9.0 + vue3.0 + js（语法校验）
如果是ESLint 9.0 + vue3.0 + TS，参考文章最新ESLint 9.0 + vue3.0 + TS配置
ESLint最初是由Nicholas C. Zakas 于 2013 年 6 月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具
首先安装eslint（^9.3.0）
pnpm i eslint -D
初始化配置
npx eslint --init
选择如下配置项
自动生成的配置文件eslint.config.js
import globals from 'globals'
import pluginJs from '@eslint/js'
import pluginVue from 'eslint-plugin-vue'
export default [
{ languageOptions: { globals: { ...globals.browser, ...globals.node } } },
pluginJs.configs.recommended,
...pluginVue.configs['flat/essential'],
]
配置运行脚本
"scripts": {
"lint": "eslint src --fix",
}
可配合eslint的vscode插件，实现代码校验提示
如果遇到 vscode 没有校验提示的问题，检查插件设置是否开启以下配置
配置 prettier（代码格式化）
prettier（^3.2.5） 用于统一代码风格，支持包含js在内的多种语言。
安装指令
pnpm install -D prettier
.prettierrc.js添加规则
// Prettier配置文件
export default {
// 使用单引号而非双引号
singleQuote: true,
// 不使用分号结尾
semi: false,
// 在对象的大括号与属性之间添加空格
bracketSpacing: true,
// 在HTML中忽略空白敏感性
htmlWhitespaceSensitivity: 'ignore',
// 自动检测并使用项目中已有的换行符风格
endOfLine: 'auto',
// 在数组和对象字面量的尾部添加逗号
trailingComma: 'all',
// 缩进宽度为2个空格
tabWidth: 2,
//单行长度
printWidth: 80,
}
.prettierignore忽略文件
/dist/*
/html/*
.local
/node_modules/**
**/*.svg
**/*.sh
/public/*
运行脚本
"scripts": {
"format": "prettier --write \"./**/*.{html,vue,js,json,md}\"",
}
安装 prettier 的 vscode 插件
在 .vscode 文件夹下的 settings.json 文件中配置 vscode 自动保存并格式化代码
如果自动保存并格式化失败，可以先卸载 prettier 插件再重新安装
{
"editor.formatOnSave": true, // 开启自动保存
"editor.defaultFormatter": "esbenp.prettier-vscode" // 默认格式化工具选择 prettier
}
配置 husky + lint-staged
在上面我们已经集成好了我们代码校验工具，但是需要每次手动的去执行命令才会格式化我们的代码。如果有人没有格式化就提交了远程仓库中，那这个规范就没什么用。所以我们需要强制让开发人员按照代码规范来提交。
要做到这件事情，就需要利用husky在代码提交之前触发git hook(git在客户端的钩子)
安装husky（^9.0.11）和lint-staged（^15.2.4）
pnpm install -D husky lint-staged
执行
npx husky-init
会在根目录下生成个一个.husky目录，在这个目录下面会有一个pre-commit文件，这个文件里面的命令在我们执行commit的时候就会执行，同时会在 package.json 中自动新增如下脚本
{
"script":{
"prepare": "husky install"
}
}
在.husky/pre-commit文件添加如下命令：
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx --no-install lint-staged
接下来我们配置 lint-staged，在 package.json 中添加下面的配置信息
"lint-staged": {
"*.{js,vue,ts,jsx,tsx}": [
"prettier --write",
"eslint --fix"
],
"*.{html,css,less,scss,md}": [
"prettier --write"
]
}
这样之后，我们后续提交到暂存区的代码也就会被 eslint+prettier 格式化和检查，进一步保证我们的代码规范
配置 commitlint（规范提交信息）
对于我们的commit信息，也是有统一规范的，不能随便写,要让每个人都按照统一的标准来执行，我们可以利用**commitlint**来实现。
安装
pnpm add @commitlint/config-conventional @commitlint/cli -D
添加配置文件，新建commitlint.config.js，然后添加下面的代码：
export default {
extends: ['@commitlint/config-conventional'],
// 校验规则
rules: {
'type-enum': [
2,
'always',
[
'feat', //新特性、新功能
'fix', //修改bug
'docs', //文档修改
'style', //代码格式修改, 注意不是 css 修改
'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中配置scripts命令
{
"scripts": {
"commitlint": "commitlint --config commitlint.config.js -e -V"
},
}
现在当我们填写commit信息的时候，前面就需要带着下面的前缀
'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' 符合类型的才可以，需要注意的是类型的后面需要用英文的 :，并且冒号后面是需要空一格的，这个是不能省略的
统一包管理器工具
团队开发项目的时候，需要统一包管理器工具,因为不同包管理器工具下载同一个依赖,可能版本不一样,
导致项目出现bug问题,因此包管理器工具需要统一管理
安装
pnpm install -D only-allow
添加指令
"scripts": {
"preinstall": "npx only-allow pnpm"
}
当我们使用npm或者yarn来安装包的时候，就会报错了。原理就是在install的时候会触发preinstall（npm提供的生命周期钩子）这个文件里面的代码
