Nodejs静态测试技术选型

其实这几个工具适合所有的js代码静态测试,这边给出通用于nodejs的配置方案,适合所有的nodejs开发人员使用,有可以直接使用的node测试配置文件,也方便大家对Nodejs静态测试的技术选型。

JSHint

JSHint是一个javascript代码分析检测工具,不仅可以帮助我们检测到js代码错误和潜在问题,也能帮助我们规范代码开发。但是现在规范代码风格的工作交给了我们第二部分要讲的jscs中。

开始

  • 保证node的环境,然后直接使用npm安装

    npm install -g jshint
    

配置

全局配置

有三种不同的配置方式,不过还是推荐第二种。

  • 通过 --config ,后面添加配置值。

  • 在根目录下新建.jshintrc文件进行配置,每个项目可以有不同的配置文件,在任何地方使用jshint都会使用其所在目录树的配置文件。

  • 将配置添加在package.jsonjshintConfig参数下面。它和配置在.jshintrc文件中的效果是一致的。

    "jshintConfig": {
        "undef": true,
        "unused": true,
        "predef": [
          "module",
          "console",
          "node"
        ]
    },
    

内联模式

通过以上的配置方案都是对一个项目中的所有JavaScript代码进行同样的测试,是一种全局配置方案。还有一种方案可以在每个文件当中进行内联,这样可以对一些特殊的JavaScript文件进行定制。

  • 文件头内联

    /* jshint undef:true, unused: true */
    /* globals MY_GLOBAL */
    

    这样仅仅对这个文件进行测试。

  • 忽略内联

    // 忽略文件的开始
    /* jshint ignore:start */
    // 忽略文件的结束
    /* jshint ignore:end */
    

    在jshint ignore:start和ignore:end之间的所有代码都将被JSHint忽略。

配置 & 规则选项

有很多文章都对配置进行了分析,这里就不赘述。

  • JSHint配置项说明 (中文)
  • JSHint Options (英文)

Node项目规则配置

{
  // 所有使用的变量都必须已定义
  "undef": true,
  // 所有定义的变量都必须被使用
  "unused": true,
  // 循环体是否用括号包围
  "curly": true,
  // 使用的es版本
  "esversion": 6,
  // 强制使用三联等
  "eqeqeq": true,
  // 检查无效typeof的值
  "notypeof": true,
  // 禁止使用var声明变量
  "varstmt": true,
  // 禁止从外部访问内部变量
  "funcscope": true,
  // 设置代码最大嵌套深度(多层异步回调用promise优化,多层判断进行封装)
  "maxdepth": 2,
  // 形参最大数量(多于3个用对象封装)
  "maxparams": 3,
  // 检查逗号在行前的编程风格
  "laxcomma": false,
  // 暴露的全局变量
  "globals": {
    "node": true,
    "console": true,
    "module": true
  }
}

jscs

jscs是一个很好用的代码风格检测工具,它还包含了一些已经配置好的代码风格可以供你使用,同样也可以自己拓展更多的选项来对代码进行检测。

开始

  • 保证node的环境,然后直接使用npm安装

    npm install -g jscs
    

配置

全局配置

在项目根目录创建一个 .jscsrc 配置文件来进行全局的检测配置,例如:

{
    // 使用 jquery 编码风格规范 
    "preset": "jquery",
    // 改变 requireCurlyBraces 规则
    "requireCurlyBraces": null
} 

常用配置

现在最全的只有英文文档,有时间去翻译一发。下面仅给出一些常用配置项,附上官方文档:jscs rules

  • preset: 预置规则进行规则预设,官方预设 jscs presets,当然也可以添加本地的设置模板。只要设置 requireCurlyBraces:null 就可以使得所有的预设规则失效。

  • fix(true | false): 是否自动修复风格

  • additionalRules: 附加规则的文件

    "additionalRules": ["project-rules/*.js"]
    
  • excludeFiles: 对指定文件或目录禁用风格检查,默认排除 node_modules.git文件夹

    "excludeFiles": ["folder_to_exclude/**", "src/!(bar|foo)"]
    
  • fileExtensions: 验证文件后缀名,即仅对这些后缀名文件进行检测,默认是 .js

    "fileExtensions": [".js", ".jsx"]
    
  • extract: 设置附加的内嵌js文件的格式,一般是.html, .htm, .xhtml

    "extract": ["*.html", "*.htm"]
    
  • maxErrors: 设置错误要报告的最大数目,默认50

  • verbose(true | false): 为有错误的信息添加规则名称

node-style-guide

当然作为node工程师,最关心的还是node的代码风格,其实在官方推荐的preset中有 node_style_guide 但是我在3.0.7版本中使用 node_style_guide 时,报错说这个模板已经不存在了,所以下面给出详细文件。

