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