Blog

Blog

PHODAL

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。

javascript下载地址

用jsl来提高javascript质量

jsl配置文件

这里以自带的配置文件为例

#
# Configuration File for JavaScript Lint 0.3.0
# Developed by Matthias Miller (http://www.JavaScriptLint.com)
#
# 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.
#
+context

+lambda_assign_requires_semicolon

+legacy_control_comments

-jscript_function_extensions

-always_use_option_explicit

+recurse
+process js/app.js

我们需要修改的目前就是这个

 +process

当然这里也是支持与任意字符匹配的

 +process js/*.js

jsl检验javascript

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

app.js

0 error(s), 0 warning(s)

没有报错,说明语法上还是可以的?

jslint检测内容

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

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

jslint

安装jslint

 sudo npm install -g jslint

然后jslint app.js

slint app.js

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.
    para.style.color="blue"; // Line 2, Pos 1
 #6 Expected 'para' at column 1, not column 2.
    para.style.color="blue"; // Line 2, Pos 2
 #7 Missing space between 'color' and '='.
    para.style.color="blue"; // Line 2, Pos 18
 #8 Missing space between '=' and 'blue'.
    para.style.color="blue"; // Line 2, Pos 19

瞬间觉得这个世界不会再友爱了,这个是原来的app.js

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

不过其实主要问题是=号两边要有空格。

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

新的结果

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

so,还是不支持DOM元素


或许您还需要下面的文章:

关于我

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

微信公众号(Phodal)

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

QQ技术交流群: 321689806

新书《前端架构:从入门到微前端》

《前端架构:从入门到微前端》是一本围绕前端架构的实施手册,从基础的架构规范,到如何设计前端架构,再到采用微前端架构拆分复杂的前端应用。本书通过系统地介绍前端架构世界的方方面面,来帮助前端工程师更好地进行系统设计。

前端架构包含以下五部分内容:

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

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Developer, Consultant, Writer, Designer

ThoughtWorks 高级咨询师

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

开源深度爱好者

出版有《前端架构:从入门到微前端》、《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 与我沟通

标签