{
    "disallowKeywords": ["with"],
    "disallowKeywordsOnNewLine": ["else"],
    "disallowMixedSpacesAndTabs": true,
    "disallowMultipleVarDecl": "exceptUndefined",
    "disallowNewlineBeforeBlockStatements": true,
    "disallowQuotedKeysInObjects": true,
    "disallowSpaceAfterObjectKeys": true,
    "disallowSpaceAfterPrefixUnaryOperators": true,
    "disallowSpacesInFunction": {
        "beforeOpeningRoundBrace": true
    },
    "disallowSpacesInsideParentheses": true,
    "disallowTrailingWhitespace": true,
    "maximumLineLength": 80,
    "requireCamelCaseOrUpperCaseIdentifiers": true,
    "requireCapitalizedComments": true,
    "requireCapitalizedConstructors": true,
    "requireCurlyBraces": true,
    "requireSpaceAfterKeywords": [
        "if",
        "else",
        "for",
        "while",
        "do",
        "switch",
        "case",
        "return",
        "try",
        "catch",
        "typeof"
    ],
    "requireSpaceAfterLineComment": true,
    "requireSpaceAfterBinaryOperators": true,
    "requireSpaceBeforeBinaryOperators": true,
    "requireSpaceBeforeBlockStatements": true,
    "requireSpaceBeforeObjectValues": true,
    "requireSpacesInFunction": {
        "beforeOpeningCurlyBrace": true
    },
    "requireTrailingComma": {
        "ignoreSingleLine": true
    },
    "requireEarlyReturn": true,
    "validateIndentation": 2,
    "validateLineBreaks": "LF",
    "validateQuoteMarks": "'"
}

内嵌配置

  • 禁用所有规则

    // jscs:disable
    // 在这之间的所有错误都将被忽略
    // jscs:enable
    
  • 禁用特定的规则

    // jscs:disable requireCurlyBraces
    // 在这之间的所有 requireCurlyBraces 错误都将被忽略
    // jscs:enable requreCurlyBraces
    
  • 对单行进行特定规则忽略

    if (x) y(); // jscs: ignore requireCurlyBraces
    

ESLint

好了,介绍完上面两个各有所长的工具后,来介绍一个推出不久,集他们所长的工具。

开始

  • 保证node的环境,然后直接使用npm安装

    npm install -g eslint
    

配置

新建配置

$ eslint --init

这里可以选择自己配置,也可以选择使用流行的代码样式模块

常用配置

ESLint官网有配置的介绍,这边就只介绍一些常用配置,详细的可以查看 ESLint Configuration

  • env: 指定js代码的运行环境,以及es版本

    env: {
       node: true,
       es6: true
    }
    
  • extends: 包含一系列的核心模块,能报告一些常见的问题,一般会像下方一样设置

    extends: 'eslint: recommended'
    
  • rules: 启用的规则及各自的错误级别

  • globals: 指出要使用的全局变量,设置变量等于 true 允许被重写,或 false不允许被重写。

    globals: {
        var1: true,
        var2: false
    }
    

内联配置

与前两种工具一样,ESLint也支持内联配置,使用方法也非常的相似。这里就不赘述,可以查看 Disabling Rules with Inline Comments 。

规则

有很多前人已经翻译了大部分的规则文档,这里就不赘述。详细的可以查看 Eslint 规则说明 。

规则一般使用格式 rule: [{error-level, error-option}] ,第一个参数代表规则的错误级别:off或者0表示关闭规则;warn或者1表示开启规则,使用警告级别的错误,不会导致程序退出;error或者2表示开启规则,使用错误级别的错误,会导致程序退出。

node配置

{
  "env": {
    "es6": true,
    "node": true
  },
  "extends": "eslint:recommended",
  "parserOptions": {
    "sourceType": "module"
  },
  "rules": {
    // 数组内的括号紧挨不能有空格
    "array-bracket-spacing": [2, "never"],
    // 强制把变量的使用限制在其定义的作用域范围内
    "block-scoped-var": 2,
    // 大括号风格为缩进风格
    "brace-style": [2, "1tbs"],
    // 强制使用骆驼拼写法命名约定
    "camelcase": 1,
    // 强制在计算的属性的方括号中不使用的空格
    "computed-property-spacing": [2, "never"],
    // 强制所有控制语句在多条时必须使用括号包含
    "curly": [2, "multi"],
    // 要求或禁止文件末尾存在空行
    "eol-last": 2,
    // 智能强制使用三联等
    "eqeqeq": [2, "smart"],
    // 强制使用2个空格缩进
    "indent": ["error", 2],
    // 强制可嵌套的块的最大深度为3
    "max-depth": [1, 3],
    // 强制一行的最大长度为80
    "max-len": [1, 80],
    // 强制函数块最多允许的的语句数量为50行
    "max-statements": [1, 50],
    // 要求构造函数首字母大写
    "new-cap": 1,
    // 禁止扩展原生类型
    "no-extend-native": 2,
    // 禁止空格和 tab 的混合缩进
    "no-mixed-spaces-and-tabs": 2,
    // 禁用行尾空格
    "no-trailing-spaces": 2,
    // 禁止出现未使用过的变量
    "no-unused-vars": 1,
    // 禁止在变量定义之前使用它们
    "no-use-before-define": [2, "nofunc"],
    // 关闭禁用console报错
    "no-console": 0,
    // 不允许花括号紧挨处有空格
    "object-curly-spacing": [2, "never"],
    // 统一使用单引号,字符串中允许混用
    "quotes": [2, "single", "avoid-escape"],
    // 强制全部使用分号
    "semi": [2, "always"],
    // 关键字前后强制使用空格
    "keyword-spacing": [2, {"before": true, "after": true}],
    // 强制在一元操作符前后使用一致的空格
    "space-unary-ops": 2
  }
}

写在最后

花了一天时间来对这些工具进行测试使用,不管是从生态环境还是使用体验来说,我还是推荐ESLint。比如对于React代码的检测支持,ESLint可以使用插件测试,非常的方便。而且从自定义程度和扩展性上来说也更胜一筹。虽然它的运行速度比其他工具稍慢,但是这样一体化的体验还是非常棒的。所以尽情的使用吧,后面还会继续更新gulp对ESLint的集成

你可能感兴趣的:(Nodejs静态测试技术选型)