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，就大概看了下，巩固下原来不熟悉的地方，给自己也做个记录。希望能对有需要的同学有所帮助。