JavaScript代碼風格檢查工具 - JSCS 介紹
JSHint 可以幫助檢測你的 JavaScript 代碼中的錯誤和潛在的問題，而 JSCS 是一個 JavaScript 的代碼風格檢查工具，通過使用這兩款 QA Tools 能在團隊協作中大大提升代碼的正確性、準確性、完整性、簡潔性、統一性及易讀性，下面介紹 JSCS 的基本使用。
Get Started
JSCS 提供了150余項驗證規則，其中預置了當下比較流行的編碼風格指南如 jQuery、Airbnb、Google 等，你也可以針對項目對其進行任意配置，在使用之前先在你的環境中安裝 JSCS ：
Packages
-
Atom plugin: https://atom.io/packages/linter-jscs
</li> -
Brackets Extension: https://github.com/globexdesigns/brackets-jscs
</li> -
Grunt task: https://github.com/jscs-dev/grunt-jscs/
</li> -
Gulp task: https://github.com/jscs-dev/gulp-jscs/
</li> -
Overcommit Git pre-commit hook manager: https://github.com/brigade/overcommit/
</li> -
SublimeText 3 Plugin: https://github.com/SublimeLinter/SublimeLinter-jscs/
</li> -
Syntastic VIM Plugin: https://github.com/scrooloose/syntastic/blob/master/syntax_checkers/javascript/jscs.vim/
</li> -
Web Essentials for Visual Studio 2013: https://github.com/madskristensen/WebEssentials2013/
</li> -
IntelliJ IDEA, RubyMine, WebStorm, PhpStorm, PyCharm plugin: https://www.jetbrains.com/webstorm/help/jscs.html
</li> </ul>
Presets
安裝好 JSCS 后需要對其進行些設置，最簡單的方法是使用下面概述的預置選項：
-
Airbnb — https://github.com/airbnb/javascript
</li> -
Crockford — http://javascript.crockford.com/code.html
</li> -
Google — https://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml
</li> - </li>
- </li>
-
MDCS — https://github.com/mrdoob/three.js/wiki/Mr.doob's-Code-Style?
</li> -
node-style-guide - https://github.com/felixge/node-style-guide
</li> -
Wikimedia — https://www.mediawiki.org/wiki/Manual:Coding_conventions/JavaScript
</li> -
WordPress — https://make.wordpress.org/core/handbook/coding-standards/javascript/
</li> -
Yandex — https://github.com/yandex/codestyle/blob/master/javascript.md
</li> </ul>在項目根目錄創建一個.jscsrc配置文件來改變或禁用任何預設規則，例如：
{ // 使用 jquery 編碼風格規范 "preset": "jquery",// 改變 requireCurlyBraces 規則 "requireCurlyBraces": null // or false}</pre>
Tips：部分編輯器需重啟才能使.jscsrc的更改生效。
Options
JSCS 提供了一些選項，你可以根據需要對其進行設置：
-
additionalRules （附加規則）
// 加載附加的規則路徑 "additionalRules": ["project-rules/*.js"]</li> -
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 }</pre></li> -
excludeFiles （對指定文件或目錄禁用風格檢查）
// 采用 glob 模式匹配，使用
"!foo"來排除具體文件/文件夾 "excludeFiles": ["folder_to_exclude/**", "src/!(bar|foo)"]默認排除
node_modules文件夾</pre></li> -
fileExtensions （驗證文件后綴名）
// 驗證以 '.js' 和 '.jsx' 為后綴的文件，如果設置為 '*' 將驗證任意文件類型 "fileExtensions": [".js", ".jsx"]默認驗證
.js文件</pre></li> -
maxErrors （設置錯誤要報告的最大數目）
"maxErrors": 10
默認：
50</pre></li> -
esnext （實驗性，嘗試使用 babler-jscs 解析 ES6+、JSX 及 Flow）
"esnext": true
</li> -
es3 （使用 ES3 保留字）
"es3": true
</li> -
verbose （為有錯誤的信息添加規則名稱）
"verbose": true
默認：
false</pre></li> -
errorFilter （確定是否報告錯誤的篩選器函數）
"errorFilter": "path/to/my/filter.js"
默認：
false請參閱 如何定義一個錯誤過濾器。</pre></li> </ul>
Error Suppression
某些時候，你可能無法忍受 JSCS 嚴謹的驗證規則，下面來看下如何壓制這些錯誤提示：
Disabling a Rule
你可以在.jscsrc配置文件中改變或禁用任何規則，例如：
{ // 使用 jquery 編碼風格規范 "preset": "jquery",// 改變 requireCurlyBraces 規則 "requireCurlyBraces": null}</pre>
Inline Comments
JSCS 支持兩種注釋方式來禁用或重新啟用規則，在文件頂部放置 JSCS 注釋可以禁用整個文件的規則檢查：
/ jscs: disable / / jscs: enable /
// jscs: disable // jscs: enable</pre>
你還可以用它們來以多種方式禁用規則：
-
禁用所有規則
var a = b; // jscs:disable var c = d; // 在這行及之后的所有錯誤都將被忽略 // jscs:enable var e = f; // 在這行及之后的所有錯誤都將被報告</li> -
禁用特定的規則
// jscs:disable requireCurlyBraces if (x) y(); // 在這行及之后的所有 requireCurlyBraces 錯誤都將被忽略 // jscs:enable requireCurlyBraces if (z) a(); // 在這行及之后的所有錯誤包括 requireCurlyBraces 錯誤都將被報告</li> -
禁用特定的規則對于單行
對單行進行特定規則忽略：
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(); // 在這行及之后的所有錯誤都將被報告</pre></li>
-
-
-