于是决定自己实现一个简单的记录工具来管理这

作者: 前端  发布:2019-11-07

JavaScript 代码静态质量检查

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

原文出处: 百度efe - 我佛山人(@i我佛山人)   

自鸿蒙初判,Brendan Eich 10 天捏出 Mocha 之后,即便进化成 EcmaScript,这个语言依旧毁誉相随。那些经过重重劫难,侥幸渡劫成功的苦主标识了诸多天坑(见 JavaScript Garden) —— 当然,你也可以称之 feature。据无责任乱猜,Douglas Crockford 也没少踩坑,于是才有了蝴蝶书《JavaScript: The Good Parts》,下雨天与 JSLint 一起使用会更配哟。

9159.com 1

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

时至今日,代码的静态质量检查在项目质量保障方面的重要性与必要性已毋庸置疑。越来越多的开发者意识到了这一点,纷纷在项目构建流程或者源码控制系统中添加静态检查的 hook。本文将依时间顺序,选出 JavaScript 史上的主要几个 Linter 作横向比较,最终属意谁家,那就见仁见智了。

检查和测试代码来发现任何潜在错误,从而在放到网站上之前及时消除错误是一个非常重要的过程。代码检查的过程也俗称为是Web设计师 和开发者之间的linting。作为一个设计师,如果你想要写出高度优化的代码,那么你一定需要linting工具。有两种类型的代码检查工具。一种是在 执行时间检查代码中的错误和bug。另一种是使用静态代码分析技术并在执行前检查码。后者因为可以节省时间和麻烦显然更佳。

9159.com 2

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

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工具,那么请继续阅读。

平时用的最多的文本编辑器就是 Notepad++,很多东西都是通过 Notepad++直接记录的:

Package Control

在 Sublime Text 上大家都用 Package Control 来管理安装插件,所以它是我们要安装的第一个插件,安装方法见这里。关于 Package Control 的使用方法这里不再赘述。

9159.com 3

 

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 。9159.com 4

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 专家  Nicholas C. Zakas 主导的社区项目。

注:SublimeLinter 是 Sublime 上 linter 类插件的 framework,所以很多 linter 都依赖这个插件。Package Control: Install Package 中输入 SublimeLinter- 会列出大量 SublimeLinter- 开头的 linter 插件,如下图:

9159.com 5

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、Google 等代码风格方案。

Sublime 上需要安装 SublimeLinter-JSCS 。这个插件同样依赖 SublimeLinter 以及 jscs 命令本身。简单安装说明如下:

9159.com,此外,你还可以安装一个 JSCS-Formatter 插件,实现自动代码格式化。

9159.com 6

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 份属同盟,互相使用对方作本项目的代码检查。

9159.com 7

于是决定自己实现一个简单的记录工具来管理这些信息,工具就叫 Remember。

ColorHighliter

Color highlighter 插件可以自动显示 CSS 或 Sass 中声明的颜色,让你一目了然。默认配置下,当鼠标移到颜色变量上时背景就会变为声明的颜色。

9159.com 8

还可以设置多种颜色显示方式,默认配置见: ‘Package Settings’ > ‘Color Highlighter’ > ‘Settings – Default’ 。例如,我们在该插件的 User 设置中做如下设置可以达到下图的显示效果:

 

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

9159.com 9

Gutter Color 和 Color Picker 是另外两个颜色相关的插件。

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

自己平时工作主要用 Python,并且对前端方向一直很有兴趣,所以 Remember 的开发就使用了 Angular 和 Flask,分别实现了前端的页面逻辑和后台的 RESTful API。

AutoFileName

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

9159.com 10

总结

如果你是老道的死忠粉,无条件同意他关于 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等)的手段。

另外,Remember 开发中主要用到了下面的工具:

Autoprefixer

Autoprefixer 插件让帮你自动添加 CSS 厂商前缀,个人使用比较方便。如果是正式的项目,可以使用其它自动构建工具在构建过程中统一实现。

9159.com 11

作者:韩国恺。本系列文章以 Addy & Matt 的系列视频 Totally Tooling Tips 的内容为基础重新整理而成,主要介绍一些(前端)开发者喜欢的工具和技巧。

Web 开发者的 Sublime Text 插件,sublimetext Package Control 在 Sublime Text 上大家都用Package Control来管理安装插件,所以它是我们要安装的第一个...

补充

行文未完,微博发现已有类似的比较: A Comparison of JavaScript Linting Tools,可作参考。

1 赞 1 收藏 评论

9159.com 12

9159.com 13

  • 通过 pylint、jshint 进行 Python、JavaScript 代码的静态检查

  • JavaScript 的单元测试使用 karma 和 Jasmine

  • 前端包管理使用 bower

  • 前端构建使用 gulp

3.StyleLint

下面就看看 Remember 中提供的一些功能。

StyleLint可以帮助开发人员避免CSS、SCSS中或任何其他PostCSS可以解析的语法错误。StyleLint测试了超过一百条规则,你可以选择你想切换的那些规则(见此举例配置)。

管理任务

9159.com 14

9159.com 15

4.W3C CSS Validator

Markdown 编辑/预览

尽管W3C的CSS Validator通常不被认为是一种linting工具,但它为开发人员提供了一个用W3C官方标准检查CSS代码的很好机会。W3C建立它自己的验证程序,旨在提供一个类似于Lint程序检查器针对C语言的工具。

