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

JSCS 已过时，推荐使用 eslint

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

Get Started

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

Packages

• Atom plugin: https://atom.io/packages/linter-jscs

• 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

• Crockford — http://javascript.crockford.com/code.html

• Google — https://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml

• Grunt — http://gruntjs.com/contributing#syntax

• jQuery — https://contribute.jquery.org/style-guide/js/

• 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(); // 在这行及之后的所有错误都将被报告