切换语言为:繁体
详细总结前端必备的eslint知识点!

详细总结前端必备的eslint知识点!

  • 爱糖宝
  • 2024-07-30
  • 2076
  • 0
  • 0

ESLint简介

作为前端,大家对ESLint 一定不陌生!它可以帮我们强制约束代码风格、检测代码中的语法错误、可以识别代码中的潜在问题甚至提供了一些自动修复功能。

但要注意,在前端中,ESLint 有两个工具:

一个是 模块包 ,一个是 VSCode的扩展工具

ESLint 模块包

安装方式:

通过 npm 或 yarn 直接进行 全局 或 项目安装

npm i eslint -D


通过 vue 脚手架 创建项目时 选择安装 eslint 模块包 vue create 创建项目过程中选择 lint

详细总结前端必备的eslint知识点!

模块包安装在项目里,当启动项目时,会根据配置情况在浏览器控制台显示错误。

详细总结前端必备的eslint知识点!

VS中ESLint扩展工具

安装方式:通过 vscode 搜索安装

详细总结前端必备的eslint知识点!

此插件会根据当前项目的配置(配置不能使用console.log),实时将错误显示在编译器里

详细总结前端必备的eslint知识点!

ESLint配置详解

官网:Configuring ESLint

eslint 本身是一个js语法规范检查的包,可以使用官方推荐的推荐的检查规则,也可以使用自定义的规则。

手动下载生成配置

原有项目第一次引入eslint时,可以使用该方法生成配置文件。使用vue脚手架的方式建立项目多半是不用这种方式的,因为脚手架内会帮我们把eslint配置好。

创建项目

  • 创建一个测试文件夹:eslint_test

  • 初始化项目:npm init -y (创建 package.json)

ESLint安装

在项目中安装eslint包

npm i eslint -D


注意安装结果:node_moduels 中下载了很多包

  • .bin/eslint.cmd 脚本文件,内部通过 nodejs 执行 eslint运行包 的代码

  • @eslint包 用来规范 eslint配置文件

  • eslint开头的包 是 eslint运行包,包含eslint代码

详细总结前端必备的eslint知识点!

生成ESLint配置文件

ESLint 可以创建独立的配置文件 .eslintrc.js,也可以 直接在 package.json 中配置

vue-cli安装eslint默认将配置写在package.json文件中

详细总结前端必备的eslint知识点!

使用内置脚本实现配置文件的生成:

执行 node_modules/.bin 文件夹里的 eslint脚本创建配置文件

  • 包含完整脚本路径的命令: ./node_modules/.bin/eslint --init

  • 也可以用 npx 来执行 (推荐)

npx eslint --init


npx是随node一起安装的,能去 .bin 目录 里找 目标脚本文件,简化执行脚本的语法

创建配置文件过程中,需要选择配置:

详细总结前端必备的eslint知识点!

执行完毕后,会自动生成了配置文件 .eslintrc.js

详细总结前端必备的eslint知识点!

观察package.json,会发现此过程下载了若干相关规范包

主要是下载了 standard 语法规范包,而它需要 用到 import、node、promise 插件包

详细总结前端必备的eslint知识点!

使用ESLint检查js语法

npx eslint ./需要检查语法的文件路径


如果违法规范,会将错误提示到 终端,说明 eslint 工作正常

详细总结前端必备的eslint知识点!

ESLint配置解析

ESlint 被设计为完全可配置的,我们可以关闭每一个规则而只运行基本语法验证。有两种主要的方式来配置 ESLint:

注释法(不推荐): 使用 JavaScript 注释把配置信息直接嵌入到一个代码源文件中。

配置文件: 使用 JavaScript、JSON 或者 YAML 文件为整个目录和它的子目录指定配置信息,或者直接在 package.json 文件里的 eslintConfig 字段指定配置。

JavaScript配置的方式优先级最高

一个标准的eslint配置文件格式大致如下:

详细总结前端必备的eslint知识点!

eslint检测规则

ESLint 检测配置文件步骤:

  1. 在要检测的文件同一目录里寻找 .eslintrc.* 和 package.json;

  2. 紧接着在父级目录里寻找,一直到文件系统的根目录;

  3. 如果在前两步发现有 root:true 的配置,停止在父级目录中寻找 .eslintrc;

  4. 如果以上步骤都没有找到,则回退到用户主目录 ~/.eslintrc 中自定义的默认配置;

通常我们都习惯把 ESLint 配置文件放到项目根目录,因此可以为了避免 ESLint 校验的时候往父级目录查找配置文件,所以需要在配置文件中加上

 root: true


env节点

在ESLint 的各种规范中,一般都不允许使用未在页面内声明的成员,即使是一些运行环境自带的 api,如:

  • 浏览器中的 window/document

  • nodejs中的 __dirname

  • es2021中的 WeakRef

