一、ESLint学习之初试

发表于 | 分类于 |

简介

中文官网：http://eslint.cn/

ESLint 是一个开源的 JavaScript 代码检查工具，由 Nicholas C. Zakas 于2013年6月创建。

JavaScript 是一个动态的弱类型语言，在开发中比较容易出错。因为没有编译程序，为了寻找 JavaScript 代码错误通常需要在执行过程中不断调试。像 ESLint可以让程序员在编码的过程中发现问题而不是在执行的过程中。

ESLint 使用 Node.js 编写。

特点

  • ESLint 的所有规则都被设计成可拔插的，可以开启或关闭（没有什么可以被认为“太重要所以不能关闭”）。
  • 你可以在使用过程中自定义规则。
  • 每条规则都可以将结果设置成警告或者错误。
  • 通过丰富文档减少沟通成本

参考：http://eslint.cn/docs/about/

第一个ESLint的配置

1
2
3
4
5
$ mkdir lesson02
$ cd lesson02
$ yarn init -y  //选择yarn包管理进行项目初始化，你当然也可以使用npm
$ yarn add -D eslint  // 安装
$ npx eslint  //可以查看所有的指令

运行命令npx eslint --init，（注意，使用win命令行执行，用git bash会报错）进行运行配置初始化向导。你最好是使用npx，否则的话你要这样做：$ ./node_modules/eslint/bin/eslint.js，这样就非常麻烦。使用npx可以很方便的做到，关于npx的更多用法详见阮一峰npx。

之后进行一些初始化的配置👇

完成之后会多出来一个.eslintc.js文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
module.exports = {
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "extends": "eslint:recommended",
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "rules": {
    }
};

新建一个/src/test.js文件，然后通过命令npx eslint test.js来进行eslint的语法检测👇

可以发现，在编写的过程中就已经提示有错误信息，说’a’ is assigned a value but never used.eslint(no-unused-vars)，即变量a被声明分配了空间资源但从未被使用过。然后用命令npx eslint test.js来进行eslint的语法检测，显示同样的错误。

在该js文件中使用console.log也会报错。

1
2
3
//test.js
var a = 123;
a = a + 2;

这样也会报错，a’ is assigned a value but never used.eslint(no-unused-vars)。eslint真的很严格。那我再改一下：

1
2
3
var a = 123;
a = a + 2;
alert(a)

这下就不报错了。

类似的我再新建一个/src/util.js：

1
2
3
function sum(a, b) {
    return a + b;
}

如果我想测试所有的js文件，那么我可以使用*.js来代替一个一个的文件名字，像下面这样👇

我还可以在package.json文件中配置好eslint的检测指令👇

1
2
3
4
5
6
7
8
9
10
11
12
{
  "name": "lesson02",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "eslint": "eslint ./src/*.js"
  },
  "devDependencies": {
    "eslint": "^6.8.0"
  }
}

然后在命令行执行yarn eslint就可以进行测试：

这样，我们就完成了一个简单的eslint的检测。