在Vue3中集成ESLint — 规范你的前端代码

前言

有了 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,解决 ESlintfunction 后面括号的警告,如图所示:

  • 如果想尝试 Vue 语法的其他风格可以看看这里
  • 如果想尝试其他 ESLint 规则可以看看这里
  • 如果需要设置 .eslintignore 可以新建之,设置参考如下:
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 有没有之前安装过一些其他的代码格式化或者自动美化代码的插件,比如 veturprettier 等等,将它们禁用掉。

[

](juejin.cn/post/688681...)

相关推荐
前端啊龙2 分钟前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
一颗松鼠6 分钟前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
小远yyds26 分钟前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
吕彬-前端1 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱1 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai2 小时前
uniapp
前端·javascript·vue.js·uni-app
bysking2 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓3 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4113 小时前
无网络安装ionic和运行
前端·npm
理想不理想v3 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试