深入理解 JavaScript 特性 (5):ECMAScript 和 JavaScript 的未来 1.3.2

阅读数:8 2019 年 11 月 24 日 22:21

深入理解JavaScript特性(5):ECMAScript和JavaScript的未来 1.3.2

(使用 ESLint 提高代码质量和一致性)

内容简介
本书旨在让读者轻松学习 JavaScript 的新进展,包括 ES6 及后续更新。书中提供了大量实用示例,以循序渐进的方式讲解了异步函数、对象解构、动态导入及异步生成器等内容。本书不仅介绍了箭头函数、解构、模板字面量以及其他语法方面的新元素,还全面展示了 ES6 引入的流程控制机制,以及如何高效地简化自己的代码。本书的讨论还涉及 ES6 内置的新集合类型、使用代理控制属性访问、ES6 中内置 API 的改进、CommonJS 与 ECMAScript 模块的互用性等方面。

开发项目时,我们会发现冗余或无用的代码,编写很多新代码,删除无关或没必要的功能,也会为适应新架构而来回搬运代码。随着代码越写越多,团队规模也会随之变化。刚开始可能只有几个人,甚至只有一个人,但随着项目规模越来越大,参与编码的人也会越来越多。

代码检查工具可以帮助我们发现语法错误。现代检查工具通常都是可定制的,允许我们建立适合自己团队的代码约定。坚守一致的代码风格和质量基准可以使团队的编码风格趋于一致。不同的团队成员可能会对代码风格有不同的意见,但有了代码检查工具和协商一致的配置后,这些意见就变成了明确可遵循的规则。

首先是确保程序能被解析,其次可能要防止 throw 抛出字符串字面量作为异常,或者不允许在生产环境中使用 console.logdebugger 语句。然而,要求所有函数调用都只能有一个参数就有点过了。

虽然代码检查工具能够定义并强制推行一种编码风格,但定义规则时也不能太任性。如果规则太严格,可能会影响开发效率,得不偿失。反之,规则太宽松的话,代码就不能保持统一风格。

要想把握好这个度,就应该尽量不使用多数情况下都不能改善程序的规则。新增一条规则时,应当扪心自问,添加它能否显著改善现有代码库以及未来的新代码?

ESLint 是一个现代代码检查工具,它集合了一些插件,具有不同的规则,支持自定义。我们可以决定不遵守规则时是输出警告还是导致停机错误。与安装 babel 一样,我们也可以通过 npm 安装 eslint

复制代码
npm install eslint@3 --save-dev

接下来我们需要配置 ESLint。因为本地安装了 eslint,所以可以在 node_modules/.bin 中找到它的命令行工具。执行以下命令能够引导我们配置 ESlint。首先,告诉它我们想使用一套流行的风格,然后选择 Standard1,最后选择 JSON 格式的配置文件。

1 注意,Standard 是一种自我宣告,并未由任何官方组织进行实际的标准化。其实,只要能够保持统一,使用哪种风格并不重要。在阅读项目代码时,一致性有助于减少困扰。Airbnb 风格指南也是很受欢迎的,与 Standard 不同,它默认不可省略分号。

复制代码
./node_modules/.bin/eslint --init
? How would you like to configure ESLint?
Use a popular style guide
? Which style guide do you want to follow? Standard
? What format do you want your config file to be in? JSON

除了个别规则,eslint 还支持扩展预定义规则,这些规则以 Node.js 包的形式存在。在多项目甚至社区中共享配置时,这会很方便。选择 Standard 后,可以看到 ESLint 向 package.json 中添加了一些依赖,即包含预设 Standard 规则的包,同时创建了一个名为 .eslintrc.json 的文件,其中包含以下内容。

复制代码
{
"extends": "standard",
"plugins": [
"standard",
"promise"
]
}

直接引用包含 npm 实现细节的 node_modules/.bin 目录并不好。虽然前面初始化 ESLint 配置时这么引用了,但其实应该避免这样做,而且检查代码时也不应该每次都那么输入一遍。为此,我们在 packge.json 中添加一个脚本命令。

复制代码
{
"scripts": {
"lint": "eslint ."
}
}

前面安装 Babel 时提到过,npm run 在执行脚本命令时会将 node_modules 加入 PATH 环境变量。这样一来,在检查代码时,只要执行 npm run lintnpm 就会在 node_modules 目录中找到 ESLint CLI。

我们来看看以下的示例文件 example.js,其中的代码故意没有遵守规则,以演示 ESLint 具体做了什么。

复制代码
var goodbye='Goodbye!'
function hello(){
return goodbye}
if(false){}

执行 lint 脚本命令时,ESLint 会标识文件中所有错误的地方,如图 1-2 所示。

深入理解JavaScript特性(5):ECMAScript和JavaScript的未来 1.3.2

图 1-2:ESLint 可以帮助我们检查语法错误,保持代码风格统一

如果在执行命令时传递 --fix 参数,那么 ESLint 能够自动修复大多数的风格问题。在 package.json 中加入以下脚本命令。

复制代码
{
"scripts": {
"lint-fix": "eslint . --fix"
}
}

此时执行 lint-fix 只会看到两个错误:未使用 hello 以及 false 是一个不变的条件。其他错误都已经修复了,结果如以下代码所示。上述两个错误没有修复,因为 ESLint 会保持中立,不对代码语义做预设推断,以免导致语义改变。这样一来,--fix 就能帮助我们有效解决编码风格问题,同时又不会破坏逻辑。

复制代码
var goodbye = 'Goodbye!'
function hello() {
return goodbye
}
if (false) {}

prettier 也是一种代码检查工具,可用于自动格式化代码。我们可以配置 prettier 自动重写代码,以确保代码遵循设定的首选项,如使用给定的空格缩进,统一使用单引号或双引号,末尾自动加逗号,或者限制最大行长度。

现在我们知道了如何将现代 Javascript 代码编译成每个浏览器都能理解的代码,以及如何正确检查和格式化代码。接下来概述一下 ES6 的特性,并展望一下 JavaScript 的未来。

深入理解JavaScript特性(5):ECMAScript和JavaScript的未来 1.3.2

图灵地址 http://www.ituring.com.cn/book/2452

评论

发布