javascript lint,用jsl来提高javascript质量

在寻找本地运行的js环境的时候,偶然间发现了javascritpt lint可以用来检测代码的语法,当然还有质量。

javascript lint简介


Many JavaScript implementations do not warn against questionable coding practices. Yes, that's nice for the site that "works best with Internet Explorer" (designed with templates, scripted with snippets copied from forums). But it's a nightmare when you actually want to write quality, maintainable code. That's where JavaScript Lint comes in. With JavaScript Lint, you can check all your JavaScript source code for common mistakes without actually running the script or opening the web page. JavaScript Lint holds an advantage over competing lints because it is based on the JavaScript engine for the Firefox browser. This provides a robust framework that can not only check JavaScript syntax but also examine the coding techniques used in the script and warn against questionable practices.

下载javascript lint

这里说到的javascript lint是指离线版的jsl命令,而不是jslint.js。





# Configuration File for JavaScript Lint 0.3.0
# Developed by Matthias Miller (
# This configuration file can be used to lint a collection of scripts, or to enable
# or disable warnings for scripts that are linted via the command line.

### Warnings
# Enable or disable warnings based on requirements.
# Use "+WarningName" to display or "-WarningName" to suppress.
+no_return_value              # function {0} does not always return a value
+duplicate_formal             # duplicate formal argument {0}
+equal_as_assign              # test for equality (==) mistyped as assignment (=)?{0}
+var_hides_arg                # variable {0} hides argument
+redeclared_var               # redeclaration of {0} {1}
-anon_no_return_value         # anonymous function does not always return a value
+missing_semicolon            # missing semicolon
+meaningless_block            # meaningless block; curly braces have no impact
+comma_separated_stmts        # multiple statements separated by commas (use semicolons?)
+unreachable_code             # unreachable code
+missing_break                # missing break statement
+missing_break_for_last_case  # missing break statement for last case in switch
+comparison_type_conv         # comparisons against null, 0, true, false, or an empty string allowing implicit type conversion (use === or !==)
-inc_dec_within_stmt          # increment (++) and decrement (--) operators used as part of greater statement
+useless_void                 # use of the void type may be unnecessary (void is always undefined)
+multiple_plus_minus          # unknown order of operations for successive plus (e.g. x+++y) or minus (e.g. x---y) signs
+use_of_label                 # use of label
-block_without_braces         # block statement without curly braces
+leading_decimal_point        # leading decimal point may indicate a number or an object member
+trailing_decimal_point       # trailing decimal point may indicate a number or an object member
+octal_number                 # leading zeros make an octal number
+nested_comment               # nested comment
+misplaced_regex              # regular expressions should be preceded by a left parenthesis, assignment, colon, or comma
+ambiguous_newline            # unexpected end of line; it is ambiguous whether these lines are part of the same statement
+empty_statement              # empty statement or extra semicolon
-missing_option_explicit      # the "option explicit" control comment is missing
+partial_option_explicit      # the "option explicit" control comment, if used, must be in the first script tag
+dup_option_explicit          # duplicate "option explicit" control comment
+useless_assign               # useless assignment
+ambiguous_nested_stmt        # block statements containing block statements should use curly braces to resolve ambiguity
+ambiguous_else_stmt          # the else statement could be matched with one of multiple if statements (use curly braces to indicate intent)
+missing_default_case         # missing default case in switch statement
+duplicate_case_in_switch     # duplicate case in switch statements
+default_not_at_end           # the default case is not at the end of the switch statement
+legacy_cc_not_understood     # couldn't understand control comment using /*@keyword@*/ syntax
+jsl_cc_not_understood        # couldn't understand control comment using /*jsl:keyword*/ syntax
+useless_comparison           # useless comparison; comparing identical expressions
+with_statement               # with statement hides undeclared variables; use temporary variable instead
+trailing_comma_in_array      # extra comma is not recommended in array initializers
+assign_to_function_call      # assignment to a function call
+parseint_missing_radix       # parseInt missing radix parameter

### Output format
# Customize the format of the error message.
#    __FILE__ indicates current file path
#    __FILENAME__ indicates current file name
#    __LINE__ indicates current line
#    __ERROR__ indicates error message
# Visual Studio syntax (default):
+output-format __FILE__(__LINE__): __ERROR__
# Alternative syntax:
#+output-format __FILE__:__LINE__: __ERROR__

### Context
# Show the in-line position of the error.
# Use "+context" to display or "-context" to suppress.





+process js/app.js




 +process js/*.js


./jsl -conf jsl.default.conf
JavaScript Lint 0.3.0 (JavaScript-C 1.5 2004-09-24) 
Developed by Matthias Miller (


0 error(s), 0 warning(s)



JSLint 对 JavaScript 脚本的质量检测主要包括以下几个方面:

  • 检测语法错误:例如大括号“{}”的配对错误。
  • 变量定义规范:例如未定义变量的检测。
  • 代码格式规范:例如句末分号的缺失。
  • 蹩脚语言特性的使用检测:如 eval 和 with 的使用限制。



 sudo npm install -g jslint

然后jslint app.js

slint app.js

 #1 Use spaces, not tabs.
    var para=document.getElementById("para"); // Line 1, Pos 1
 #2 Expected 'var' at column 1, not column 2.
    var para=document.getElementById("para"); // Line 1, Pos 2
 #3 Missing space between 'para' and '='.
    var para=document.getElementById("para"); // Line 1, Pos 10
 #4 Missing space between '=' and 'document'.
    var para=document.getElementById("para"); // Line 1, Pos 11
 #5 Use spaces, not tabs."blue"; // Line 2, Pos 1
 #6 Expected 'para' at column 1, not column 2."blue"; // Line 2, Pos 2
 #7 Missing space between 'color' and '='."blue"; // Line 2, Pos 18
 #8 Missing space between '=' and 'blue'."blue"; // Line 2, Pos 19


var para=document.getElementById("para");"blue";


var para = document.getElementById("para"); = "blue";


#1 'document' was used before it was defined.
    var para = document.getElementById("para"); // Line 1, Pos 12




Github: @phodal     微博:@phodal     知乎:@phodal    


围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806




  • 设计:讲述了架构设计的模式,以及设计和制定前端工作流。
  • 基础:通过深入构建系统、单页面应用原理、前端知识体系等,来构建出完整的前端应用架构体系。
  • 实施:通过与代码结构的方式,介绍如何在企业级应用中实施组件化架构、设计系统和前后端分离架构。
  • 微前端:引入6种微前端的概念,以及如何划分、设计微前端应用,并展示了如何实现这6种微前端架构。
  • 演进:提出更新、迁移、重构、重写、重新架构等架构演进方式,来帮助开发人员更好地设计演进式架构。


RSS / Atom



Phodal Huang

Developer, Consultant, Writer, Designer

ThoughtWorks 高级咨询师

工程师 / 咨询师 / 作家 / 设计学徒




微信公众号: 与我沟通