开发者的,代码静态质量检查

JavaScript 代码静态质量检查

2015/07/15 · JavaScript
·
质量检查

初稿出处: 百度efe –
小编圣佩特罗苏拉人(@i小编拉斯维加斯人)   

自鸿蒙初判,Brendan Eich 10
天捏出 Mocha 之后,尽管进化成
EcmaScript,那些语言仍然毁誉相随。那多少个通过无数魔难,侥幸渡劫成功的苦主标识了众多天坑(见 JavaScript
Garden) ——
当然,你也得以称之 feature。据无义务乱猜,Douglas Crockford
也没少踩坑,于是才有了蝴蝶书《JavaScript: The Good
Parts》,降水天与 JSLint 一起行使会更配哟。

美高梅开户网址 1

《JavaScript: The Definitive Guide》 V.S. 《JavaScript: The Good Parts》

从那之后,代码的静态质量检查在档次品质保持方面的基本点与须要性已不必置疑。越多的开发者意识到了那或多或少,纷繁在品种构建流程仍旧源码控制种类中加上静态检查的 hook。本文将依时间顺序,选出 JavaScript 史上的机要几个 Linter 作横向相比较,最后属意哪个人家,这就不一样了。

自作者批评和测试代码来发现其余秘密错误,从而在放权网站上事先及时化解错误是一个那多少个关键的进程。代码检查的经过也俗称为是Web设计师
和开发者之间的linting。作为一个设计师,要是您想要写出冲天优化的代码,那么你一定须求linting工具。有二种档次的代码检查工具。一种是在
执行时间检查代码中的错误和bug。另一种是行使静态代码分析技术并在进行前检查码。后者因为可以节省时间和分神明显更佳。

面向 Web 开发者的 Sublime Text 插件,sublimetext

Package Control

在 Sublime Text 上豪门都用 Package
Control 来管理安装插件,所以它是大家要安装的率先个插件,安装格局见这里。关于
Package Control 的采纳办法那里不再赘言。

美高梅开户网址 2

 

JSLint

JSLint 的名字来自早期用于检查 C 语言代码质量的 Lint,老道把认为非 Good Parts 、有陷阱的部分全部报
warning,而且绝不允许和解(当前版本现已同意有的的可配备项),固执得让人痛惜。

虽说这几个在 2002 年的 JSLint
代表着先进的趋向,然则前端的腾飞多如牛毛,严刻不让步的 JSLint 初步阻碍前端的前行
——
例如函数内变量全部聚齐在顶部概念,推荐一个 var 定义八个变量等。最最最着重的是,老道拒绝开源 JSLint(无义务乱猜,恐怕JSLint 的落实代码违反它自个儿制订的规则)。

截止
2015年6月9日,JSLint 如故在更新,官网上写着 JSLint edition 2015-06-02 BETA,固执的老到。

开发者的,代码静态质量检查。实际上,linting可以置身不一样的等级。如若您喜爱在敲代码的时候测试代码,那么你可以动用lint工具。当然,假诺您想在保险文件的时候或执
行的阶段lint代码,那么linting工具也可以如你所愿。那有赖于个人的拔取。假如您正在搜索用于CSS和JavaScript最好的
linting工具,那么请继续读书。

Package Control

在 Sublime Text 上大家都用 Package
Control 来治本安装插件,所以它是大家要设置的首先个插件,安装格局见那里。关于
Package Control 的利用办法那里不再赘述。

美高梅开户网址 3

 

JSHint

 

Linter
是帮扶您检查代码难题的一类工具,帮你发现秘密的荒谬或倒霉的代码习惯。JSHint 是反省
JavaScript 代码的好工具,支持广大编辑器和 IDE
美高梅开户网址 4

Sublime 上要动用 JSHint
可以设置:SublimeLinter-JSHint 插件。注意安装那几个插件前须要先安装 SublimeLinter 以及
jshint
命令本身,越来越多音信见 SublimeLinter-JSHint 安装表达。简单地说就是:

  1. 安装 jshint 命令:npm install -g jshint
  2. Package Control 安装:SublimeLinter ,重启 sublime
  3. Package Control 安装:SublimeLinter-jshint

注:JavaScript 有许多 linter
工具,如 JSLint 、JSHint 和 ESLint 。JSLint
是 JavaScript 大师 Douglas Crockford 创作和保险的。JSHint 是 JSLint 的
fork 版,由社区保安,更可增加、更灵活,使用者也愈来愈多,Mozilla、jQuery
都在用 JSHint 。ESLint 是另一位 JavaScript 专家  尼古拉斯 C. Zakas
主导的社区品种。

