数据API 产品矩阵 案例 关于
掌握聚合最新动态了解行业最新趋势
API接口,开发服务,免费咨询服务

为什么你不能缺少Linter(以及代码美化工具)

本文由garnett在众成翻译平台上翻译。使用Linter和代码美化工具,不仅能让代码更规范,还能尽早把错误扼杀在摇篮里,赶快用起来吧~

当我们在谈论Linter时,有些人只会认为它们是针对代码风格的。没错,即使代码风格校验确实是Linter的主业,但是它能做的事情远不止于此。它能够让你少犯错误少踩坑。

Linter将帮助你在一些场景中捕获错误。比如:

const runnable = {}

if (Math.random() < 0.0001) {

  runable.run()

}

上面的代码,如果我们使用基于eslint的规则,将会为我们报出两处错误。第一处报错是runnable声明了但从来没有被使用过,第二处报错是第三行的代码使用了未声明的变量。很明显这两个错误实际上就是一个错误:第3行有一个错字。

在编写代码时而不是在应用程序运行时检测这些错误将节省大量的时间,换句话说在运行时检测这些错误则会花费大量的时间。最糟糕的情况我们可能要花几个小时的时间进行调试,但是有了Linter我们就能够随时得到反馈。

Linter能帮助你快速避免的另一个常见错误是:

const fs = require('fs')


fs.readFile('foo.txt', 'utf8', (err, data) => {

  console.log('data', data.toLowerCase())

})

上面的代码,按照eslint的规则,我们会得到一个报错:我们没有处理回调函数中的error。同样的,如果是在生产中遇到错误,我们需要花费大量时间去调试,去重现问题,但是借助Linter可以节省我们大量的时间。

自动化

有很多方法可以让你在工作流中集成Linter。

在文本编辑器中使用插件

在写代码的时候获取即时反馈的第一步就是在文本编辑器中添加一个Linter的插件。

创建一个NPM脚本

只需要将Linter作为devdependency添加到package.json中,并创建如下脚本即可:

{

  "name": "my-cool-package",

  "devDependencies": {

    "standard": "*"

  },

  "scripts": {

    "lint": "standard",

    "test": "npm run lint && test-runner-name"

  }

}

Standard是一套eslint校验规则,同时能够做到即插即用,因为他们的原则是:无需配置。

正如你所看到的,有一个叫做Standard的能够提供可执行文件的NPM包,而这对于你来说已经足够。

您也可以根据你的喜好配置校验的规则,但就我个人而言,官方的配置已经足够了。

Git hook

你可以通过 husky 或 pre-commit 等工具使用 lint-staged,或者在 git commit 之前触发一个小脚本执行 Linter。

自动修正

另一个很酷的标准是他们的--fix选项。如果只有编码风格问题,那么Linter会根据这个选项来自动修正这些问题。

Prettier

类似Standard这样的Linter会让你的代码保持统一的风格。但是最近的另一个新项目Prettier能够让你更进一步。这个格式化工具能够设置单行代码宽度从而避免一行代码过长。举个例子,下面这行代码看起来很好:

foo(arg1, arg2, arg3, arg4);

但是下面这一行就有点太长了

foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());

所以Prettier会把上面这行代码整形成下面这个样子

foo(

  reallyLongArg(),

  omgSoManyParameters(),

  IShouldRefactorThis(),

  isThereSeriouslyAnotherOne()

);

Prettier有许多关于标识符、分号使用等等的配置选项,同时它也支持其他语言,如:TypeScript,CSS,LESS和SCSS。

Prettier并不是用于报错,因为它只是一个美化工具,但这并不影响你使用一个Linter和一个类似Prettier的格式化工具来规范你的代码。而实际上,采用Standard + Prettier这样的组合,会让你现有的工具如虎添翼,展现出两者的结果。

其他的风格校验工具

当然,不仅限于上文介绍的,还有许多其他JavaScript代码风格规范。就比如Airbnb 以及Google 的规范建议。

说实话,这么多工具当中我最喜欢的还是Standard,而且如果你喜欢在代码中写分号的话,你可以使用 semistandard。

说到底,究竟用哪一个校验工具还是由你自己说了算。但只要选择了一个,那么就坚持地使用下去,正确地使用。

齐舞周刊.jpg

原文来自:齐舞周刊

声明:所有来源为“聚合数据”的内容信息,未经本网许可,不得转载!如对内容有异议或投诉,请与我们联系。邮箱:marketing@think-land.com

掌握聚合最新动态了解行业最新趋势
API接口,开发服务,免费咨询服务
为什么你不能缺少Linter(以及代码美化工具)
发布:2017-07-07 11:04:55

本文由garnett在众成翻译平台上翻译。使用Linter和代码美化工具,不仅能让代码更规范,还能尽早把错误扼杀在摇篮里,赶快用起来吧~

当我们在谈论Linter时,有些人只会认为它们是针对代码风格的。没错,即使代码风格校验确实是Linter的主业,但是它能做的事情远不止于此。它能够让你少犯错误少踩坑。

