前端代碼風格檢查套件 FECS

All code in any code-base should look like a single person typed it, no matter how many people contributed. — idiomatic.js
在任一個代碼庫中，無論是多少人協同開發，全部的代碼都應該看起來像是一我的寫的。- idiomatic.js

This means strictly enforcing these agreed upon guidelines at all times.

今天要講的不是代碼規範，關於代碼規範網上已經有了很是好的實踐和各大公司公開的實踐指南，你們可自行查詢。 例如: code-guide chinese.

然而，有了規範是一回事，執行起來又是一回事。今天要介紹的就是一款按照指定風格檢測代碼是否符合規範的工具，經過工具的自動檢測，以確保每一行代碼都符合規範。

FECS 是什麼？

fecs 是以百度前端代碼規範爲目標的基於 Node.js 的前端代碼風格檢測工具，套件內包括了 htmlcs、csshint、lesslint 和 jformatter 等工具。

所以，fecs 不只能檢查 HTML/CSS/LESS/JavaScript 代碼的規範問題，並且還能修復代碼的規範問題。

FECS 能幹什麼？

fecs check

首先，主要功能就是代碼格式的檢查，固然了呢，由於是最初是供於百度內部使用的工具，天然就是以 百度前端代碼規範 爲首要目標，好在該規範第一開源，第二還不錯，所以能夠直接使用。

固然了，若是你不喜歡其中的某些規則，FECS 也是支持配置文件設置規則的方式的，具體的在下文說明。

須要說明的是，FECS 目前只支持 HTML/CSS/LESS/JavaScript 四種文件和語法的檢測。

Javascript

Javascript 方面 FECS 採用了 eslint 檢測引擎，所以你在自定義規則的時候能夠參考 esling 的文檔進行相關配置。FECS 只是在 eslint 基礎之上針對百度的代碼規範做了新的規則實現或調整。詳細內容見 FECS 自有規則

CSS/LESS/HTML

CSS 的 linter 是使用了內部優化過的 csshint。LESS 和 HTML 方面則分別使用了 lesslint 和 htmlcs。

FECS 的安裝及其使用

安裝

安裝 FECS 須要依賴 node npm 環境支持，執行如下命令便可安裝:

$ [sudo] npm install fecs -g

使用

使用方式可以使用如下命令查看:

$ fecs --help
$ fecs check --help
$ fecs format --help

具體的命令參數？哎呀，官方已經寫的夠詳細的了，仍是看官方文檔吧: FECS 命令參數

自定義配置

FECS 支持經過配置文件的方式指定特定的規則。

配置文件的支持來自 manis，支持使用 .fecsrc 或 package.json，但以第一個找到的爲準。配置文件 .fecsrc 大致是這個樣子的:

{
    "files": [],

    "eslint": {...},

    "csshint": {...},

    "htmlcs": {...},

    "csscomb": {...}
    ...
}

好比說他們的JavaScript編碼規範 中關於換行中有這樣一條 對於if...else...try...catch...finally 等語句，推薦使用在 } 號後添加一個換行的風格，使代碼層次結構更清晰，閱讀性更好，這一條我就很不喜歡嘛，那我能夠這樣配置:

{
    "eslint": {
        "rules": {
            "brace-style": [2, "1tbs", {}]
        }
    }
}

這樣配置以後再進行檢測，就能愉快的按照下面這種寫法愉快的 coding 了。

if (condition) {
    // some statements;
} else {
    // some statements;
}

多工具支持

詳情支持列表請參考官方文檔 工具支持。

嗯。文檔依舊寫的很完善，基本上已經沒什麼好補充的了。

在這裏我有一個小提示，就是工具對 atom 編輯器的支持相對於對 sublime 的支持來講要優秀不少， 包括檢測速度呀，錯誤提示呀，atom 都略稱一籌，這取決於 atom 優秀的插件機制。而且我在 sublime下面使用的時候發現了一個 bug，就是錯誤提示會顯示爲特殊編碼致使沒法以中文顯示。解決方案呢，在這裏https://github.com/leeight/Baidu-FE-Code-Style/issues/6，不過感受略麻煩的樣子。

Tips:

FECS 的錯誤報告默認爲英文格式，由各 linter 直接提供。FECS 根據百度前端代碼規範，做了一次影射轉換，經過指定 reporter 爲 baidu 能夠看到中文的報告輸出效果，對於某些比較抽象的描述，會同時在括號內提供英文原文補充說明。

例如，你能夠這樣用:

fecs check --reporter=baidu

或者，更直接一點，直接添加一個 alias，使其在執行 fecs check 命令時默認爲中文輸出。

alias fecs='fecs --reporter=baidu'

相關連接:

• FECS 官網

• FECS WIKI

• FECS Github