开发中常见开发工具的ESlint代码校验工具的配置

开发中常见开发工具的ESlint代码校验工具的配置

现在这个项目使用vue+webpack开发的，因为开发人员很多，然后组长就引入了ESlint来规范我们的代码。

- 安装

一般都是在本项目中安装，不过想全局安装也是可以的。

在我看来，如果只是自己本地开发玩玩，或者学习，那就全局安装，这样就不需要开发每个项目时都重新安装一遍。

npm i -g eslint (全局安装)

一般开发人员参与较多，是推荐局部安装的，这样直接在package.json中配置，其他开发人员在拉版本的时候，只需要npm i 一下就ok了。

npm install eslint -save-dev (在项目的package.json中直接配置)

- 初始化

*安装完毕后进行初始化

eslint –init

这样会在动生成一个.eslintrc.js文件。自己手动新建一个也是可以的，载项目根目录下

-指定执行环境

// .eslintrc.js
module.exports = {
env: {
browser: true, //表示在浏览器中可以执行
node: true, //在node环境中执行
},
};

还有很多环境可以自己去网上查

- 指定全局变量

• 使用注释来配置
  可以在配置文件或注释中指定额外的全局变量，false表明变量只读：

  /* global var1, var2 */
  /* global var1:false, var2:false */

• 使用配置文件来配置

// .eslintrc.js
module.exports = {
globals: {
var1: true,
var2: true,
},
};

---

规则

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

这些规则的等级有三种：

• “off” 或者 0：关闭规则。
• “warn” 或者 1：打开规则，并且作为一个警告（不影响exit code）。
• “error” 或者 2：打开规则，并且作为一个错误（exit code将会是1）。

例如：

// .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]

编辑器

• WebStorm中引用eslint
  

file –> Settings( Default Settings) –> 搜索eslint –> 勾选Enable –> 指定文件ESlint package目录（示例：C:\Users\gary\node_modules\eslint）

假如全局安装（路径在appdata里面，可通过在开始菜单中%appdata%回车查看 路径：C:\Users\gary\AppData\Roaming\npm\node_modules\eslint）
-运行程序 node server.js
-重启webstorm