其实这几个工具适合所有的js代码静态测试，这边给出通用于nodejs的配置方案，适合所有的nodejs开发人员使用，有可以直接使用的node测试配置文件，也方便大家对Nodejs静态测试的技术选型。
JSHint
JSHint是一个javascript代码分析检测工具，不仅可以帮助我们检测到js代码错误和潜在问题，也能帮助我们规范代码开发。但是现在规范代码风格的工作交给了我们第二部分要讲的jscs中。
开始
-
保证node的环境，然后直接使用npm安装
npm install -g jshint
配置
全局配置
有三种不同的配置方式，不过还是推荐第二种。
-
通过
--config <option>，后面添加配置值。 -
在根目录下新建.jshintrc文件进行配置，每个项目可以有不同的配置文件，在任何地方使用jshint都会使用其所在目录树的配置文件。
-
将配置添加在package.json的jshintConfig参数下面。它和配置在.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的集成。
网友评论