脚本宝典收集整理的这篇文章主要介绍了JavaScript代码风格检查工具 - JSCS 介绍,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
JSCS 已过时,推荐使用 eslint
JSHint 可以帮助检测你的 JavaScript 代码中的错误和潜在的问题,而 JSCS 是一个 JavaScript 的代码风格检查工具,通过使用这两款 QA Tools 能在团队协作中大大提升代码的正确性、准确性、完整性、简洁性、统一性及易读性,下面介绍 JSCS 的基本使用。
Get Started
JSCS 提供了@L_304_2@,其中预置了当下比较流行的编码风格指南如 jQuery、airbnb、GOOGLE 等,你也可以针对项目对其进行任意配置,在使用之前先在你的环境中安装 JSCS :
Packages
brackets Extension: https://github.com/globexdesigns/brackets-jscs
Grunt task: https://github.com/jscs-dev/grunt-jscs/
Gulp task: https://github.com/jscs-dev/gulp-jscs/
OvercommIT Git PRe-commit hook manager: https://github.com/brigade/overcommit/
SublimeText 3 Plugin: https://github.com/SublimeLinter/SublimeLinter-jscs/
Syntastic VIM Plugin: https://github.com/scrooloose/syntastic/blob/master/syntax_checkers/javascript/jscs.vim/
Web Essentials for Visual Studio 2013: https://github.com/madskristensen/WebEssentials2013/
IntelliJ IDEA, RubyMine, WebStorm, PhpStorm, Pycharm plugin: https://www.jetbrains.com/webstorm/help/jscs.html
Presets
安装好 JSCS 后需要对其进行些设置,最简单的方法是使用下面概述的预置选项:
Airbnb — https://github.com/airbnb/javascript
Google — https://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml
MDCS — https://github.com/mrdoob/three.js/wiki/Mr.doob's-Code-Style™
node-style-guide - https://github.com/felixge/node-style-guide
Wikimedia — https://www.mediawiki.org/wiki/Manual:Coding_conventions/JavaScript
WordPress — https://make.wordpress.org/core/handbook/coding-standards/javascript/
Yandex — https://github.com/yandex/codestyle/blob/master/javascript.md
在项目根目录创建一个 .jscsrc
配置文件来改变或禁用任何预设规则,例如:
{
// 使用 jquery 编码风格规范
"preset": "jquery",
// 改变 requireCurlyBraces 规则
"requireCurlyBraces": null // or false
}
Tips:部分编辑器需重启才能使 .jscsrc
的更改生效。
Options
JSCS 提供了一些选项,你可以根据需要对其进行设置:
-
additionalRules (附加规则)
// 加载附加的规则路径
"additionalRules": ["project-rules/*.js"]
-
preset (用预置规则进行规则预设)
你可以选择一个默认的预置:"airbnb", "crockford", "google", "jquery", "mdcs", "node-style-guide", "wikimedia", "wordpress", "yandex".
你也可以从本地路径或节点模块加载
"preset": "jquery"
"preset": "./path-to-your-preset"
// If your preset called "jscs-your-preset-node_modules-path"
// You can either define full name or omit "jscs-" prefix -
"preset": "your-preset-node_modules-path"
你可以对任何预设的规则设置为 null 或 false 来进行禁用:
{
"preset": "jquery",
"requireCurlyBraces": null // or false
}
-
excludeFiles (对指定文件或目录禁用风格检查)
// 采用 glob 模式匹配,使用 `"!foo"` 来排除具体文件/文件夹
"excludeFiles": ["folder_to_exclude/**", "src/!(bar|foo)"]
默认排除 `node_modules` 文件夹
-
fileextensions (验证文件后缀名)
// 验证以 '.js' 和 '.jsx' 为后缀的文件,如果设置为 '*' 将验证任意文件类型
"fileExtensions": [".js", ".jsx"]
默认验证 `.js` 文件
-
maxErrors (设置错误要报告的最大数目)
"maxErrors": 10
默认:`50`
-
esnext (实验性,尝试使用 babler-jscs 解析 ES6+、JSX 及 Flow)
"esnext": true
-
es3 (使用 ES3 保留字)
"es3": true
-
verbose (为有错误的信息添加规则名称)
"verbose": true
默认:`false`
-
errorFilter (确定是否报告错误的筛选器函数)
"errorFilter": "path/to/my/filter.js"
默认:`false`
请参阅 [如何定义一个错误过滤器。](https://github.COM/jscs-dev/node-jscs/wiki/Error-filters)
Error Suppression
某些时候,你可能无法忍受 JSCS 严谨的验证规则,下面来看下如何压制这些错误提示:
Disabling a Rule
你可以在 .jscsrc
配置文件中改变或禁用任何规则,例如:
{
// 使用 jquery 编码风格规范
"preset": "jquery",
// 改变 requireCurlyBraces 规则
"requireCurlyBraces": null
}
Inline Comments
JSCS 支持两种注释方式来禁用或重新启用规则,在文件顶部放置 JSCS 注释可以禁用整个文件的规则检查:
/* jscs: disable */
/* jscs: enable */
// jscs: disable
// jscs: enable
你还可以用它们来以多种方式禁用规则:
-
禁用所有规则
var a = b;
// jscs:disable
var c = d; // 在这行及之后的所有错误都将被忽略
// jscs:enable
VAR e = f; // 在这行及之后的所有错误都将被报告
-
禁用特定的规则
// jscs:disable requireCurlyBraces
if (x) y(); // 在这行及之后的所有 requireCurlyBraces 错误都将被忽略
// jscs:enable requireCurlyBraces
if (z) a(); // 在这行及之后的所有错误包括 requireCurlyBraces 错误都将被报告
-
禁用特定的规则对于单行
对单行进行特定规则忽略:
if (x) y(); // jscs:ignore requireCurlyBraces
if (z) a();
禁用一个特定规则后,你可以启用所有规则,该规则将重新启用。
// jscs:disable requireCurlyBraces
if (x) y(); // 在这行及之后的所有 requireCurlyBraces 错误都将被忽略
// jscs:enable
if (z) a(); // 在这行及之后的所有错误包括 requireCurlyBraces 错误都将被报告
你可以同时禁用多个规则,并逐步重新启用它们:
// jscs:disable requireCurlyBraces, requiredotNotation
if (x['a']) y(); // 在这行及之后的所有 requireCurlyBraces 或 requireDotNotation 错误都将被忽略
// jscs:enable requireCurlyBraces
if (z['a']) a(); // 在这行及之后的所有错误包括 requireDotNotation 错误都将被报告,但 requireCurlyBraces 错误将被忽略
// jscs:enable requireDotNotation
if (z['a']) a(); // 在这行及之后的所有错误都将被报告
以上是脚本宝典为你收集整理的JavaScript代码风格检查工具 - JSCS 介绍全部内容,希望文章能够帮你解决JavaScript代码风格检查工具 - JSCS 介绍所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。