使用ESLint和sublimeLinter实时检测前端项目代码规范性[增Atom配置]

问题描述

使用vue-cli来构建Vuejs应用的项目中默认安装了eslint-loader模块，eslint-loader模块是目前相对比较流行的代码检测工具，可以检测书写的代码是否符合统一规范，可以在一些比较大型的项目开发中统一开发人员的代码风格，这也就是为什么代码缩进有可能导致页面报错的原因。

不过若稍不小心的缩进错误就导致页面报错[如下图]，那开发调试效率可想而知了，有没有办法可以直接在编码的时候就发现这些小错误。答案是肯定的，以sublimeText编辑器为例，结合sublimeLinter插件让不规范的代码先知选觉。

ESLint

ESLint是一种用于识别ECMAScript/JavaScript代码格式错误的工具，目的是使代码更加规范和一致并避免错误。

SublimeLinter

SublimeLinter 是一个代码检查框架插件，功能非常强大，支持各种语言的检查。但是它本身并没有代码检查的功能，需要借助 ESLint 这样的特定语言检查支持。我们只需要使用对应的 SublimeLinter-contrib-eslint 插件即可

步骤

1. 全局安装ESLint

   npm install eslint -g

2. 全局安装babel-eslint。ESLint不支持Babel支持的一些语法节点。

   npm install babel-eslint –g

3. 配置sublime

通过package control安装SublimeLinter，在 Sublime text 中 Ctrl + Shift + p > Package Control:Install Package 里面搜索关键词 linter，选择”SublimeLinter”，注意别选成了 SummitLinter，另外安装完成以后退出重启r'j。若搜不到直接下载包到Sublime Text 3安装目录下：

cd '/path/to/Sublime Text 3/Packages'
git clone https://github.com/SublimeLinter/SublimeLinter3.git SublimeLinter

同理，安装SublimeLinter-contrib-eslint。

安装以后修改SublimeLinter配置文件。Preferences->PackageSettings->SublimeLinter->Settings-User:

"user": {
      "linters": {
            "eslint": { "@disable":false, "args": [], "excludes": [] }
      },
      ……
      "show_errors_on_save": true,  //为true时，保存文件时，会弹出该文件所有不规范的列表及具体规则名
      ……
      "mark_style": "outline",
      "no_column_highlights_line": false,
      "passive_warnings": false,
      "paths": {
          "linux": [],
          "osx": [],
          "windows": ["C:/Users/<youUserName>/AppData/Roaming/npm/eslint.cmd"] //全局安装ESLint生成的eslint.cmd的目录
      },
      "python_paths": {
          "linux": [],
          "osx": [],
          "windows": []
      }
}

4.配置ESLint验证规则（可以到ESLint官网自己配置rule）

到项目根目录下面使用 eslint 命令交互式的生成配置文件

生成的配置文件如下

查看效果

在编辑器中已经可以看到代码格式不规范的地方了！

ESLint规则详解

       "quotes": [0, "single"],                  //建议使用单引号
       "no-inner-declarations": [0, "both"],     //不建议在{}代码块内部声明变量或函数
       "no-extra-boolean-cast":1,               //多余的感叹号转布尔型
       "no-extra-semi": 1,                       //多余的分号
       "no-extra-parens": 1,                     //多余的括号
       "no-empty": 1,                            //空代码块
       "no-use-before-define": [1, "nofunc"],    //使用前未定义
       "complexity": [1, 10],                    //圈复杂度大于10 警告

       //常见错误
       "comma-dangle": [2, "never"],             //定义数组或对象最后多余的逗号
       "no-debugger": 2,                         //debugger 调试代码未删除
        "no-constant-condition":2,               //常量作为条件
       "no-dupe-args": 2,                        //参数重复
       "no-dupe-keys": 2,                        //对象属性重复
       "no-duplicate-case": 2,                   //case重复
       "no-empty-character-class": 2,            //正则无法匹配任何值
       "no-invalid-regexp": 2,                   //无效的正则
       "no-func-assign": 2,                      //函数被赋值
       "valid-typeof": 2,                        //无效的类型判断
       "no-unreachable": 2,                      //不可能执行到的代码
       "no-unexpected-multiline": 2,             //行尾缺少分号可能导致一些意外情况
       "no-sparse-arrays": 2,                    //数组中多出逗号
       "no-shadow-restricted-names": 2,          //关键词与命名冲突
        "no-undef": 2,                            //变量未定义
       "no-unused-vars": 2,                      //变量定义后未使用
       "no-cond-assign": 2,                      //条件语句中禁止赋值操作
       "no-native-reassign": 2,                  //禁止覆盖原生对象

       //代码风格优化
       "no-else-return": 1,                      //在else代码块中return，else是多余的
       "no-multi-spaces": 1,                     //不允许多个空格
       "key-spacing": [1, {"beforeColon": false,"afterColon": true}],//object直接量建议写法 : 后一个空格前面不留空格
       "block-scoped-var": 2,                    //变量应在外部上下文中声明，不应在{}代码块中
       "consistent-return": 2,                   //函数返回值可能是不同类型
       "accessor-pairs": 2,                      //object getter/setter方法需要成对出现
       "dot-location": [2, "property"],          //换行调用对象方法  点操作符应写在行首
       "no-lone-blocks": 2,                      //多余的{}嵌套
       "no-empty-label": 2,                      //无用的标记
       "no-extend-native": 2,                    //禁止扩展原生对象
       "no-floating-decimal": 2,                 //浮点型需要写全 禁止.1 或 2.写法
       "no-loop-func": 2,                        //禁止在循环体中定义函数
       "no-new-func": 2,                         //禁止new Function(...) 写法
       "no-self-compare": 2,                     //不允与自己比较作为条件
       "no-sequences": 2,                       //禁止可能导致结果不明确的逗号操作符
       "no-throw-literal": 2,                    //禁止抛出一个直接量 应是Error对象
       "no-return-assign": [2, "always"],        //不允return时有赋值操作
       "no-redeclare": [2, {"builtinGlobals": true}],//不允许重复声明
       "no-unused-expressions": [2, {"allowShortCircuit":true, "allowTernary": true}],//不执行的表达式
       "no-useless-call": 2,                     //无意义的函数call或apply
       "no-useless-concat": 2,                   //无意义的string concat
       "no-void": 2,                             //禁用void
       "no-with": 2,                             //禁用with
       "space-infix-ops": 2,                     //操作符前后空格
       "valid-jsdoc": [2, {"requireParamDescription": true,"requireReturnDescription": true}],//jsdoc
       "no-warning-comments": [2, { "terms":["todo", "fixme", "any other term"],"location": "anywhere" }],//标记未写注释
       "curly": 1                                //if、else、while、for代码块用{}包围

延伸阅读

---

在Atom中配置

# 安装linter 和 linter-eslint
# 需要配置环境变量（C:\Users\<youPCName>\AppData\Local\atom\bin）后才能使用apm命令
# 或者在setting中安装
$ apm install linter linter-eslint
# 安装完重启Atom

此时已经能开到代码错误提示

校验.vue文件中的 JS 代码

此时只有.js文件能被校验，.vue中的<script>代码块还不能校验， 点击atom菜单栏的File-> Settings -> Packages -> Community Packages -> 找到 linter-eslint 插件，点击 Settings -> 勾选 Lint HTML Files,可以看到.vue文件的错误提示了。

忽略main.js文件

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})