ESLint

Posted 无花即无果

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ESLint相关的知识,希望对你有一定的参考价值。

ESLint是一个用来识别 ECMAScript 并且按照规则给出报告的代码检测工具,使用它可以避免低级错误和统一代码的风格。ESLint被设计为完全可配置的,主要有两种方式来配置ESLint:

  • 在注释中配置:使用javascript注释直接把配置嵌入到JS文件中。
  • 配置文件:使用下面任一的文件来为全部的目录和它的子目录指定配置信息。
    • javascript:使用.eslintrc.js文件并导出一个包含配置的对象。
    • YAML:.eslintrc.yaml或者.eslintrc.yml
    • JSON:.eslintrc.json,并且此文件允许使用JS形式的注释
    • 废弃的用法:.eslintrc,此文件可以是JSON或者YAML
    • package.json:在package.json文件中创建eslintConfig属性,所有的配置包含在此属性中。

这些文件的优先级则是按照以上出现的顺序(.eslintrc.js > .eslintrc.yaml > .eslintrc.yml > .eslintrc.json > .eslintrc > package.json)。

可以被配置的信息主要分为3类:

  • Environments:你的 javascript 脚步将要运行在什么环境(如:nodejs,browser,commonjs等)中。
  • Globals:执行代码时脚步需要访问的额外全局变量。
  • Rules:开启某些规则,也可以设置规则的等级。

安装


  • 全局安装
npm i -g eslint
  • 局部安装(推荐)
npm i -D eslint

安装完毕后,接下来新建一个配置文件.eslintrc.js,或者使用如下的命令行来自动生成。

eslint --init

配置


指定执行环境

JavaScript 代码可以运行在浏览器或 nodejs 等环境中,每个环境的全局变量都不尽相同(如 nodejs 中没有 DOM 相关的全局变量)。在配置文件中可以自由的指定执行环境。

// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    node: true,
  },
};

所有的环境可以在官网上查询。

指定全局变量

可以在配置文件或注释中指定额外的全局变量,false表明变量只读:

  • 注释:
/* global var1, var2 */
/* global var1:false, var2:false */
  • js 文件:
// .eslintrc.js
module.exports = {
  globals: {
    var1: true,
    var2: true,
  },
};

规则

在配置文件中可以设置一些规则。

这些规则的等级有三种:

  • "off" 或者 0:关闭规则。
  • "warn" 或者 1:打开规则,并且作为一个警告(不影响exit code)。
  • "error" 或者 2:打开规则,并且作为一个错误(exit code将会是1)。

例如:

  • js 文件
// .eslintrc.js
module.exports = {
  rules: {
    eqeqeq: ‘off‘,
    curly: ‘error‘,
  },
};
  • 注释文件
/* eslint eqeqeq: "off", curly: "error" */
/* eslint eqeqeq: 0, curly: 2 */

也可以在注释中关闭所有或者某个规则:

/* eslint-disable */
/* eslint-enable */

/* eslint-disable no-alert, no-console */
/* eslint-enable no-alert, no-console */

具体的规则可以在官网上找到,或者使用别人写好的配置,例如eslint-config-airbnb

使用方法


通过命令行工具来使用 eslint 。

eslint [options] file.js [file.js] [dir]

除了使用命令行还可以配合 webpack 或者配合编辑器的插件(如vscode-eslint)来使用

 

以上是关于ESLint的主要内容,如果未能解决你的问题,请参考以下文章

vue + eslint + prettier 代码检测(自动修复)

在VSCode中配置代码自动 eslint 格式化(修改eslint规则eslint忽略文件)

markdown [ESLint js] Js代码检查器#eslint #js

我是如何在公司项目中使用ESLint来提升代码质量的

gitlab ci 集成 eslint/prettier/tsc 做代码审查,并使用 eslint 输出作为显示代码质量

ESLint