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(); // 在這行及以後的全部錯誤都將被報告