支付宝小程序开发工具 ESLint

2018-10-10 11:18 更新

很多开发者都反馈近期 IDE 升级后,出现很多红色的波浪线提示,这些提示其实都来自于 ESLint;在这里我简单介绍什么是 ESLint,以及为什么我们要推广 ESLint

Why ESLint

大家都知道,JavaScript 是一门非常灵活的语言,往往实现一个功能会有很多种写法。然后这种灵活性也给我们带来了很多问题,ESLint 作为一个语法风格检查工具,除了可以让你的代码更一致,易读以外,也会提供一些最佳实践的提示,帮助规避一些常见的 Bugs

举例而言,我们都知道在 JS 中给未声明的变量赋值时,其实是声明了一个全局变量:

a = 123; // 当你忘记使用 var 时,很有可能是创建了一个全局变量 a

通过 ESLint,我们可以第一时间发现这个错误:

什么是 ESLint

ESLint & ES2015

很多人都听说过,Brendan Eich 当年仅仅花了 10 天时间开发了 JavaScript 这门语言,他也许完全没有想到 JS 会发展到今天,成为时下最流行的语言之一。虽然这在业界称为了一段佳话,但是由于早期 JavaScript 的定位与今日完全不同,导致其设计上有很多不如意的地方,一直以来备受业界的吐槽,每个学习 JS 的开发者估计都会知道一堆该如何规避xx问题的最佳实践

为了解决这些问题,这几年 JS 的语法一直在不断的优化中,于是有了大家经常听到的 ES6(ES2015)ES7(ES2016) 等等,新的语法不仅更加简洁,尤其去掉了很多旧语法中的糟粕。

举例而言,我们以前经常会遇到 for-loop 中闭包引用的问题:

var funcs = [];
for (var i = 0; i < 3; i++) {      // let's create 3 functions
  funcs[i] = function() {          // and store them in funcs
    console.log("My value: " + i); // each should log its value.
  };
}
for (var j = 0; j < 3; j++) {
  funcs[j]();                      // and now let's run each one to see
}

执行这段代码后输出的是:

My value: 3
My value: 3
My value: 3

我们在 ESLint 规则中默认配置的 ES2015+,鼓励大家使用新的语法,比如你再用 var 的时候 ESLint 会提示你使用 let or const 代替。

ESLint

进一步了解 ES2015,大家可以看下阮一峰的 ECMAScript 6 入门

ESLint 规则

我们默认配置的 ESLint 为 airbnb 的规则,是业界主流的标准。具体的规则详见 Airbnb JavaScript Style Guide

当然,你也可以在其基础上做一些自定义的调整,在新建的项目中我们提供一个 .eslintrc 文件,其内容为:

{
  // 请不需要修改 extends
  "extends": ["airbnb-base", "appx"],


  // 根据需要修改 rules,详见 http://eslint.org/docs/rules/
  // 推荐的编码风格 https://github.com/airbnb/javascript
  "rules": {
    "arrow-body-style": [0],
    "class-methods-use-this": [0],
    "consistent-return": [0],
    "generator-star-spacing": [0],
    "global-require": [0],
    "import/extensions": [0],
    "import/first": [0],
    "import/no-extraneous-dependencies": [0],
    "import/prefer-default-export": [0],
    "import/no-unresolved": [0],
    "import/no-absolute-path": [0],    
    "linebreak-style": [0],
    "no-bitwise": [0],
    "no-cond-assign": [0],
    "no-console": [0],
    "no-else-return": [0],
    "no-nested-ternary": [0],
    "no-restricted-syntax": [0],
    "no-trailing-spaces": [0],
    "no-use-before-define": [0],
    "no-useless-escape": [0],
    "prefer-template": [0],
    "require-yield": [1]
  }
}

目前还不支持自定义 extends,大家如果觉得 airbnb 的规则太过严格,可以把不需要的规则设为 [0],类似 "no-console": [0],(在 airbnb 的规则中不推荐大家在生产环境使用 console,也就是调试时可以写,但是生产环境建议去掉,我们觉得这条太严格了,在这里将其注释了,大家可以参考调整自己偏好的规则)

另外,针对一些对齐的问题,大家可以直接在编辑器中右键 format 下,至少可以去掉部分红线。

后记

ESLint 的作者是 Nicholas C. Zakas,相信做前端的同学都知道,他编写了《Maintainable JavaScript | 编写可维护的 JavaScript》、《Professional JavaScript for Web Developers | JavaScript 高级程序设计》、《High Performance JavaScript | 高性能 JavaScript》,我们非常感谢这位大牛为业界的付出。

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号