Linter将帮助你在一些场景中捕获错误。比如:

const runnable = {}

if (Math.random() < 0.0001) {

  runable.run()

}

上面的代码,如果我们使用基于eslint的规则,将会为我们报出两处错误。第一处报错是runnable声明了但从来没有被使用过,第二处报错是第三行的代码使用了未声明的变量。很明显这两个错误实际上就是一个错误:第3行有一个错字。

在编写代码时而不是在应用程序运行时检测这些错误将节省大量的时间,换句话说在运行时检测这些错误则会花费大量的时间。最糟糕的情况我们可能要花几个小时的时间进行调试,但是有了Linter我们就能够随时得到反馈。

Linter能帮助你快速避免的另一个常见错误是:

const fs = require('fs')


fs.readFile('foo.txt', 'utf8', (err, data) => {

  console.log('data', data.toLowerCase())

})

上面的代码,按照eslint的规则,我们会得到一个报错:我们没有处理回调函数中的error。同样的,如果是在生产中遇到错误,我们需要花费大量时间去调试,去重现问题,但是借助Linter可以节省我们大量的时间。

自动化

有很多方法可以让你在工作流中集成Linter。

在文本编辑器中使用插件

在写代码的时候获取即时反馈的第一步就是在文本编辑器中添加一个Linter的插件。

创建一个NPM脚本

只需要将Linter作为devdependency添加到package.json中,并创建如下脚本即可:

{

  "name": "my-cool-package",

  "devDependencies": {

    "standard": "*"

  },

  "scripts": {

    "lint": "standard",

    "test": "npm run lint && test-runner-name"

  }

}

Standard是一套eslint校验规则,同时能够做到即插即用,因为他们的原则是:无需配置。

正如你所看到的,有一个叫做Standard的能够提供可执行文件的NPM包,而这对于你来说已经足够。

您也可以根据你的喜好配置校验的规则,但就我个人而言,官方的配置已经足够了。

Git hook

你可以通过 husky 或 pre-commit 等工具使用 lint-staged,或者在 git commit 之前触发一个小脚本执行 Linter。

自动修正

另一个很酷的标准是他们的--fix选项。如果只有编码风格问题,那么Linter会根据这个选项来自动修正这些问题。

Prettier

类似Standard这样的Linter会让你的代码保持统一的风格。但是最近的另一个新项目Prettier能够让你更进一步。这个格式化工具能够设置单行代码宽度从而避免一行代码过长。举个例子,下面这行代码看起来很好:

foo(arg1, arg2, arg3, arg4);

但是下面这一行就有点太长了

foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());

所以Prettier会把上面这行代码整形成下面这个样子

foo(

  reallyLongArg(),

  omgSoManyParameters(),

  IShouldRefactorThis(),

  isThereSeriouslyAnotherOne()

);

Prettier有许多关于标识符、分号使用等等的配置选项,同时它也支持其他语言,如:TypeScript,CSS,LESS和SCSS。

Prettier并不是用于报错,因为它只是一个美化工具,但这并不影响你使用一个Linter和一个类似Prettier的格式化工具来规范你的代码。而实际上,采用Standard + Prettier这样的组合,会让你现有的工具如虎添翼,展现出两者的结果。

其他的风格校验工具

当然,不仅限于上文介绍的,还有许多其他JavaScript代码风格规范。就比如Airbnb 以及Google 的规范建议。

说实话,这么多工具当中我最喜欢的还是Standard,而且如果你喜欢在代码中写分号的话,你可以使用 semistandard。

说到底,究竟用哪一个校验工具还是由你自己说了算。但只要选择了一个,那么就坚持地使用下去,正确地使用。

齐舞周刊.jpg

原文来自:齐舞周刊

声明:所有来源为“聚合数据”的内容信息,未经本网许可,不得转载!如对内容有异议或投诉,请与我们联系。邮箱:marketing@think-land.com

选择想要的接口, 看看能免费获取多少次调用 选择(单选)或填写想要的接口
  • 短信API服务
  • 银行卡四元素检测[简]
  • 身份证实名认证
  • 手机状态查询
  • 三网手机实名制认证[简]
  • 身份证OCR识别
  • 证件识别
  • 企业工商信息
短信API服务
  • 短信API服务
  • 银行卡四元素检测[简]
  • 身份证实名认证
  • 手机状态查询
  • 三网手机实名制认证[简]
  • 身份证OCR识别
  • 证件识别
  • 企业工商信息
  • 确定
选择您的身份
请选择寻找接口的目的
预计每月调用量
请选择预计每月调用量
产品研发的阶段
请选择产品研发的阶段
×

前往领取
电话 0512-88869195
提需求
×
企业用户认证,
可获得1000次免费调用
注册登录 > 企业账户认证 > 领取接口包
企业用户认证领取接口包 立即领取
× 企业用户认证,
可获得1000次免费调用,立即领取>
数 据 驱 动 未 来
Data Drives The Future