ESLint + lint-staged 禁用老项目中的es6
前言
ESLint作为插件化的javascript代码检测工具，为我们的平时的开发保驾护航，好处就不多说了详情查看官网。
问题
有这么一个五年前开发的老项目，机缘巧合到了我们这边来维护。
项目是zepto撸起来的，单个文件巨大，只有gulp+公司内部古老的打包工具做了下简单的打包。
但是问题很严重的是，现在es6写习惯了，在老项目时总会有些地方会忽略掉直接用了es6的语法。
这种未经babel转译的代码，然而在当前的现状是大部分浏览器是可以运行的，
只有以蓝绿厂为代表的部分国产手机未支持。测试的时候没有进行全机型的覆盖。导致上线后出问题。在这样的背景下进行了讨论，怎么处理这种老项目。
解决方案
解决其实也很简单，无外乎下面三种
项目迁移
时间充足，迭代频繁的情况下，首选迁移，不然zepto写的文件太大太难维护了。基于现状就pass调这条了。
babel
既然是未转移的存在问题，转就完了。
语法检查
在提交之前，检测es6语法，确保不存在之后再允许提交。
权衡之下，选择了语法检查，顺带复习了下eslint的用法。
安装
//可以全局安装
npm i -g eslint
//或者项目本地安装
npm i -D eslint
安装之后，进行初始化(当然可以复用已有的.eslintrc.js)：
eslint --init
//非全局安装
./node_modules/.bin/eslint --init
//选择初始化类型 这里就看具体用途了
How would you like to configure ESLint? (Use arrow keys)
Use a popular style guide //已有的流行规范，大家比较推崇的几种
❯ Answer questions about your style // 回答问题来定制
Inspect your JavaScript file(s) // 检查已有js文件来生成
这里我直接选择了3，以为会比较友好的直接生成。
后面依次如下：
Which file(s), path(s), or glob(s) should be examined? ./js //待检测的目录
? What format do you want your config file to be in? JavaScript //配置文件即eslintrc.js的格式，当然是js喽
? Which version of ECMAScript do you use? ES5 //当前使用的ES5
? Where will your code run? Browser //浏览器
? Do you use CommonJS? Yes //CommonJS规范
? Do you use JSX? No //是否用了jsx，显然否
结束之后，生成了我们的配置文件：
//太长，只关注我们关心的部分吧
//环境部分就是自己选择的
"env": {
"browser": true,
"commonjs": true
},
// 扩展配置 eslint:recommended 是核心规则
"extends": "eslint:recommended",
// 支持的ECMAScript 规范，默认也是5
"parserOptions": {
"ecmaVersion": 5
},
// 检查规则，这里不详细表述
"rules": {
// ***
}
配置文件生成完成，那么直接干吧。直接执行看看：
// 检查 文件夹下面的文件
./node_modules/.bin/eslint ./js
然后报了1020个错误。。。毕竟是老项目，符合规范也不现实。但是我们的目的好像不像这么大费周章，只想禁用es6罢了。eslint提供了这个选项：直接false掉好了。rules其实我们不需要，因为是老项目，也不想去做这个限制。所以配置文件被我改成了这样。
"env": {
"es6":false
},
"parserOptions": {
"ecmaVersion": 5
},
"rules": {
}
这样跑起来看还行，只把文件中的es6部分找出来了
但是这样又有个问题，这个庞大的老项目有文件数目太多。每次都要去检查js文件夹下的所有文件是有点浪费的。毕竟我们有这个这样一个前提，这次未改动的认为是符合要求的(毕竟有问题也早被修复了)，应该只关注这次改动部分。这样想的人多了，就有大牛造出下面的工具了。
lint-staged
在commit之前的检测会更有意义一些，这样错误代码就不会提交到仓库。去检测所有文件很慢且有的结果是无关紧要的，你更改关心的是本次改动的内容。这就是lint-staged的用处。
安装及使用：
//切记lint-staged 和 husky要全部安装
npm install --D lint-staged husky
husky 可以阻止坏的commit, push and more。方便我们操作git hooks。
可以这样使用：
{
//自己手动hook
"scripts": {
"precommit": "npm test"
},
//使用husky
"husky": {
"hooks": {
"pre-commit": "npm test"
}
}
}
这里就提一下不要忘记安装这个工具，不然你会发现lint-staged配置完成之后没有起作用(我不想说我是怎么知道的。。。)，更多请移步github主页
用法也很简单，在我们的package中增加下配置就好
"scripts": {
"precommit": "lint-staged"
},
"lint-staged": {
"*.js": [
"eslint",
"git add"
]
}
这样，就是只检测本次commit中的js文件了。
那么结合lint-staged，我们可以配下我们的package.json
"scripts": {
"precommit": "lint-staged"
},
"lint-staged": {
"*.js": [
"eslint",
"git add"
]
}
结束
到这里，老项目禁止es6就完成了。简单测试下，覆盖还可以，起码常用的方法可以检测到。正好用到eslint+lint-staged，就大概看了下，巩固下原来不熟悉的地方，给自己也做个记录。希望能对有需要的同学有所帮助。
