Nodejs静态测试技术选型

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

JSHint

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

开始

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

    npm install -g jshint
    

配置

全局配置

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

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

  • 在根目录下新建.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忽略。

配置 & 规则选项

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

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的集成

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,904评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,581评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,527评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,463评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,546评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,572评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,582评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,330评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,776评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,087评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,257评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,923评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,571评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,192评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,436评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,145评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,127评论 2 352

推荐阅读更多精彩内容

  • ESLint 配置 ESlint 被设计为完全可配置的,这意味着你可以关闭每一个规则而只运行基本语法验证,或混合和...
    静默虚空阅读 41,259评论 3 14
  • 前言 对于少量的代码,我们通常能够通过肉眼或者代码编辑器,甚至控制台出现的错误,找出对应有问题的代码行,可以进行排...
    itclanCoder阅读 1,436评论 1 2
  • EsLint入门学习整理 这两天因为公司要求,就对ESLint进行了初步的了解,网上的内容基本上都差不多,但是内容...
    点柈阅读 26,016评论 3 42
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,647评论 18 139
  • ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的...
    gavinDu阅读 1,795评论 1 1