注:SublimeLinter 是 Sublime 上 linter 类插件的 framework,所以众多
linter 都看重这一个插件。Package Control: Install Package
中输入 SublimeLinter- 会列出大气 SublimeLinter- 初始的 linter
插件,如下图:

美高梅开户网址 5

JSHint

鉴于 JSLint 的现状,Anton
Kovalyov 以 JSLint 为蓝本,在社区能力的增援下完毕了开源的 JSHint

相较之下,JSHint 更温馨,可配置性更高。由于大家受 JSLint 的压榨太久,而且得益于开源的优势,风头很快盖过 JSLint,一时无两,得到大量IDE/Editor
的协理。可是成败萧相国,JSHint 的成功来自对 JSLint 的改正,但一样继承了 JSLint 的成百上千缺陷,比如不易伸张,难以依据报错消息定位到现实的平整配置等。纵然有专门的文档表明,不过修复的资产依旧不低,于是应运而生了JSLint
Error
Explanations 那样的网站,针对 JSLint/JSHint/ESLint 报的错误作修复表达—— “啪啪”,那对 JSHint 团队来说同样于打脸。

JSHint 团队也逐年发现到那个标题的第一,2012
年时曾有 讨论 使用 esprima 生成 AST(见 jshint-next,提醒该品种已过期,已
merge 到主项目,但在 2013/5
又从主项目移除,现已难觅芳踪,原因未明),并有特别针对 JSHint 的
warning 作修复的fixmyjs。

1.CSSLint

JSHint

 

Linter
是赞助你检查代码难题的一类工具,帮你意识秘密的谬误或倒霉的代码习惯。JSHint 是反省
JavaScript 代码的好工具,协理广大编辑器和 IDE
美高梅开户网址 6

Sublime 上要选择 JSHint
可以安装:SublimeLinter-JSHint 插件。注意安装这一个插件前须要先安装 SublimeLinter 以及
jshint
命令自身,越来越多信息见 SublimeLinter-JSHint 安装表达。不难地说就是:

注:JavaScript 有过多 linter 工具,如 JSLint 、JSHint 和 ESLint 。JSLint
是 JavaScript 大师 Douglas Crockford 创作和珍贵的。JSHint 是 JSLint 的
fork 版,由社区护卫,更可增添、更灵活,使用者也越来越多,Mozilla、jQuery
都在用 JSHint 。ESLint 是另一位 JavaScript 专家  尼古拉斯 C. Zakas
主导的社区类型。

注:SublimeLinter 是 Sublime 上 linter 类插件的 framework,所以广大
linter 都依靠那一个插件。Package Control: Install Package
中输入 SublimeLinter- 会列出大方 SublimeLinter- 早先的 linter
插件,如下图:

美高梅开户网址 7

JSCS

代码中绝非不当还不够,好的代码要求依据平等的代码风格(代码不仅仅给机器用,照旧给人看不是啊?)。JSCS 是检查代码风格的工具,可以布置很多代码风格规则,例如空格的须求、括号的职分等,还足以一向动用
 jQuery、谷歌(Google) 等代码风格方案。

Sublime
上要求安装 SublimeLinter-JSCS 。那几个插件同样凭借
SublimeLinter 以及 jscs 命令自个儿。简单安装表明如下:

  1. 安装 jscs 命令:npm install jscs -g
  2. Package Control 安装:SublimeLinter ,重启 sublime (如若您还没装
    SublimeLinter 的话,否则请跳过)
  3. Package Control 安装:SublimeLinter-jscs

除此以外,你仍能安装一个 JSCS-Formatter 插件,完成活动代码格式化。

美高梅开户网址 8

Closure Linter

Closure Linter 属于 Closure 家族成员,源于 2004
年的 Gmail 项目,最初只是里面采纳,后来以为应该 兼济天下,于是在
2007
年后作为 Closure Tools 体系开放给外部使用。Closure Linter 重如果根据《Google
JavaScript Style
Guide》来作检查与修复。限于 Closure 的家门特征,使用范围并不大。

真的CSSLint会“加害你的情义”,但作为沟通它会“让你的代码立异很多” 。CSSLint方今官员了CSS linting的市场。它用JavaScript编写,不不过开源的,而且自带多量的布局选项。

JSCS

代码中从未错误还不够,好的代码必要根据平等的代码风格(代码不仅仅给机器用,如故给人看不是啊?)。JSCS 是反省代码风格的工具,可以配备很多代码风格规则,例如空格的渴求、括号的职责等,还足以直接使用
 jQuery、谷歌 等代码风格方案。

Sublime 上须要安装 SublimeLinter-JSCS 。这一个插件同样依靠 SublimeLinter
以及 jscs 命令本人。简单安装表达如下:

除此以外,你仍可以设置一个 JSCS-Formatter 插件,落成机关代码格式化。

美高梅开户网址 9

ColorHighliter

Color
highlighter 插件可以自动显示CSS 或 Sass
中声称的颜色,让你看透。暗许配置下,当鼠标移到颜色变量上时背景就会成为表明的颜料。

美高梅开户网址 10

还是能安装三种颜料彰显格局,默许配置见: ‘Package Settings’ > ‘Color
Highlighter’ > ‘Settings – Default’ 。例如,大家在该插件的 User
设置中做如下设置可以达到下图的呈现效果:

 

1
2
3
{
  "ha_style": "filled"
}

美高梅开户网址 11

Gutter
Color 和 Color
Picker 是此外八个颜色相关的插件。

JSCS

自 Marat Dulin 于 2003.6.17 日凌晨发表第二个版本起首,JSCS 就专注于代码风格层面的检查,这一点从它的名字 JSCS - JavaScript Code Style 中可窥一斑:

JSCS is a code style linter for programmatically enforcing your style
guide. You can configure JSCS for your project in detail using over 90
validation rules, including presets from popular style guides like
jQuery, Airbnb, Google, and more.

再看它的 package.json 中的正视包:

能够窥见它利用了 esprima 生成 AST,再通过 estraverse 遍历作检讨,由此质量上会逊于 JSLint 与 JSHint,不过带来的入账是便于维护和伸张,相对于品质上的损失,是一点一滴值得的。其它,JSCS 可通过 esprima-harmony-jscs 实现对 ES6 的支撑,并且自带错误修复技术。

JSCS 与 JSHint 份属协作,相互采用对方作本项目标代码检查。

美高梅开户网址 12

ColorHighliter

Color highlighter 插件可以活动突显 CSS 或 Sass
中扬言的水彩,让你看透。暗中认同配置下,当鼠标移到颜色变量上时背景就会变成申明的颜色。

美高梅开户网址 13

还是能安装五种颜料展现方式,私行认同配置见: ‘Package Settings’ > ‘Color
Highlighter’ > ‘Settings – Default’ 。例如,大家在该插件的 User
设置中做如下设置可以高达下图的来得效果:

 

1 2 3 {   "ha_style": "filled" }

美高梅开户网址 14

Gutter Color 和 Color Picker 是别的多少个颜色相关的插件。

AutoFileName

AutoFileName 在你在输入文件名是提供自动提示,减少人工的输入错误。

美高梅开户网址 15

ESLint

刚巧,同样是出自对 JSLint 与 JSHint 的不满,Nicholas C.
Zakas 也在 JSCS 发表的当月始发造另一个新轮子
——JSCheck(浓浓的山寨感扑面而来有没有),不过几天后即改名为 ESLint ——
再一次申明,好名字根本。

成效方面,ESLint 可以简容易单的知道成 JSHint + JSCS,基本上集成了两大基友的长处。ESLint 在最初也是凭借于 esprima生成 AST,后来为增高对 ES6 的支持,换成 esprima 的分支版本 espree。然而,espree 对 ES6 的协助仍然很单薄,不过好在还有 Babel-ESLint。

2.SublimeLinter CSSLint

AutoFileName

AutoFileName 在您在输入文件名是提供自动指示,收缩人工的输入错误。

美高梅开户网址 16

Autoprefixer

Autoprefixer 插件让帮你活动添加
CSS
厂商前缀,个人利用相比较方便。如若是正规的序列,可以动用别的活动营造工具在营造进度中联合完结。

美高梅开户网址 17

作者:韩国恺。本一连串文章以 Addy & Matt
的举不胜举视频 Totally Tooling
Tips 的内容为根基重新整理而成,主要介绍部分(前端)开发者喜欢的工具和技艺。

总结

如果您是老道的死忠粉,无条件允许他关于 JavaScript
的任何观点,那么 JSLint 是你的不二选项。只要把 老道 换成 Google 成立,JSLint 换成 Closure Linter 同样创建。

比方您有得天独厚的单元测试作后续的成色担保,或然只 care
代码风格方面的题材,那么 JSCS 就全盘胜任。

倘若您须求不高,更珍重开发工具和环境的协助,还想顺便检查一下 HTML 代码中的 inline script,严重推荐 JSHint。得益于它的高普及度,即便官方文档有劳而无功的无力感,在社区的增援下也能很快的化解你的标题。

一旦您的渴求尤其高,为集体制订标准格外详细,并且不知足于 JSHint 与 JSCS 的重组,不妨试试 ESLint。严苛的进献参加流程,飞速的响应以及丰盛的文档都只是是它诸多优点中的冰山一角。

