使用Eslint来规范你的代码

作为一个前端开发er，写的代码最多的估计是javascript了，由于javascript语言本身的特性，写代码时是相当的灵活，写起来很爽，但就很容易踩坑，很多的坑往往都是由于代码不规范引起的，比如比较常见的一个错误是xx is undefined。为了避免代码不规范引起的错误，以及能让我们写出漂亮的代码，就出现了很多的代码检测工具，比较常用的有JSLint，JSHint，JSCS和ESLint。针对这些工具，今天就不做对比了，今天主要介绍的是ESLint。

1. 安装

使用npm进行全局安装

npm install -g eslint

2.设置配置文件

使用如下命令设置一个配置文件

eslint --init

执行完后，会在目录下生成一个.eslintrc.js，如下所示：

module.exports = {
    "env": {//指定想启用的环境，
        "browser": true,//浏览器环境
        "es6": true//es6环境
    },
    "extends": "eslint:recommended",//启用一系列核心规
    "globals": {//脚本在执行期间访问的额外的全局变量
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaVersion": 2018//用来指定es的版本号
    },
    "rules": {//启用的规则及其各自的错误级别
    }
};

如果创建的项目没有package.json文件，需要先用npm init创建一个package.json文件。

3.执行

使用eslint 文件.js命令来检测js文件，如果检测到有不符合规范的，将在控制台输入错误信息，如下所示：

  1:10  error  'EslintDemo' is defined but never used  no-unused-vars
  2:14  error  'add' is defined but never used         no-unused-vars

JS文件的代码是这样的：

function EslintDemo() {
    function add(a,b) {
        var result = a + b;
        return result;
    }
}

4.webstorm开启eslint

webstorm自带了eslint，只需开启就行了，具体如下所示：

webstorm.png

但是开启后，webstorm会报错

TypeError: this.CliEngine is not a constructor

碰到这样的错误时，需要修改/languageService/eslint/bin/eslint-plugin.js文件。如下所示：

//this.CliEngine = require(this.basicPath + "lib/cli-engine");
this.CliEngine = require(this.basicPath + "lib/cli-engine").CLIEngine;

修改后重启webstorm

5.eslint验证规则

eslint中验证规则有很多，这里主要介绍一些常见的规则。设置规则的开启与关闭是在.eslintrc.js中修改rules的相关属性，下面是vue.js默认生成的一些规则：

rules: {
    // 强制 generator 函数中 * 号周围使用一致的空格
    'generator-star-spacing': 'off',
    // 禁用 debugger
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }

• "off" 或 0 - 关闭规则
• "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
• "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
  常用验证规则

• semi： 要求或禁止使用分号代替 ASI，比如在开启该规则后，如果在代码结束行后加了分号，将提示错误。
• comma-dangle：要求或禁止末尾逗号。比始在{}后面添加了逗号，将提示错误。
• comma-spacing：强制在逗号前后使用一致的空格。比如定义一个数组：var arr = [1, 2, 3, 4]，如果在逗号后没加空格，将报错。
• no-unused-vars：禁止出现未使用过的变量。定义的变量，如果没使用过，将提示错误。
• space-infix-ops：要求操作符周围有空格，比如for循环for (var i = 0; i ，在<的前后没有空格时，将提示错误。
• space-before-blocks：强制在块之前使用一致的空格。比如for循环for (var i = 0; i 的{前没有空格时，将提示错误。
• no-redeclare：禁止多次声明同一变量。在同一作用域类重复申明同样的变量会提示错误。
• indent：强制使用一致的缩进。
• spaced-comment：强制在注释中 // 或 /* 使用一致的空格。// 前面要有空格

先介绍一些常用的，其它的可以在官方文档中查看。
个人博客