在Sublime Text中使用代码规范检查工具

背景

无规矩不成方圆，业内已存在合理和规范的前端开发标准，合理的使用检查工具能够节约时间成本，同时养成优秀的代码习惯。本文所述的配置基于Sublime Text编辑器，基于Code Guide前端开发规范文档; 本文目前只涉及js代码规范检查，核心内容是Eslint工具的使用以及结合Sublime Text的配置。

准备工作

去百度搜索完成Sublime Text 3的安装和配置
安装和学习使用nodejs，参考Nodejs的安装和配置（Windows）)

核心内容

Eslint简介

Eslint由 JavaScript 红宝书作者 Nicholas C. Zakas 编写， 2013 年发布第一个版本。 NCZ 的初衷不是重复造一个轮子，而是在实际需求得不到 JSHint 团队响应的情况下做出的选择：以可扩展、每条规则独立、不内置编码风格为理念编写一个 lint 工具。

ESLint 主要有以下特点：
```
默认规则包含所有 JSLint、JSHint 中存在的规则，易迁移；
规则可配置性高：可设置「警告」、「错误」两个 error 等级，或者直接禁用；
包含代码风格检测的规则（可以丢掉 JSCS 了）；
支持插件扩展、自定义规则。
```

安装Eslint

使用nodejs的npm工具全局安装，语法如下：
```
npm install eslint -g
```

配置Eslint代码风格

在项目或工程的的根目录新建.eslintrc.js文件，基于Code Guide前端开发规范文档JAVASCRIPT部分的规范, 文件内容建议如如下：

module.exports = {
    "env": {
        "browser": true
    },
    "extends": "eslint:recommended",
    "rules": {
        "camelcase": 2, // 强制驼峰法命名
        "id-match": 2, // 禁止重复定义
        "indent": [2,"tab"], // 缩进采取Tab
        "semi": [2, "always"], // 语句强制分号结尾
        "quotes": [2,"single"], // 引号类型 单引号
        "no-dupe-args": 2,// 函数参数不能重复
        "curly": [2, "all"],//必须使用 if(){} 中的{}
        "one-var":2, // 语句块不允许出现连续两个var
        "vars-on-top": 2, // 定义的变量必须在作用域的顶部
        "newline-after-var": 2, // 定义完变量必须换一行
        "space-before-blocks": [2, "always"],//不以新行开始的块{前面要不要有空格
        "space-before-function-paren": [2, "never"],//函数定义时括号前面要不要有空格
        "no-spaced-func": 2,//函数调用时 函数名与()之间不能有空格
        "space-in-parens": [2, "never"],//小括号里面要不要有空格
        "space-infix-ops": 2,//中缀操作符周围要不要有空格
        "space-unary-ops": [2, { "words": true, "nonwords": false }],//一元运算符的前/后要不要加空格
        "spaced-comment": 2,//注释风格要不要有空格什么的
        "no-multiple-empty-lines": [1, {"max": 2}],//空行最多不能超过2行
        "operator-linebreak": [2, "after"],// 换行时运算符在行尾还是行首
        "no-unneeded-ternary": 2,//禁止不必要的嵌套 var isYes = answer === 1 ? true : false;
        "no-unreachable": 2,// 不能有无法执行的代码
        "default-case": 2,//switch语句最后必须有default
        "no-sequences": 0,//禁止使用逗号运算符
        "no-empty": 2,// 块语句中的内容不能为空
        "no-eq-null": 2, // 禁止对null使用==或!=运算符
        "eqeqeq": 2,//必须使用全等
        "use-isnan": 2,// 禁止比较时使用NaN，只能用isNaN()
        "no-underscore-dangle": 2, //标识符不能以下划线开头
        "no-undef": 2, // 不能有未定义的变量
        "no-use-before-define": 2,// 未定义前不能使用
        "no-unused-vars": [1, {"vars": "all", "args": "after-used"}],// 不能有声明后未被使用的变量或参数 
        "no-alert": 1, // 警告弹窗
        "no-console": 1, // 警告控制台输出
        "no-debugger": 1, // 警告debugger
        "no-trailing-spaces": 1, //一行结束后不能有空格
        "eol-last": 0, //文件以单一的换行符结尾
        "padded-blocks": 0,//块语句内行首行尾是否要空行
    }
};

检查代码规范

在项目或工程的根目录打开CMD，使用如下语法检查指定文件
```
eslint --fix [file.js][dir]
```
例如
```
eslint --fix js\leave_timepicker.js
```

此操作会通过控制台输出检查出来的错误信息，错误信息包含行数以及错误的原因，但是不够智能，我们要达到在日常代码编辑的过程中达到提示和修复的功能，就需要将Eslint集成到Sublime Text编辑器啦

集成Sublime Text

在 Sublime Text 中你需要安装两个插件：
1. 安装 SublimeLinter
  调出package control搜索SublimeLinter进行安装
2. 安装 SublimeLinter-contrib-eslint
  调出package control搜索eslint安装即可，全名：SublimeLinter-contrib-eslint。
  注意：该插件只支持Sublime text 3
  
  关闭编辑器，再打开编辑器, 导入项目。
  打开任意js文件，右键->SublimeLinter->LintMode->点击Save Only, 设置为在文件进行保存操作后检查的模式。

以上，请享用Eslint带来的便利。