我不能再忍受你的代碼風格了！——JSCS

不管人數多少，代碼都應該同出一門。

JavaScript 或者 Node 的語法自己很弱，在teamwork 和大型項目開發的時候，技術選型時每每選擇了 typescript 或者加入 Facebook 的 flow 工具。可是對於代碼風格，確實難以統一江山。

每一個開發者會有本身的開發習慣，本身喜歡的編輯器，代碼風格更加是千差萬別。進入 Team work 以後，團隊管理的第一件事情就是定義規範，文件命名，目錄結構，代碼風格。就像這樣

而後會組織屢次會議，一塊兒學習研究規範, 一次又一次。而後在 code review 的時候指出，這裏不符合規範，那邊命名有問題。時間久了，你們對於規範的印象和要求就弱了。若是有新員工入職，那他又得從新學一遍代碼風格規範，誰知道，新員工對團隊代碼風格接受和學習得怎麼樣呢？代碼風格的問題一直困擾了好久。

固然咱們也作了不少嘗試，比較加入 jshint、grunt 編譯的時候，執行 css、js 檢查。更加喪心變狂的是，加入了 .git/pre-commit ，在 git 提交的時候，必須經過預檢查，才能提交。這種方式過於粗暴，可配置的內容也不夠靈活。只能噁心一下本身，並無在開發團隊推廣起來。

來的不早也不晚，JSCS 恰巧就這樣出現了。歷來沒有見過這麼強大的代碼格式化和風格統一工具。

正如官方介紹：

JSCS is a code style linter/formatter for programmatically enforcing your style guide. You can configure JSCS for your project/company using over 150 validation rules, including presets from popular style guides like jQuery, Airbnb, Google, and more.

優勢

1. JSCS 有超過150種代碼驗證規則。

2. 你能夠預設像 Google、Airbnb 等公司的代碼風格。

3. JSCS 能夠幫你檢查，甚至按照你的預設風格格式化代碼。當執行 jscs app/ --fix 的時候，項目的代碼風格立馬和 Airbnb 保持一致了，我還像個沒見過世面的人同樣驚歎了一番。

4. 支持 ES2015, JSX, Flow 等。它能夠驗證任何有效的 babel 代碼

5. 支持絕大多數開發工具和環境。Grunt Task、Atom、Sublime Text、Intellij IDEA、WebStrom、RubyMine 等等。全部工具的安裝辦法

6. 自動生成你的代碼風格的配置文件。jscs --auto-configure src 。好比：個人團隊代碼風格很牛掰，不須要引入其餘的代碼風格，那這一行命令，就可讓全部風格統一塊兒來。

你要知道，Airbnb 的 javascript 代碼風格在 github 裏有3.4W+ star。 https://github.com/airbnb/javascript

學會 Airbnb 的代碼規範，意味着你的代碼風格已經走在了世界第一行列。代碼功底沒到第一線，至少代碼風格提上來了，值得你裝逼了。少年，激動吧。

這份文檔涵蓋了 js 的全部方法面面，對於 web 開發再合適不過了。

上手

安裝

npm install jscs -g

運行

jscs path[ path[...]]

你也能夠注入到 JSCS

cat myfile.js | jscs

進階

開發工具能夠自動讀取項目中的 .jscsrc 文件，來進行 JSCS 檢查，而且 格式化好你的代碼 。配置文件舉例：

{
  // 使用 jquery 編碼風格規範
  "preset": "airbnb",
  "fix": true,
  "maxErrors": 50,
  "fileExtensions": [".js", ".jsx"],
  "excludeFiles": []

  // 改變 requireCurlyBraces 規則
  //"requireCurlyBraces": null // or false

}

經常使用配置

1. preset （用預置規則進行規則預設）

2. fix (true|false) 是否自動修復風格

3. additionalRules （附加規則）

4. excludeFiles （對指定文件或目錄禁用風格檢查,默認排除 node_modules 文件夾）"excludeFiles": ["folder_to_exclude/**", "src/!(bar|foo)"]

5. fileExtensions （驗證文件後綴名） "fileExtensions": [".js", ".jsx"]

6. maxErrors （設置錯誤要報告的最大數目，默認50）

7. esnext 默認的。對於es2015的支持

8. es3 過期了，不要管了

9. verbose (true|false)（爲有錯誤的信息添加規則名稱）

10. errorFilter （默認 false, 不然配置路徑） （肯定是否報告錯誤的篩選器函數）

錯入容忍

你能夠書寫默寫規則，讓 JSCS 容忍某些錯誤。全部的規則均可以在這裏查到：http://jscs.info/rules

1. 能夠直接設置規則爲 null ,

   {
       "preset": "jquery",
       "requireCurlyBraces": null
   }

2. 禁用全部規則

   var a = b;
   
   // jscs:disable
   var c = d; // 在這行及以後的全部錯誤都將被忽略
   
   // jscs:enable
   var e = f; // 在這行及以後的全部錯誤都將被報告

3. 禁用特定的規則

   // jscs:disable requireCurlyBraces
   if (x) y(); // 在這行及以後的全部 requireCurlyBraces 錯誤都將被忽略
   
   // jscs:enable requireCurlyBraces
   if (z) a(); // 在這行及以後的全部錯誤包括requireCurlyBraces 錯誤都將被報告

4. 對單行進行特定規則忽略

   if (x) y(); // jscs:ignore requireCurlyBraces
    if (z) a();

5. 禁用一個特定規則後，你能夠啓用全部規則，該規則將從新啓用。

   // jscs:disable requireCurlyBraces
       if (x) y(); // 在這行及以後的全部 requireCurlyBraces 錯誤都將被忽略
   
       // jscs:enable
       if (z) a(); // 在這行及以後的全部錯誤包括 requireCurlyBraces 錯誤都將被報告

6. 你能夠同時禁用多個規則，並逐步從新啓用它們：

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

7. 爲某個文件禁用全部規則
   在文件第一行寫上:

   // jscs:disable

若是 JSCS 還不能知足你和你團隊對代碼風格的要求，麻煩告知一個更好的辦法給我！