前言
有了 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.json
VSCode集成
安装
在 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 等等,将它们禁用掉。
[