【亚洲必赢官网】代码静态质量检查,开发者的

JavaScript 代码静态质量检查

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

初稿出处: 百度efe –
我太原人(@i我南昌人)   

自鸿蒙初判,Brendan Eich 10
天捏出 Mocha 之后,就算进化成
EcmaScript,这几个语言依然毁誉相随。那么些通过许多灾害,侥幸渡劫成功的苦主标识了众多天坑(见 JavaScript
Garden) ——
当然,你也足以称之 feature。据无义务乱猜,道格拉斯 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 大师 道格拉斯 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 大师 道格拉斯 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和谬误,但它依然为众多高科学和技术行业的参加者,如谷歌(谷歌)、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地图