接上文： 一、手动搭建Vue3项目
创建完项目自然就是要开始进行开发了，然而一个大型的系统，势必会有以下痛点：
- 不同开发人员的代码风格冲突；
- 不同的代码风格会造成提交冲突；
- 阅读和修改他人代码难度增加；
所以我们需要在项目中进行规范，让每个开发人员提交到仓库的代码拥有统一的代码风格。
项目地址：github
ESLint
安装依赖：
#开发依赖：esLint相关 eslint主体 eslint配置文件初始化工具
pnpm install -D eslint @eslint/create-config
1. VSCode安装ESLint插件
2.生成esLint配置文件
npx eslint --init
命令行会出现配置选项（蓝色是我们需要选择的配置）：
1、用ESLint做啥：
2、项目中使用的模块化方式
3、项目使用的框架
4、项目中是否使用了TS
5、项目代码运行环境
6、生成配置文件的后缀名
7、项目缺少一些依赖，是否安装及安装方式选择
以上步骤完成后，项目根目录下会生成一个.eslintrc.js文件，里面会有默认配置，但是这些配置还无法满足我们的要求，将其重写（见项目仓库）。
手动新建.eslintignore(不需要eslint校验的文件列表)：
node_modules
*.md
.vscode
.idea
dist
/public
/docs
.husky
.local
/bin
Dockerfile
.eslintrc.js
3.其它配置
打开工作区配置，在根目录下生成 .vscode -> setting.json文件
在生成的settings.json文件里添加：
// 保存代码时，自动格式化
{
"editor.codeActionsOnSave": {
"source.fixAll": true
}
}
接下来，在package.json的脚本配置（scripts）选项中，添加代码：
"lint:eslint": "eslint --cache --max-warnings 0 {src, mock}/**/*.{vue,ts,tsx} --fix"
// --cache 没有改动的代码不进行校验
// --max-warnings 0 如果校验警告超过0个，则强制以错误状态输出
// {src, mock}/**/*.{vue,ts,tsx} 需要校验耳朵目录
Prettier
1.VSCode安装Prettier插件
2. 相关依赖安装
#开发依赖： prettier主体
pnpm install -D prettier
3.根目录下手动创建.prettierrc.js和.prettierignore文件，并添加相关配置
.prettierrc.js:
module.exports = {
printWidth: 120, //单行长度
tabWidth: 4, //缩进长度
useTabs: true, //使用空格代替tab缩进
semi: true, //句末使用分号
singleQuote: true, //使用单引号
endOfLine: "auto",
trailingComma: "none", // 对象最后一个属性末尾是否要逗号
};
.prettierignore(忽略文件):
/dist/*
/node_modules/**
接下来，在package.json的脚本配置（scripts）选项中，添加代码：
"lint:prettier": "prettier --write **/*.{js,json,tsx,css,less,scss,vue,html,md}"
4.解决ESLint和Prettier的冲突问题
#开发依赖 关闭eslint中与pretiier冲突的配置项 在eslint中以prettier的配置进行格式化代码
pnpm install -D eslint-config-prettier eslint-plugin-prettier
接下来，在.eslintrc.js的extends配置项中，添加：
"plugin:prettier/recommended", //以prettier的风格对代码进行格式化
执行一次配置的脚本：
npm run lint:prettier
Stylelint
Stylelint 是一个强大、先进的 CSS 代码检查器（linter），可以帮助你规避 CSS 代码中的错误并保持一致的编码风格。
#开发依赖： stylelint主体 stylelint标准配置
pnpm install -D stylelint stylelint-config-standard
#开发依赖： 关闭stylelint中与prettier冲突的配置 解析html文件 css样式排序 less文件的校验 支持检查less与html StyleLint Vue项目推荐配置
pnpm install -D stylelint-config-prettier stylelint-config-html stylelint-order stylelint-less postcss-html postcss-less stylelint-config-standard-vue
1. 创建.stylelintrc.js(配置文件)和.stylelingignore(忽略文件)
配置项太多就不放上来了，可以直接去仓库拿。
至此，我们在代码风格一致性的配置就大功告成了，那么怎么让插件自行检查代码呢？
下一期：集成husky、LintStaged、CommitLint。
