享用十二个优化代码的CSS和JavaScript工具,开发者的

JavaScript 代码静态品质检查

享用十二个优化代码的CSS和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 作横向相比较,最后属意何人家,那就不相同了。

检查和测试代码来发现其余秘密错误,从而在放手网站上事先及时解除错误是1个百般关键的历程。代码检查的长河也俗称为是Web设计师
和开发者之间的linting。作为3个设计师,要是您想要写出冲天优化的代码,那么你早晚需求linting工具。有三种档次的代码检查工具。一种是在
执行时间检查代码中的错误和bug。另一种是行使静态代码分析技术并在举行前检查码。后者因为可以节省时间和分神鲜明更佳。

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

Package Control

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

金沙澳门官网 2

 

JSLint

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

虽说那几个在 二零零三 年的 JSLint
代表着红旗的取向,可是前端的开拓进取一日千里,严峻不投降的 JSLint 开端阻碍前端的升高——
例如函数内变量全体聚齐在顶部概念,推荐1个 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 团队也逐步发现到那些难题的关键,2013年时曾有 讨论 使用 esprima 生成 AST(见 jshint-next,提醒该类型已过期,已
merge 到主项目,但在 二〇一五0%又从主项目移除,现已难觅芳踪,原因未明),并有专门针对 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 项目,最初只是其中使用,后来觉得应该 兼济天下,于是在
二零零七年后作为 Closure Tools 系列开放给外部使用。Closure Linter 重如若听从《Google
JavaScript Style
Guide》来作检查与修补。限于 Closure 的家族特征,使用限制并不大。

诚然CSSLint会“加害你的心绪”,但作为沟通它会“让您的代码革新很多” 。CSSLint近年来领导了CSS linting的商海。它用JavaScript编写,不不过开源的,而且自带大量的配备选项。

JSCS

代码中没有不当还不够,好的代码必要根据平等的代码风格(代码不仅仅给机器用,依然给人看不是吗?)。JSCS 是检查代码风格的工具,可以陈设很多代码风格规则,例如空格的必要、括号的职位等,还足以一直运用
 jQuery、谷歌(Google) 等代码风格方案。

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是2个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最初由DouglasCrockford公布于2003年,从那时起就有了全盛的肥力,由此你可以高枕无忧地肯定它是多少个既安静又可相信的JavaScript
linting工具。

金沙澳门官网 24

7.JSHint

JSHint是二个社区驱动项目,始于竭力创制3个更可配置,不那么执着的JSLint版本。JSHint允许开发人士配置任何它的linting选项,然后把自定义的配备放到三个单身的文件中,那使得该工具很不难重复使用,由此非凡适合大型项目。

金沙澳门官网 25

8.ESLint

ESLint是JavaScript
linting宏图中近期的一件盛事。之所以受欢迎是因为高度灵活的特色。你非但可以自定义大批量高级的linting规则,将之与具有重大的代码编辑器集成,还足以很简单地通过抬高差异的插件增加其成效。

金沙澳门官网 26

9.JSCS

JSCS,或JavaScript Code
Style,是针对性JavaScript的二个可插拔的代码风格linter,用来检查代码格式规则。JSCS的目标是提供2个用编程格局执行坚守于某一
编码风格向导的招数。固然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

您可能感兴趣的文章:

  • 你有要求领会的13个JavaScript难点
  • Web质量优化连串拾3个晋级JavaScript质量的技能
  • 极力推荐13个不足实用的JavaScript代码段
  • 拾二个JavaScript中易犯小错误
  • 分享10个原生JavaScript技巧
  • JavaScript开发人员的十二个重大习惯小结
  • 十个在JavaScript开发中常遇到的BUG

发表评论

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

网站地图xml地图