一、什么是 ESLint

在 vue-cli 下进行过开发的，大概都会有过这样的体验：代码明明没有错误，vscode （编辑器）就是报错标红。

这个现象就是 ESLint 在搞鬼了。

ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。

—— 摘抄于《ESLint 官方文档—— Getting Started with ESLint》

上面对 ESLint 的描述通俗的讲就是：ESLint 是一个代码检测工具，用于检测代码的编写是否符合 ESLint 所设定的规范。借助 ESLint 我们可以很容易的解决多人开发项目的代码不一致性问题，保证所有开发人员所写代码一致。这也是 ESLint 诞生的目的。

前面所讲的我们所遭遇的情况就是我们所编写的代码不符合 ESLint 所设定的规范进而产生的错误提示。为了避免错误的出现，我们就必须要遵守 ESLInt 所设定的规则。然而，可能新晋开发的朋友并不知道这些规则。所以他们即便想去遵守也无从下手。这也就是为什么很多关于 ESLint 文章都会建议新晋开发人员在搭建 vue 项目时建议去掉 ESLint。

二、vue-cli 4.0 中的 ESLint

ESLint 在项目中是以插件的形式存在。所以我们只需要在项目中安装 ESLint 就可以使用了。

vue-cli 4.0 安装 ESlint 的两种方式

（一）在现有项目中安装 ESLint

  1. 安装 ESLint

    npm install eslint --save-dev

  2. 安装 vue 专门的 ESLint 规则插件 @vue/cli-plugin-eslint

    npm i @vue/cli-plugin-eslint --save-dev

  3. 添加配置文件

    配置文件常用的方法有两种:

    • 在 package.json中添加

      {
    "name": "mypackage",
    "version": "0.0.1",
    "eslintConfig": {
        "plugins": ["example"],
        "env": {
            "example/custom": true
        }
    }
}

    • 在项目根目录添加独立的配置文件.eslintrc.js

      在这里插入图片描述

      module.exports = {
  root: true,
  env: {
    node: true
  },
  parserOptions: {
    parser: "babel-eslint"
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    "indent": ["error", 2]
  }
};

其实在现有项目添加 ESLint 还有另一种方法就是在 vue-cli 4.0 可视化项目管理界面中配置：

  1. 在 cmd 中输入vue ui 打开 vue-cli 4.0 的可视化项目界面

  2. 选择要添加的项目

  3. 安装 ESLint 依赖

在这里插入图片描述

  1. 安装@vue/cli-plugin-eslint插件

在这里插入图片描述

安装过程中会让我们选择默认的 ESlint 规则。

有四种选项：

  1. Error prevention only
  2. Airbnb (JavaScript 主流代码规范之一：英文文档、中文文档)
  3. Standard (JavaScript 主流代码规范之一：英文文档、中文文档)
  4. Pretiter

在这里插入图片描述

  1. 可视化配置 ESLint 配置文件

在这里插入图片描述

（二）新项目创建过程中直接添加 ESLInt

这个方法其实跟第一个方法没有什么较大的区别，本质上都是一样的。直接看动图：

在这里插入图片描述

三、了解 vue-cli 4.0 中配置 ESLint 的方法

ESLInt 的配置文件规定了当前项目的代码编写规范。想要了解一个项目的编写规范，阅读 ESLint 配置文件是最直接有效的方法。

在这里插入图片描述

上图是前面动图中演示项目是的 ESLint 初始化配置。我们可以看到配置中几个选项(option)。接下来逐一讲解：

root : true

默认情况下，ESLint 会在所有父级目录里寻找配置文件，一直到根目录。这将会很有用，但有时候会导致意想不到的结果。为了将 ESLint 限制到一个特定的项目，在你项目根目录下的 package.json 文件或者 .eslintrc.* 文件里的 eslintConfig 字段下设置 "root": true。ESLint 一旦发现配置文件中有 "root": true，它就会停止在父级目录中寻找。

—— 摘抄自《Configuring ESLint》

注意这里的根目录指的是磁盘的根目录而不是项目的根目录。

所以这里添加 root:true表明该配置文件为当前项目最底层的 ESLint 配置。

为什么说是最底层的配置呢？

因为 ESLint 的配置文件跟 git 的忽略文件.gitignore有一个共同的特性。即，越靠近生效文件的配置文件，优先级越高。根目录的 ESLint 配置文件.eslintrc.js 设置 root:true表明不能再往上层去寻找配置了。所以，项目根目录的配置是最底层的配置。详细可看：《Configuration Cascading and Hierarchy》

env

一个环境定义了一组预定义的全局变量。可用的环境包括：

  • browser - 浏览器环境中的全局变量。
  • node - Node.js 全局变量和 Node.js 作用域。
  • commonjs - CommonJS 全局变量和 CommonJS 作用域 (用于 Browserify/WebPack 打包的只在浏览器中运行的代码)。
  • shared-node-browser - Node.js 和 Browser 通用全局变量。
  • es6 - 启用除了 modules 以外的所有 ECMAScript 6 特性（该选项会自动设置 ecmaVersion 解析器选项为 6）。
  • worker - Web Workers 全局变量。
  • amd - 将 require() 和 define() 定义为像 amd 一样的全局变量。
  • mocha - 添加所有的 Mocha 测试全局变量。
  • jasmine - 添加所有的 Jasmine 版本 1.3 和 2.0 的测试全局变量。
  • jest - Jest 全局变量。
  • phantomjs - PhantomJS 全局变量。
  • protractor - Protractor 全局变量。
  • qunit - QUnit 全局变量。
  • jquery - jQuery 全局变量。
  • prototypejs - Prototype.js 全局变量。
  • shelljs - ShellJS 全局变量。
  • meteor - Meteor 全局变量。
  • mongo - MongoDB 全局变量。
  • applescript - AppleScript 全局变量。
  • nashorn - Java 8 Nashorn 全局变量。
  • serviceworker - Service Worker 全局变量。
  • atomtest - Atom 测试全局变量。
  • embertest - Ember 测试全局变量。
  • webextensions - WebExtensions 全局变量。
  • greasemonkey - GreaseMonkey 全局变量。

这些环境并不是互斥的，所以你可以同时定义多个。

——摘自《Specifying Environments》

换言之，用于设置 ESLint 配置生效的环境。

extends

扩展：继承或者引用第三方的 ESLint 配置。

注意，继承的规则可以被rules中的规则覆盖掉。

详见：《Extending Configuration Files》

上面配置启用 @vue/cli-plugin-eslint必要（默认）规则及 JavaScript Standard Style规则。

parserOptions

设置 ESLint 的解析器。

可用的解析器有：

详见：《Specifying Parser》

rules

设定 ESLint 规则。

这个是 ESLint 最重要的属性，也是我们用得最多的，需要着重去了解的属性。

ESLint 相关的规则非常多，不但有 ESLint 官方定义的规则，也有第三方定义的规则（如 vue 的 ESLint 规则）。

不过需要注意的是，rules选项主要用于我们自己根据需要启用关闭某些规则。如果你想直接套用第三方的规则体系，可以直接添加对应的人扩展即可。

rule 的写法

一条 rule 由规则ID、启用形式和可选参数组成。如下例：

quotes: ["error", "double"]

  • 规则ID: quotes （引号）

  • 启用形式：error （开启规则，使用错误级别的错误）

    启用形式有以下三种：

    “off” 或 0 - 关闭规则
    “warn” 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
    “error” 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

  • 可选参数：double （双引号）

翻译过来就是”强制使用双引号，如果使用其他引号则报错“。

四、使用 vue 的 ESLint 规则

前面提到， vue 为自己定制了一套 ESLInt 规则。只需要安装 @vue/cli-plugin-eslint 插件，然后在extends添加启用的规则模式配置即可使用。

  extends: [
    'plugin:vue/essential'		// 启用 vue 必要的 ESLint 规则
  ]

@vue/cli-plugin-eslint 提供了三种模式的规则：

  • 必要（默认）规则：plugin:vue/essential
  • 强烈推荐规则: plugin:vue/strongly-recommended
  • 推荐规则: plugin:vue/recommended

三者并不是独立的，而是包含关系：推荐规则 》强烈推荐规则 》必要（默认）规则

此外，我们也可以在 rules 对这些规则做自己的设定。

如果你需要自定义这些规则，建议你使用vue 项目管理系统来进行可视化编辑。

五、ESLint 全规则查阅地址

  • ESLInt 官方的规则：https://eslint.bootcss.com/docs/rules/
  • eslint-plugin-vue 的规则：https://eslint.vuejs.org/rules/

六、代码格式化工具推荐

如果项目添加了 ESLint ，建议安装 prettier-Code formatter 和 vetur 这两个插件。这两个插件都是代码格式化工具。prettier-Code formatter 是 JS 的代码格式化工具；vetur 是 vue 的格式化工具。使用他们是我们需要根据 ESLint 设定的规则，做响应的配置。配置完成后，只需要 使用快捷键 Shift+Alt+F 或者鼠标右键选择“格式化文档”基本一键格式化当前文件的代码格式。、

此外，我们还可以在项目控制台执行命令：

npm run lint

该命令将会根据 ESLint 配置文件中的规则格式化项目中的全部代码。

# 代码规范
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue