各位掘金的小伙伴，大家好！前面我们搭建了基于Vite+TSX的Vue3组件开发环境，本节我们在此基础上继续集成eslint、prettier来规范化vue组件开发。
集成Eslint
安装依赖
首先安装eslint相关的依赖，注意版本采用教程配套的：
npm i -D @typescript-eslint/eslint-plugin@7.10.0 @typescript-eslint/parser@7.10.0 eslint@8.57.0 eslint-plugin-vue@9.22.0 vite-plugin-eslint@1.8.1
安装的依赖包含了：eslint软件、支持ts检查的eslint插件以及eslint对vue支持的插件和eslint与vite整合的插件。
新增eslint命令脚本
在package.json的scripts节点下新增一个eslint的调用命令：
{
...
"scripts": {
...,
"eslint": "eslint src --ext .js,.vue,.ts,.jsx,.tsx --ignore-path .gitignore --fix"
}
...
}
这里的命令参数表明对src下特定扩展名的文件进行eslint检查，并指定.gitignore作为忽略文件设置，最后对于可修复的检查会自动修复，一般的格式不合规的检查我们会借助于后续要集成的prettier。
eslint配置
在项目根目录下创建一个eslint配置文件.eslintrc.json，完整内容如下：
{
"env": {
"browser": true,
"es2021": true,
"node": true
},
// 继承的eslint规则库
"extends": [
// vue规则
"plugin:vue/vue3-recommended",
// ts规则，后面定义的如果有相同规则名的话，后定义的会覆盖前面定义的
"plugin:@typescript-eslint/recommended"
],
// 添加vue文件解析器 解析template文件
"parser": "vue-eslint-parser",
// 使用ts的eslint解析器对最新模块语法进行检查
"parserOptions": {
"ecmaVersion": "latest",
"parser": "@typescript-eslint/parser",
"sourceType": "module"
},
// 应用的插件，对应了extends配置项中相应插件的规则库
"plugins": [
"@typescript-eslint",
"vue"
],
// 用户可以自己扩展的eslint检查规则，可覆盖extends中库定义的规则
"rules": {
}
}
vite服务集成eslint，以便vite执行构建时可以自动启用eslint，在vite.config.js中配置插件vite-plugin-eslint，调整的内容如下：
...
import eslintPlugin from 'vite-plugin-eslint'
...
export default defineConfig({
plugins: [..., eslintPlugin({
lintOnStart: true, // 启动时检查
cache: false, // 每次启动都重新检查
fix: true // 检查有错误自动修复
})],
...
})
如果import的地方编辑器报这样的错误：
修改下
vite-plugin-eslint模块的package.json，找到"import": "./dist/index.mjs"，改为：
"import": {
"types": "./dist/index.d.ts",
"default": "./dist/index.mjs"
}
增加导出的类型即可。
idea启用eslint插件
对于使用webstorm或idea开发的小伙伴，可以让编辑器利用eslint插件来检查项目中的相关设置，这样设置后，在eslint按照一些规则库的定义检查到不合规时，编辑器会飘红，提示错误信息。设置截图如下，选择第二项即可：
集成prettier
eslint提供了对代码中坏味道和格式问题的检查，它的修复能力是有限的，而结合prettier这款代码格式修复工具，则前端代码的规范化就可以轻松实现，只需要引入该工具并做几步配置即可。
安装依赖
npm i -D eslint-config-prettier@9.1.0 eslint-plugin-prettier@5.1.3 prettier@3.2.5
除了基本的prettier工具外，引入eslint-config-prettier，它可以实现eslint和prettier的相互配合而避免检查规则冲突的情况，而引入eslint-plugin-prettier，该eslint插件可以将prettier的代码修复功能集成到eslint的检查工作流中，对代码检查过程中报出的问题进行自动修复。
prettier配置
在工程根目录下创建其配置文件，固定命名，格式这里使用.cjs，文件名为.prettierrc.cjs，完整内容如下：
module.exports = {
// 一行最多多少个字符
printWidth: 150,
// 指定每个缩进级别的空格数
tabWidth: 2,
// 使用制表符而不是空格缩进行
useTabs: false,
// 在语句末尾是否需要分号
semi: false,
// 是否使用单引号
singleQuote: true,
// 更改引用对象属性的时间 可选值"<as-needed|consistent|preserve>"
quoteProps: "as-needed",
// 在JSX中使用单引号而不是双引号
jsxSingleQuote: true,
// 多行时尽可能打印尾随逗号。（例如，单行数组永远不会出现逗号结尾。） 可选值"<none|es5|all>"，默认none
trailingComma: "none",
// 在对象文字中的括号之间打印空格
bracketSpacing: true,
// jsx 标签的反尖括号需要换行
jsxBracketSameLine: false,
// 在单独的箭头函数参数周围包括括号 always：(x) => x \ avoid：x => x
arrowParens: "always",
// 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码
rangeStart: 0,
rangeEnd: Infinity,
// 指定要使用的解析器，不需要写文件开头的 @prettier
requirePragma: false,
// 不需要自动在文件开头插入 @prettier
insertPragma: false,
// 使用默认的折行标准 always\never\preserve
proseWrap: "preserve",
// 指定HTML文件的全局空格敏感度 css\strict\ignore
htmlWhitespaceSensitivity: "css",
// Vue文件脚本和样式标签缩进
vueIndentScriptAndStyle: false,
//在 windows 操作系统中换行符通常是回车 (CR) 加换行分隔符 (LF)，也就是回车换行(CRLF)，
//然而在 Linux 和 Unix 中只使用简单的换行分隔符 (LF)。
//对应的控制字符为 "\n" (LF) 和 "\r\n"(CRLF)。auto意为保持现有的行尾
// 换行符使用 lf 结尾是 可选值"<auto|lf|crlf|cr>"
endOfLine: "auto"
}
以上内容来自于互联网，来源无法追溯，对原作者表示抱歉。这里的配置内容指定了代码格式的各种要求，也作为修复代码的依据。
接下来对eslint的配置文件.eslintrc.json增加prettier的配置项，调整的内容如下：
{
...
"extends": [
...,
// 告诉 ESLint 关闭与 Prettier 格式化规则冲突的任何规则，需写在最后，会覆盖前面的配置
"plugin:prettier/recommended"
],
...
"plugins": [
...,
// 将 Prettier 的格式化功能集成到 ESLint 中。会应用Prettier的配置
"prettier"
],
...
}
注意
上面的方法只能处理 extends 中的配置冲突。rules 中的冲突无法处理。我们一般会在 perttier 中统一我们的代码风格。在 eslint 中保证我们的代码质量。
代码修复方式
idea prettier插件
这是咱们借助编辑器的插件功能来实现在保存时，自动完成代码格式问题的修复，是最方便的。以小卷钟爱的idea为例，我的配置是这样的：
这样，在我按
Ctrl + S保存时，编辑器会自动修复代码格式问题啦~
第二种方式是，在package.json中配置prettier命令脚本方式，指定对那些类型的文件进行修复内容的写入：
"scripts": {
...
"prettier": "prettier --write "./**/*.{html,vue,ts,js,json,md}""
}
第三种方式就是，前面介绍的在创建eslint命令脚本时，指定--fix选项，在运行eslint命令时自动借助prettier工具来帮我们修复代码。
好了，以上就是本节内容啦~相信学到这里，小伙伴本地的代码规范化设置也都搞定了吧。下一节，咱们对当前的工程引入tailwincss样式生成工具，以方便后续组件的样式开发，大家加油！！
