JavaScript代码风格检查工具 - JSCS 介绍

byc7 9年前

JSHint 可以帮助检测你的 JavaScript 代码中的错误和潜在的问题,而 JSCS 是一个 JavaScript 的代码风格检查工具,通过使用这两款 QA Tools 能在团队协作中大大提升代码的正确性、准确性、完整性、简洁性、统一性及易读性,下面介绍 JSCS 的基本使用。

SublimeLinter-jscs demo

Get Started

JSCS 提供了150余项验证规则,其中预置了当下比较流行的编码风格指南如 jQuery、Airbnb、Google 等,你也可以针对项目对其进行任意配置,在使用之前先在你的环境中安装 JSCS :

Packages

ATOM JSCS Linter demo

Presets

安装好 JSCS 后需要对其进行些设置,最简单的方法是使用下面概述的预置选项:

在项目根目录创建一个.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(); // 在这行及之后的所有错误都将被报告
来自:http://segmentfault.com/a/1190000003701128