9159.com 16

9159.com 17

管理便签

5.Dirty Markup

9159.com 18

Dirty Markup可以清理,格式化以及验证你的HTML、CSS和JavaScript代码。如果你喜欢简单直接的设计,并希望一个快捷的解决方案,那么选它就对了。当你在编辑器中编写或修改代码的时候,Dirty Markup可以实时抛出错误消息和通知。

管理文件

9159.com 19

9159.com 20

6.JSLint

在开发 Remember 的过程中遇到了一些问题,也开始更加注意一些事情。

JSLint最初由Douglas Crockford发布于2002年,从那时起就有了蓬勃的生命力,因此你可以安全地认定它是一个既稳定又可靠的JavaScript linting工具。

编码风格很重要

9159.com 21

每个开发人员都有自己的编码习惯和风格,不能说谁的编码风格就是最好的。但是,对于一个项目,编码风格的统一很重要,统一风格的代码将更方便的管理、查阅,降低维护成本。

7.JSHint

在开发 Remember 的时候自己也是尽量去按照 Python 和 JavaScript 的style guide 去编码,主要有以下参考。

JSHint是一个社区驱动项目,始于竭力创造一个更可配置,不那么固执的JSLint版本。JSHint允许开发人员配置任何它的linting选项,然后把自定义的配置放到一个单独的文件中,这使得该工具很容易重复使用,因此非常适合大型项目。

对于 Python,主要参考:

9159.com 22

  • PEP 0008 -- Style Guide for Python Code

  • Google Python Style Guide

8.ESLint

对于 JavaScript 和 Angular,主要参考:

ESLint是JavaScript linting宏图中最近的一件大事。之所以受欢迎是因为高度灵活的特性。你不仅可以自定义大量尖端的linting规则,将之与所有主要的代码编辑器集成,还可以很容易地通过添加不同的插件扩展其功能。

  • Crockford style

  • angular-styleguide

9159.com 23

即使有了统一的风格,对于 Python 和 JavaScript 这些解释性的语言,静态检查也是很有必要的。所以 Remember 中就使用了 pylint 和 jshint 进行静态检查。这种静态检查可以进一步保持统一的代码风格,同时帮忙发现一些代码错误。

9.JSCS

单元测试

JSCS,或JavaScript Code Style,是针对JavaScript的一个可插拔的代码风格linter,用来检查代码格式规则。JSCS的目标是提供一个用编程方式实施遵从于某一 编码风格向导的手段。虽然JSCS不检查bug和错误,但它仍然为许多高科技行业的参与者,如谷歌、AirBnB和AngularJS所用,因为它可以帮 助开发人员保持一个高度可读又一致的代码库。

由于自己是边开发边使用 Remember,所以经常有一些改动,但是改动之后没有进行测试,有时候相关的功能就不正常了,就需要查看最近的提交记录。所以对一些基本的功能模块,编写单元测试还是很必要的。

9159.com 24

Remember 中主要使用 karma 和 Jasmine 进行 JavaScript 单元测试,但是测试的 coverage 还是很少,需要慢慢补上。

10.StandardJS

使用工具简化流程

StandardJS,或JavaScript Standard Style是一种代码风格linter,有点像JSCS,但区别是更为简单和直接。如果你不想花时间在配置上,只想要一个能开箱即用的高效工具的话,那么StandardJS是一个超棒的选择。

开发过程中接触了一些工具,很大程度上方便了开发。记得以前需要什么前端库的时候,都是直接搜索,然后下载相应的 js/css 文件。不仅工作效率低下,对于这些库的管理也是一个很大的问题。所以去了解了一下 bower 这个工具,然后就可以方便的获取和管理需要使用的库了。

9159.com 25

另外就是使用了 gulp 进行一些自动化构建,以前很多手动的工作现在都简化成了一个简单的命令。通过 gulp 合并、压缩 js/css/html 之后,加载首页的对比:

译文链接:
英文原文: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

9159.com 26

  • 压缩合并后:

9159.com 27

寻找和利用一些工具来简化流程是十分必要的,往往会有事半功倍的效果(Ps:现在前端开发的工具实在太多了)。

Remember 开发过程是边开发边使用,到现在已经可以满足我的需求了,而且现在已经习惯了使用这个工具进行各种记录工作。但是还有很多可以增加、改进的地方,就慢慢来吧。

虽然对 JavaScript 有一些了解,但是 Angular 是开始做这个工具时候现学的;关于 JavaScript 的单元测试工具,通过 bower 管理前端库,通过 gulp 构建前端项目等等都是边学边使用,所以收获还是挺多的。

项目源码已经托管到 Github 上了,如果你也刚开始学习 Angular 或 Flask,希望项目的源码能够对你有所帮助。如果你也需要一个记录工具,不妨试试 Remember,或者基于 Remember 定制一个符合你习惯的工具。

Remember on Github:

Gif 制作工具:ScreenToGif

第 19 期【Python自动化运维入门】正在火热招生中第 8 期【Python自动化运维进阶】正在招生中

各位小伙伴们,详情请扫码咨询:

9159.com 2819期已开课,想要获取视频试听的可扫码获取

本文由9159.com发布于前端,转载请注明出处:于是决定自己实现一个简单的记录工具来管理这

关键词: