• jsHint-静态代码检查工具eclipse中使用


     

        今天介绍一个关于js静态代码的检查工具,此工具可以帮助更好的规范代码的编写形式以及检查错误。由于jslint的分支jsHint有跟多的配置项相对使用也比较方便,依次本文主要介绍jsHint的使用方式。

        以下为本文的目录:

    1. 关于jsHint的介绍

    2. 关于jsHint的安装

    3. 关于jsHint的使用

    4. 关于jsHint的下载

    1.关于jsHint的介绍

        jsHint是jsLint的分支其定义了更多的配置,使用也相对灵活,jsHint主要是用来对javascript静态代码进行规范性检查的,其定义了一些比较严格的规则,这些规则同时也可以自定义配置,关于更为详细的解释说明可以【点击查看jsHint官网】,另外可【点击查看jsLint百度百科解释】,【jsLint官网】。

    2.关于jsHint的安装

        jsHint在eclipse中的安装主要可以通过安装eclipse的插件的方式,此时需要像安装安卓adk一样,其安装方式分为离线安装和在线安装,在线安装方式为首先打开help>install new software>add然后输入一个名称,输入插件的地址,插件在线地址可从【插件网站获取】,其图例如下。

        另外离线安装方式需要先下载插件可【点击下载最新插件】,然后需要自己创造一个服务器容器例如使用tomcat或者apache容器都可以,然后将插件丢进容器中使其可访问即可,后面的步骤与上类似。

    3.关于jsHint的使用

        在eclipse中的安装完成后可以在window>preference中看到jsHint的配置选项,这里是eclipse的全局配置,图示如下:

        

        当然也可以进行单个项目的特定规则配置,可以选择单个项目并右键,点击jsHint选项,其中可以配置对哪些文件进行校验:

     

        最后点击jsHint下面的configuration配置可以设置具体的配置信息,图示如下:

        部分jsHin的解释如下:

    JSHint enforcing options
    =================
      
    #### * bitwise
        
        作用:值为true时,禁止使用位操作符,如"^,|,&"等.
        
    #### * camelcase
      
        作用:值为true时,变量名必须使用驼峰风格(如"loginStatus")或UPPER_CASE风格(如"LOGIN_STATUS").
        
    #### * curly
        
        作用:值为true时,不能省略循环和条件语句后的大括号.
        
        备注:如"if (con) ...",需要写成"if (con) { ... }".
        
    #### * eqeqeq
        
        作用:值为true时,禁止使用"=="和"!=",而应该使用"==="和"!==".
        
    #### * es3
        
        作用:值为true时,表示你的代码需要遵守ECMAScript 3规范.
        
    #### * forin
        
        作用:值为true时,在所有"for in"循环中,必须使用hasOwnPropery过滤掉对象继承来的成员.
        
    #### * immed
        
        作用:???.
        
    #### * indent
        
        作用:该选项要求你的代码必须使用指定的tab缩进宽度,如"indent:4".
        
    #### * latedef
        
        作用:值为true时,禁止在变量定义之前使用它.
        
    #### * newcap
        
        作用:值为true时,构造函数名需要大写. 
        
        备注:经测试,该选项是否激活,JSHint都不会检查构造函数名.
        
    #### * noarg
        
        作用:值为true时,禁止使用arguments.caller与arguments.callee.
        
    #### * noempty
        
        作用:值为true时,不允许代码中出现空的语句块("{}").
        
    #### * nonew
        
        作用:值为true时,禁止使用产生副作用的构造器调用方式,如"new MyConstructor();".
        
    #### * plusplus
        
        作用:值为true时,禁止使用一元递增("++")和递减("--")运算符.
        
    #### * quotmark
        
        作用:该选项用于统一代码中的引号风格,可选的值有三个:
              (1) single -- 只能使用单引号;
              (2) double -- 只能使用双引号;
              (3) true -- 两者任选其一,但不能同时出现.
        
    #### * undef
        
        作用:值为true时,禁止使用未定义的变量.
        
    #### * unused
        
        作用:该选项激活后,对于"已定义却未使用的变量"会给出警告,可选的值有三个:
              (1) vars -- 只检查变量,不检查函数形参;
              (2) strict -- 检查变量和函数形参;
              (3) true -- 检查变量和函数形参,但允许这种情况:一个未使用的形参后紧随一个被使用的形参.
              
        示例:strict与true的区别
              (1) strict
                  function show(x,y) {alert(y);}  // jshint校验结果:'x' is defined but never used
                  show(1);
              
              (2) true
                  function show(x,y) {alert(y);} // jshint校验结果:pass
                  show(1); 
            
    #### * strict
        
        作用:值为true时,该选项会要求所有函数在ECMAScript 5的严格模式中运行.
        
        备注:该选项激活后,仅在函数作用域中启用严格模式(如果在全局作用域中启用,可能会影响页面中的第三方JS).
    
    #### * trailing
    
        作用:值为true时,禁止在代码的末尾出现空白.
        
    #### * maxparams
    
        作用:该选项用于设置每个函数形参数量的上限,如"maxparams:3".
        
    #### * maxdepth
    
        作用:该选项用于设置每个函数中代码块嵌套层级的上限,如"maxdepth:1".
        
        示例:/* jshint maxdepth:1 */
              function show() {
                if (1) {
                  if (2) { // jshint校验结果:Blocks are nested too deeply. (2)
                    alert('the second nested');
                  }
                }
              }
        
    #### * maxstatements
    
        作用:该选项用于设置每个函数中语句数量的上限,如"maxstatements:4".
        
        备注:函数声明被看作一个语句.
        
        示例:/* jshint maxstatements:4 */
              function main() { // jshint校验结果:This function has too many statements. (5)
                var i = 0;
                var j = 0;
    
                // 函数声明被看作一个语句
                function inner() {
                  var i2 = 1;
                  var j2 = 1;
                  return i2 + j2;
                }
    
                j = i + j;
                return j;
              }
    
    #### * maxcomplexity
    
        作用:???
        
    #### * maxlen
    
        作用:该选项用于设定每行的最大字符长度.

    以上配置解释来自github【jsHint 配置项说明(汉化版)。  更详细可参考官网【点击进入官网】。

    4.关于jsHint的下载

        同样此处提供作者百度分享链接:

        jsHint插件下载【点击下载】。


    http://www.startexample.com/2014/05/11/jshint-%E9%9D%99%E6%80%81%E4%BB%A3%E7%A0%81%E6%A3%80%E6%9F%A5%E5%B7%A5%E5%85%B7eclipse%E4%B8%AD%E4%BD%BF%E7%94%A8/

  • 相关阅读:
    CSS总结(六)——元素的垂直居中(已知高度/未知高度)
    CSS总结(五)——定位 position
    CSS总结(四)—— CSS选择器优先级
    CSS总结(三)—— 盒子模型(标准/IE下)
    CSS总结(二)—— 浮动 与 清除浮动
    CSS总结(一)—— display三种元素(区别、重点、扩展)
    JavaScript学习笔记(九)—— JS 理解闭包
    严格模式use strict
    let、const和var的区别
    字符串方法
  • 原文地址:https://www.cnblogs.com/kungfupanda/p/4535847.html
Copyright © 2020-2023  润新知