ESLint 配置

2020-05-06  本文已影响0人  前白

ESLint 被设计为完全可配置的,这表示我们可以关闭每一个规则,而只运行基本语法验证,或混合和匹配 ESLint 默认绑定的规则和自定义规则,以让 ESLint 更适合我们的项目。

配置 ESLint有如下两种方式:

配置文件

一般每个项目下都有一而个package.json文件,这个文件定义了项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。可以手动创建这个文件或者直接使用npm init命令自动生成。npm install命令回根据这个配置文件,自动下载所需的模块,也就是配置项目所需的运行和开发环境。

然后我们可以开始创建配置文件.eslintrc,生成配置文件的命令如下所示:

$ eslint --init

如果我们选择的本地安装,那么则需要进入到node_modules/.bin目录来该执行命令:

$ cd node_modules/.bin
$ eslint --init
示例:

我们可以在终端中输入命令执行上述命令:

如图所示,会以问答的形式生成来配置文件,我们可以根据自己的需求来选择,出现如下图所示提示则表示文件创建成功:

生成的.eslintrc.js文件内容大致如下所示:

module.exports = {
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/essential"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    "rules": {
    }
};

文件中有如下几个配置项:

运行ESLint

配置文件创建成功后,我们可以使用ESLint命令来测试文件。注意要在.bin目录下,执行eslint命令:

$ cd node_modules/.bin
$ eslint filename.js

其中filename.js就是需要测试的文件名,记得要在.bin目录下运行eslint命令。

示例:

例如我们创建一个用于测试的add.js文件,文件内容如下所示:

function add(i) {
  if (i != NaN) {
      return i ++
  } else {
    return
  }
};

然后在终端中执行eslint add.js,可以看到输出 3个错误:

例如第一个错误no-unused-vars表示禁止使用未使用的变量。第二个错误use-isnan表示在在检查“NaN”时需要调用isNaN()。第三个错误no-extra-semi表示不允许不必要的分号。

配置文件格式

ESLint 支持几种格式的配置文件:

如果同一个目录下有多个配置文件,ESLint 只会使用一个。优先级顺序如下:

.eslintrc.js
.eslintrc.yaml
.eslintrc.yml
.eslintrc.json
.eslintrc
package.json  

链接:https://www.9xkd.com/

上一篇 下一篇

猜你喜欢

热点阅读