前言
有了 Typescript 的类型系统对 Vue3 的加持，使得项目中的代码变得更加健壮和可靠，可以提前对代码做到严格把控，但是在日常的大型项目协同开发过程中，不同的开发者代码风格迥异，随着时间推移，就造成了项目代码的阅读性较差，后期维护成本较高，因此我们需要对 JavaScript 灵活的语法加以限定，让它在一套标准的规则下运行，这时候我们就需要一款可以制定规则，统一规范，最好是自动检查、智能提示，甚至可以帮助我们修正代码的工具，ESlint 就是一个很好的选择。
前端代码规范化
为何规范化
- 每个开发者的代码风格和习惯不同
- 团队协作需要统一的代码规范
- 方便其他开发者快速接手代码
- 减少项目的维护成本
如何规范化
- 制定标准化代码规范手册
- 定期 code review
- 使用 ESLint
集成ESLint
项目集成
安装
npm install eslint -D
执行
在 npm 5.2.0 版本之后，npm 内置了 npx 的包，所以现在大部分的开发者都可以直接使用到 npx 的功能。npx 是一个简单的 cli 工具，让我们更加方便的执行一些 npm 包，而不用通过 npm 来将包安装到开发者的电脑上面。
在终端执行命令：npx eslint --init
如果手动安装失败，如图：
则手动安装
npm i @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-airbnb-base eslint-plugin-import eslint-plugin-vue -D
安装成功后项目会生成 .eslint.js 文件，即为 ESlint 的配置文件，最终配置如下图：
java
module.exports = {
env: {
browser: true,
es2021: true,
node: true
},
extends: [
'plugin:vue/essential', // 使用插件提供的配置
'standard'
],
parserOptions: {
ecmaVersion: 12, // 指定使用ES的版本，也就是es2021
parser: '@typescript-eslint/parser', // typescript语法解析器
sourceType: 'module' // 使用ESM的方式
},
plugins: ['vue', '@typescript-eslint'],
rules: {
'vue/no-multiple-template-root': 'off'
}
}extends 里设置的 'plugin:vue/essential' 主要是针对 Vue2 的一些必要规则，为了更好的适应 Vue3 语法，并且为了避免在 rules 中重新手动配置 Vue3 语法规则，我们将它替换为 'plugin:vue/vue3-essential'，如图所示：
如果 function 后的 () 之间有报错，则设置'space-before-function-paren':0，解决 ESlint 对 function 后面括号的警告，如图所示：
java
public
dist
*.d.ts
package.jsonVSCode集成
安装
在 VSCode 编辑器的应用商店搜索 ESlint 插件，安装之，如图所示：
配置
windows 用户使用快捷键 ctrl+shift+P 打开VSCode编辑器的 setting.json，如图所示：
添加如下规则：
json
"eslint.validate": [
"javascript",
"javascriptreact",
"vue"
]修改完 setting.json 后，如果不生效，最好重启下 VSCode。
示例
如果语法不符合规范会编辑器警告或者报错，如图所示（修正前对代码的警告提示）：
保存代码的时候，ESlint 会结合编辑器自动将提示警告的代码修正为正确的标准语法代码，如图所示（修正后的正确代码）：
对于提示错误的代码，会给出修正的方案，如图所示：
第一行是 ESlint 的智能提示，第二行是 volar 插件的智能提示。
注意
如果 ESLint 没有生效或者与 VSCode 冲突，要看看 VSCode 有没有之前安装过一些其他的代码格式化或者自动美化代码的插件，比如 vetur ，prettier 等等，将它们禁用掉。
[