您还要检查 CSS 和 HTML,甚至还有 Less
或者唯有 fecs 可以挽救你于水火,至于 fecs 是何等,那是另一篇小说的故事情节了。

CSSLint是几次那样高效的CSS linting工具,以致于很难找到一个竞争对手可以与之比美。大概那就是干什么
SublimeLinter linting框架会把它的CSS linting插件创设在CSSLint下边的来由。SublimeLinter是一个
SublimeText插件,给用户提供了lint代码(CSS,PHP,Python,Java,Ruby等)的一手。

Autoprefixer

Autoprefixer 插件让帮你活动添加 CSS
厂商前缀,个人利用比较便于。倘若是正式的体系,可以动用此外活动打造工具在打造过程中联合完成。

美高梅开户网址 18

作者:大韩民国恺。本种类小说以 Addy & Matt 的一体系视频 Totally Tooling
Tips 的情节为根基重新整理而成,紧要介绍一些(前端)开发者喜欢的工具和技巧。

美高梅开户网址 , Web 开发者的 Sublime Text 插件,sublimetext
Package Control 在 Sublime Text 上大家都用Package
Control来治本安装插件,所以它是我们要设置的首先个…

补充

撰写未完,和讯发现已有接近的可比: A Comparison of JavaScript Linting
Tools,可作参考。

1 赞 1 收藏
评论

美高梅开户网址 19

美高梅开户网址 20

3.StyleLint

StyleLint能够帮衬开发人员防止CSS、SCSS中或任何其余PostCSS可以分析的语法错误。StyleLint测试了领先一百条规则,你可以拔取你想切换的那些规则(见此举例配置)。

美高梅开户网址 21

4.W3C CSS Validator

即使W3C的CSS
Validator寻常不被认为是一种linting工具,但它为开发人士提供了一个用W3C官方正规检查CSS代码的很好机会。W3C建立它本身的认证程序,目的在于提供一个类似于Lint程序检查器针对C语言的工具。

美高梅开户网址 22

5.Dirty Markup

Dirty
马克up可以清理,格式化以及表达你的HTML、CSS和JavaScript代码。假使您欣赏简单直接的设计,并希望一个飞速的消除方案,那么选它就对了。当您在编辑器中编辑或修改代码的时候,Dirty
马克up能够实时抛出荒唐信息和布告。

美高梅开户网址 23

6.JSLint

JSLint最初由道格拉斯Crockford发表于2002年,从那时起就有了万马奔腾的生命力,因而你可以高枕无忧地认定它是一个既安静又可信的JavaScript
linting工具。

美高梅开户网址 24

7.JSHint

JSHint是一个社区驱动项目,始于竭力成立一个更可布署,不那么执着的JSLint版本。JSHint允许开发人士配置任何它的linting选项,然后把自定义的陈设放到一个单独的公文中,那使得该工具很简单重复使用,由此非凡适合大型项目。

美高梅开户网址 25

8.ESLint

ESLint是JavaScript
linting宏图中方今的一件大事。之所以受欢迎是因为中度灵活的特色。你非但可以自定义多量高等的linting规则,将之与具有首要的代码编辑器集成,还足以很不难地经过抬高差其他插件扩张其效果。

美高梅开户网址 26

9.JSCS

JSCS,或JavaScript Code
Style,是针对性JavaScript的一个可插拔的代码风格linter,用来检查代码格式规则。JSCS的对象是提供一个用编程形式实施遵守于某一
编码风格向导的手法。固然JSCS不检查bug和谬误,但它如故为广大高科学技术行业的参加者,如谷歌(谷歌(Google))、AirBnB和AngularJS所用,因为它可以支持开发人员保持一个中度可读又平等的代码库。

美高梅开户网址 27

10.StandardJS

StandardJS,或JavaScript Standard
Style是一种代码风格linter,有点像JSCS,但不一样是越发简单和直接。如若您不想花时间在布局上,只想要一个能开箱即用的迅猛工具以来,那么StandardJS是一个超棒的挑三拣四。

美高梅开户网址 28

译文链接:
英文原文:10 CSS and JavaScript Linting Tools for Code
Optimization

您大概感兴趣的小说:

  • 您有必不可少明白的10个JavaScript难题
  • Web质量优化系列10个晋级JavaScript品质的技术
  • 极力推荐10个不足实用的JavaScript代码段
  • 10个JavaScript中易犯小错误
  • 分享10个原生JavaScript技巧
  • JavaScript开发人员的10个第一习惯小结
  • 10个在JavaScript开发中常碰到的BUG

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图