`

JSHint: 规范团队的JavaScript代码

阅读更多
历史
2008年,Douglas Crockford大神写完《JavaScript:The Good Parts》http://book.douban.com/subject/11874748/ 之后,给JavaScript树立了一个完整的技术规范,算是给JavaScript正名了(设计还是可以的,关键是要用好)。然后他老人家心想说:“老子告诉你们什么是好的JavaScript了,再送你们一个检测工具吧,凡是过不了我规范就不是好的JavaScript代码,Warning: JSLint will hurt your feelings”。当然除了最后Warning那句,其它都是我YY的。总之,就是老头根据自己的理念用JavaScript写了一个JavaScript代码规范检查工具,这就是JSLint(http://www.jslint.com/),后来非常流行,也的确帮助了广大的JavaScript程序员。但是因为这老头的个性既霸道又固执(很多大神貌似都这样子...),对于自己的代码规范不做丝毫的妥协,对开源社区的反馈的回应也很不礼貌。(https://raw.githubusercontent.com/disqus/disqus.github.com/master/_posts/2011-02-20-antonkovalyov-why-i-forked-jslint-to-jshint.html) 于是,JSLint从一个帮助程序员规范代码,避免Bug的工具,变成了一个让你写的代码像Crockford的工具。在最不信神的IT界,这当然不能忍了。 2011年,一个叫Anton Kovalyov的前端程序员借助开源社区的力量弄出来了JSHint,其思想基本上和JSLint是一致的,但是其有一下几项优势:
  • 可配置规则,每个团队可以自己定义自己想要的代码规范。
  • 对社区非常友好,社区支持度高。几乎所有的主流编辑器,IDE都有了JSHint的插件,前端构建工具Grunt,Gulp也都有其插件,另外还有很多基于JSHint的酷炫小项目,参见:http://www.jshint.com/install/
  • 可定制的结果报表。做CI的时候就方便美观多了。
好了,下面就来看一下如何使用JSHint?

安装,使用
还是情不自禁的啰嗦一下,在我看来,Node最大的功绩不在于让JavaScript可以写后台程序,而在于其繁荣了整个前端开源社区。在Node环境下,安装JSHint非常简单:
npm install jshint (-g)

然后就可以通过如下的命令检测代码
jshint ./app/model.js

默认情况下会得到如下的结果

./app/model.js: line 27, col 2, Missing semicolon.

配置与规则
前面已经提到,JSHint最大的优势在于其可配置性。JSHint的确提供了非常细致的配置规则。

开发者可以通过3种方式指定团队的代码规范:

运行时通过--config指定配置文件。
使用特殊的文件名.jshintrc, 运行时jshint会从当前路径下开始,一层一层往上找。
自己把规则配置到项目的package.json中,放置到属性名jshintConfig下。
JSHint的config文件就是一个json文件,里面配置的就是一堆的JSHint规则, 如下:
{
  "undef": true,
  "unused": true,
  "predef": [ "MY_GLOBAL" ]
}

例子中的配置规则要求:
  • “undef”: 所有使用的变量都必须已定义
  • “unused”: 所有定义的变量都必须被使用
  • “predef”: 这些变量已定义,检查时不用检测其是否已定义

JSHint配置文件中的规则有3类:
  • Enforcing: 这些规则被置为true,JSHint会对代码进行更严格的检查。
  • Relaxing: 这些规则被置为true,JSHint会容忍规则中定义的情况出现。
  • Environment: 这些规则被置为true,JSHint会认为代码默认有一些全局变量。

JSHint支持的所有规则,以及每个规则的值应该怎么填。参见:http://www.jshint.com/docs/options/。

前面提到了可以通过配置文件指定项目中的JavaScript代码需要遵守的规则,但是在实际项目中,存在某个文件需要特别的处理,或者是某个文件的某个方法需要特别的宽容的情况,对于这种情况,JSHint提供了一些指令内嵌到JavaScript代码中,在JSHint检查的时候会根据指令进行处理。JSHint提供的指令有:

jshint:设置JSHint规则,eg:/ jshint strict: true /

jslint: 设置JSHint兼容的JSLint规则,eg: / jslint vars: true /

globals: 设置全局变量的处理, eg: / global MY_LIB: false /

exported: 告诉JSHint,当前文件会导出一些全局变量。 eg:/ exported EXPORTED_LIB /

ignore: 忽略一些代码,可忽略一段代码,也可忽略仅一行。 eg: // Code here will be linted with JSHint. / jshint ignore:start / // Code here will be linted with ignored by JSHint. / jshint ignore:end /

ignoreThis(); // jshint ignore:line

基本上来说,JSHint对于可配置性的处理非常完善,但是不得不说的是,其也让整个配置规则看起来比较复杂。

和Gulp集成
社区的力量是无穷的,目前个人最偏好的前端构建工具是Gulp,而JSHint可以非常方便的与Gulp集成,从而让前端的整个构建看起来更加的统一,不要一会执行JSHint任务,一会儿又是Gulp任务。

首先,安装JSHint的Gulp插件:

npm install gulp-jshint --save-dev

然后,编写运行JSHint的任务

var jshint = require('gulp-jshint');

gulp.task('hint', function () {
    gulp.src('./app/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});
然后,只需要运行gulp hint即可检查代码。

就是这么简单。

JSHinthttps://github.com/jshint/jshint/

gulp-jshinthttps://github.com/spenceralger/gulp-jshint
1
0
分享到:
评论

相关推荐

    JSHint javascript静态检查工具,notepad++插件

    JSHint是一款强大的JavaScript代码检查器,它可以帮助开发者发现并修复代码中的潜在问题,提高代码质量和可维护性。 JSHint的工作原理是通过对源代码进行解析,检查其中可能存在的语法错误、未定义的变量、潜在的...

    前端开源库-jshint-json

    `jshint-json`是这样一个工具,它为前端开发者提供了一个专门针对JavaScript代码进行静态分析的解决方案,特别是针对JSON格式的检查。`JShint`是一个著名的静态代码分析工具,它能够帮助开发者找出潜在的语法错误、...

    jshint-teamcity-reporter:JSHint 的团队城市记者

    JSHint 是一个广泛使用的静态代码分析工具,用于检测 JavaScript 代码中的潜在错误和不规范的编程习惯。它可以帮助开发者遵循最佳实践,提高代码的可读性和可靠性。通过 JSHint,开发者可以自定义规则来符合特定的...

    前端开源库-justo-plugin-jshint

    JShint是一款知名的JavaScript代码质量检查工具,能够帮助开发者找出代码中的潜在错误和不规范之处,提升代码质量和维护性。 首先,我们需要了解什么是JShint。JShint是一个静态代码分析工具,它可以检查JavaScript...

    jshint的gradle插件

    **正文** ...总之,`jshint` 的 `gradle` 插件是 Java 或 JavaScript 项目中提升代码质量、规范编码习惯的有效工具,它的使用不仅简化了静态代码分析的流程,也为团队协作和代码维护提供了有力的支持。

    前端开源库-jshint-reporter-jscs

    JSHint 是一款静态代码分析工具,它能够检测JavaScript代码中的潜在错误和不规范的编程习惯,以提高代码质量和一致性。它检查的范围包括但不限于未声明的变量、未使用的变量、可能出错的运算符组合以及不符合最佳...

    前端开源库-fis-lint-jshint

    “fis-lint-jshint”将JSHint的功能集成到了fis框架中,使得开发者在使用fis构建项目时,可以方便地对JavaScript代码进行检查。这个插件会在编译过程中自动运行JSHint,对每个.js文件进行扫描,并在发现问题时给出...

    如何利用JSHint减少JavaScript的错误

    **JSHint** 是一个由社区驱动的JavaScript代码质量检查工具,它的主要目的是检测JavaScript代码中的错误和潜在问题,同时确保代码遵循团队设定的编码规范。由于其灵活性,JSHint能够轻松适应各种编码环境和特定规则...

    Jshint, Grunt

    **JSHint** 是一个静态代码分析工具,主要用于检测 JavaScript 代码中的潜在错误和不符合最佳实践的地方。它可以帮助开发者遵循一定的编码规范,避免写出有语法错误或者可能导致运行时问题的代码。通过配置 JSHint,...

    代码规范工具

    3. **JSHint & JSLint**:这两款工具也用于JavaScript代码检查,它们能发现语法错误、未使用的变量、潜在的类型错误等问题,帮助开发者编写更健壮的代码。 4. **Flake8**:这是Python社区中另一个受欢迎的工具,它...

    代码审计工具汇总

    它能够检查JavaScript代码的语法错误、潜在的性能问题以及遵循的编码规范,支持自定义规则以适应不同的项目需求。 6. **CPD (Copy-Paste Detector)**: CPD是PMD的一个子项目,专门用于检测代码复制粘贴现象,即...

    前端编码规范.docx

    - 使用JSLint或JSHint等工具确保JavaScript代码遵循规范,并自动检查代码质量。 6. **HTML规范** - 推荐使用HTML5文档类型声明:<!DOCTYPE html>。 - 避免闭合无内容元素,如使用 而非 。 - 验证HTML...

    JAVA代码检查工具(开源)

    6. **JSHint和ESLint**: 对于JavaScript部分的代码,可以使用JSHint或ESLint来检查,确保JavaScript代码的规范性和错误避免。 7. **Javadoc**: Javadoc是一种生成Java API文档的工具,通过检查代码中的注释,确保...

    JSLint:JavaScript代码质量工具

    通过严格遵循JSLint设定的一系列规则,开发者可以编写出更加规范、健壮的JavaScript代码。 **1. 代码检查与优化** JSLint会检查代码中的语法错误、未声明的变量、不必要的括号、空格、逗号和分号等,确保代码符合...

    Maintainable JavaScript

    该书为前端开发者提供了一系列实用的方法论,帮助他们编写出易于维护、理解和扩展的JavaScript代码。作者在Yahoo!担任前端技术领导期间积累了丰富的经验,并将这些最佳实践整理成书,旨在帮助团队成员克服个人偏好,...

    smack-resolver-javax-4.1.0-alpha6.zip

    - **持续集成**:在持续集成(CI)服务器上,如Jenkins或Travis CI,JSHint4j可以在构建过程中自动检查JavaScript代码质量,确保新提交的代码符合团队标准。 - **IDE插件**:开发人员可以开发基于JSHint4j的IDE插件,...

    检验JS工具

    6. JSDoc:虽然不是严格的语法检查工具,但JSDoc是一种注释规范,可以帮助生成文档,同时也能辅助IDE理解代码,提供更好的代码提示。 7. TypeScript:TypeScript是JavaScript的一个超集,它添加了静态类型系统,...

    JavaScriptLint

    JavaScriptLint 的使用非常灵活,可以根据开发者的喜好和团队规范进行配置。它会检查诸如变量未声明、函数参数过多、使用了全局变量等常见错误。此外,它还能帮助开发者遵循一些最佳编程习惯,例如避免使用with语句...

Global site tag (gtag.js) - Google Analytics