所以要告诉eslint,当前代码是运行在哪些环境中,这样检查时就不会报错了

   env: {
    //使用浏览器的内置变量,如window,
    browser: true,
    //使用node的内置变量,如__dirname
    commonjs: true,
    es2021: true
  },


可用的环境包括:

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

  • 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 全局变量。

globals节点

当访问当前源文件内未定义的变量时,no-undef 规则将发出警告。如,在jquery项目中,直接使用“$”就会报错。

因此,我们可以在ESLint 中定义这些全局变量,这样 ESLint 就不会发出警告了。

配置文件中:

   //自定义全局变量
  globals:{
    //自定义全局变量$,既可读又可改
    "$":true
  },


可选参数

参数名 释义 示例
writable 允许重写变量 "var1": "writable",
readonly 不允许重写变量 "var2": "readonly"

可以使用字符串 "off" 禁用全局变量。

{
    "env": {
        "es6": true
    },
    "globals": {
        "Promise": "off"
    }
}


由于历史原因,布尔值 false 和字符串值 "readable" 等价于 "readonly"。类似地,布尔值 true 和字符串值 "writeable" 等价于 "writable"。但是,不建议使用旧值。

Parser节点

ESLint 默认使用Espree作为其解析器,你可以在配置文件中指定一个不同的解析器,只要该解析器符合下列要求:

  1. 它必须是一个 Node 模块,可以从它出现的配置文件中加载。通常,这意味着应该使用 npm 单独安装解析器包。

  2. 它必须符合 parser interface

为了表明使用该 npm 模块作为你的解析器,你需要在你的 .eslintrc 文件里指定 parser 选项。

{
    "parser": "esprima",
    "rules": {
        "semi": "error"
    }
}

parserOptions 节点

注:此项配置是基于Parser节点的!不同的解析器,配置项可能不同!参考: vue-eslint-parser

ESLint 允许你指定你想要支持的 JavaScript 语言选项。默认情况下,ESLint 支持 ECMAScript 5 语法。

对于 ES6 语法,可以在配置文件内增加如下配置

{
    "parserOptions": {
        "ecmaVersion": 6,
    },
}

.eslintrc.js 文件示例:

{
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",   
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "rules": {
        "semi": "error"
    }
}
  • ecmaVersion - 默认设置为 3,5(默认), 你可以使用 6、7、8、9 或 10 来指定你想要使用的 ECMAScript 版本。你也可以用使用年份命名的版本号指定为 2015(同 6),2016(同 7),或 2017(同 8)或 2018(同 9)或 2019 (same as 10)

  • sourceType - 设置为 "script" (默认) 或 "module"(如果你的代码是 ECMAScript 模块)。

  • ecmaFeatures - 这是个对象,表示你想使用的额外的语言特性:


    • globalReturn - 允许在全局作用域下使用 return 语句

    • impliedStrict - 启用全局 strict mode (如果 ecmaVersion 是 5 或更高)

    • jsx - 启用 JSX

Processor节点

插件可以提供处理器,这意味着Processor都是调用插件中的内置处理器。

处理器可以预处理代码: 比如过滤掉一些不需要检测的js代码,然后交给rules去检验

若使用 processor 键,并使用由插件名和处理器名组成的串接字符串加上斜杠。例如,下面的选项启用插件 a-plugin 提供的处理器 a-processor:

{
    "plugins": ["a-plugin"],
    "processor": "a-plugin/a-processor"
}


注:

这里的Processor插件中的Processor是不一样的!

这里的Processor是指定调用哪个插件中的Processor,如果不指定插件,这句配置将失去意义!

插件中的Processor告诉 ESLint 如何处理 JavaScript 之外的文件。

要为特定类型的文件指定处理器,请使用 overrides 键和 processor 键的组合。例如,下面对 *.md 文件使用处理器 a-plugin/markdown。

{
    "plugins": ["a-plugin"],
    "overrides": [
        {
            "files": ["*.md"],
            "processor": "a-plugin/markdown"
        }
    ]
}


处理器可以生成命名的代码块,如 0.js 和 1.js。ESLint 将这样的命名代码块作为原始文件的子文件处理。你可以在配置的 overrides 部分为已命名的代码块指定附加配置。例如,下面的命令对以 .js 结尾的 markdown 文件中的已命名代码块禁用 strict 规则。

{
    "plugins": ["a-plugin"],
    "overrides": [
        {
            "files": ["*.md"],
            "processor": "a-plugin/markdown"
        },
        {
            "files": ["**/*.md/*.js"],
            "rules": {
                "strict": "off"
            }
        }
    ]
}

extends 节点

简介:

ESLint 检查时用哪些规范呢?通过这个节点可以配置使用 内置规范 还是 第三方规范。如使用第三方下载的 eslint-config-standard 规范

  // 扩展规则,使用第三方npm包
  extends: 'standard',

extends 属性值可以是:

  • 指定配置的字符串(配置文件的路径、可共享配置的名称、eslint:recommended 或 eslint:all)

  • 字符串数组:每个配置继承它前面的配置

extends 内置的规范有:

内置规范
eslint:recommended 值为 "eslint:recommended" 的 extends 属性启用一系列核心规则,核心规则参考eslint.bootcss.com/docs/rules/页面内的所有绿色对钩标记。
eslint:all 包含规则页面的所有规则

如何配置:

实际项目中配置规则的时候,不可能团队一条一条的去商议配置,太费精力了。通常的做法是使用业内大家普通使用的、遵循的编码规范;然后通过 extends 去引入这些规范。

extends 属性值可以是:

  • 指定配置的字符串(配置文件的路径、可共享配置的名称、eslint:recommended 或 eslint:all)

  • 字符串数组:每个配置继承它前面的配置

{
    extends: [
        'eslint:recommended',
        'plugin:vue/essential',
        'eslint-config-standard', // 可以缩写成 'standard'
        '@vue/prettier',
        './node_modules/coding-standard/.eslintrc-es6'
    ]
}

从上面的配置,可以知道 extends 支持的配置类型可以是以下几种

  • eslint 开头的:是 ESLint 官方的扩展;

  • plugin 开头的:是插件类型扩展,比如 plugin:vue/essential;

  • eslint-config 开头的:来自 npm 包,使用时可以省略前缀 eslint-config-,比如上面的可以直接写成 standard;

  • @开头的:扩展和 eslint-config 一样,只是在 npm 包上面加了一层作用域 scope;

  • 一个执行配置文件的相对路径或绝对路径;

那有哪些常用的、比较著名扩展可以被 extends 引入呢

  • eslint:recommended:ESLint 内置的推荐规则,即 ESLint Rules 列表中打了钩的那些规则;

  • eslint:all:ESLint 内置的所有规则;

  • eslint-config-standard:standard 的 JS 规范;

  • eslint-config-prettier:关闭和 ESLint 中以及其他扩展中有冲突的规则;

  • eslint-config-airbnb-base:airbab 的 JS 规范;

  • eslint-config-alloy:腾讯 AlloyTeam 前端团队出品,可以很好的针对你项目的技术栈进行配置选择,比如可以选 React、Vue(现已支持 Vue 3.0)、TypeScript 等;

Plugins节点

有的时候,内置的规则不能满足我们的要求,比如,对于vue文件,显然缺少对应的规则。这个时候,我们就可以使用插件来拓展规则了。

插件 是一个 npm 包,通常输出规则。一些插件也可以输出一个或多个命名的 配置。要确保这个包安装在 ESLint 能请求到的目录下。

注意: 插件是相对于 ESLint 进程的当前工作目录解析的。换句话说,ESLint 将加载与用户通过从项目 Node 交互解释器运行 ('eslint-plugin-pluginname') 获得的相同的插件。

如何配置插件

ESLint 相关的插件的命名形式有 2 种:不带命名空间的和带命名空间的,比如:

  • eslint-plugin- 开头的可以省略这部分前缀;

  • @开头的;

{
    plugins: [
        'jquery',          // 是指 eslint-plugin-jquery
        '@jquery/jquery',  // 是指 @jquery/eslint-plugin-jquery
        '@foobar',         // 是指 @foobar/eslint-plugin
    ]
}

当需要基于插件进行 rules 的配置的时候,需要加上插件的引用,比如:

{
    plugins: [
        'jquery',   // eslint-plugin-jquery
        '@foo/foo', // @foo/eslint-plugin-foo
        '@bar,      // @bar/eslint-plugin
    ],
    rules: {
        'jquery/a-rule': 'error',
        '@foo/foo/some-rule': 'error',
        '@bar/another-rule': 'error'
    },
}

rules 节点

使用内置规则

两个用法:

  • 不使用 extend 节点 配置 整套的规范,而是在 rules节点中直接配置

  • 使用 extend 节点 配置 整套的规范,在 rules节点中修改部分规范的配置 eg

{
    "rules": {
        "eqeqeq": "off",
        "curly": "error",
        "quotes": ["error", "double"]
    }
}

"off" 或 0 - 关闭规则

"warn" 或 1 - 开启规则,使用警告级别的错误:warn (不会导致程序退出)

"error" 或 2 - 开启规则,使用错误级别的错误:error (当被触发的时候,程序会退出)

使用插件规则

我们也可以使用插件中的规则,你必须使用 插件名/规则ID 的形式。比如:

{
    "plugins": [
        "vue"
    ],
    "rules": {
        "vue/rule1": "error"
    }
}

注意: 当指定来自插件的规则时,确保删除 eslint-plugin- 前缀。ESLint 在内部只使用没有前缀的名称去定位规则。

0条评论

您的电子邮件等信息不会被公开,以下所有项均必填

OK! You can skip this field.