前端代碼風格檢查套件 FECS

fecs 是以百度前端代碼規范為目標的前端代碼風格套件，套件包括 htmlcs 、 csshint 、 lesslint 和 jformatter ，此外還有社區的相關開源模塊

、csscomb、fixmyjs 和 esformatter：

顯而易見，fecs不僅能檢查 HTML/CSS/LESS/JavaScript 代碼的規范問題，而且還能修復代碼的規范問題。

代碼檢查

fecs-check

代碼的檢查，目前主要是以百度前端代碼規范（ JS / CSS / HTML ） 的檢查為首要目標，同時根據EFE 的技術規劃，為 Less 代碼規范 的檢查帶來了 lesslint。

JavaScript

相對于前端的其他語言，JS 的 linter 選擇眾多，然而我們最終選擇了 eslint，同時針對我們的代碼規范作了新的規則實現或調整（ FECS 自有規則 ）。至于選擇 eslint 的原因， 見《 JavaScript 代碼靜態質量檢查 》。

CSS

CSS 的 linter 相對于 JS 的則要少得多，基本上是 csslint 一枝獨秀，也因此造成了 csslint 更新慢，擴展性差的現狀，于是有了我們自己的 csshint，目標是比 csslint 更好用的 CSS linter。有關 CSS linter 的對比，參考 《CSS 代碼靜態質量檢查》。

Less

Less 2009 年才發布，而且最終會編譯為 CSS，因此針對 Less 的 linter 是少之又少，只有一個 基于 csslint 的 grunt-lesslint，因此我們需要 lesslint。由于 Less parser 生成的 AST 信息太少，不利于 linter 的檢查，我們正在開發用于 lesslint 的 Less parser。

HTML

雖然 HTML 語言歷史悠久，但是 Node.js 下的 linter 極少。相對而言，阿里同學的 htmlhint 已經是其中比較好用的。只可惜無法覆蓋我們的 HTML 規范，甚至有的規則實現與我們的規范背道而馳。我們用完全不同的思路實現了 htmlcs。htmlcs 創造性地在同一個規則下，實現 lint 和 format，這點 eslint 在 1.4.0 版本之后才實現。在 lint 方面，htmlcs 既支持在 parse 期訂閱事件實現語法及風格方面的規則，也支持構建虛擬 DOM 樹的檢查，因此 linter 的規則非常易于實現，內置的規則實現已經非常豐富。未來還有復雜的標簽嵌套檢查規則實現。對現有 HTML linter 的現狀感興趣的話，可以閱讀 《 HTML代碼風格檢查工具對比 》。

代碼修復

fecs-format

代碼修復方面，常見的各種 beautify 工具，主要負責格式化，目前所做的修復工作都比較有限，也正因為如此，未來代碼修復可做的事情非常多。

JavaScript

從圖中很明顯的看到，為了修復 JS 代碼，fecs 使用了 fixmyjs、jformatter 和 esformatter 三個的模塊。其中 fixmyjs 源于 jshint 團隊，除了少數幾個固定的修復，主要是針對 jshint 的檢查結果作修復，但實現的規則并不多，所以我們需要 jformatter。而 esformatter 是名副其實的只做格式化。另外，eslint在 1.4.0 版本之后開始支持--fix參數，借鑒 fixmyjs 針對檢查的結果作修復，只是直到最新的 1.8.0 版本，能修復的點仍然很少。

CSS/LESS

由于 CSS 的 語言特性，CSS 的代碼修復基本上只需要做 beautify，除了 cssbeautify 之外還有 cssfmt 與 perfectionist，其中 cssbeautify 功能比較簡單，而 cssfmt 和 perfectionist 都基于 postcss，同質化較嚴重。而 csscomb 相對來說是功能比較強大，目前由于屬性定義間換行的功能沒有實現，所以 fecs 引入較小的 cssbeautify 來解決。不過剛發現 csscomb 有space-between-declarations的實現，只要配置為\n即可實現不同屬性定義的換行，因此下個版本中將移除對 cssbeautify 的依賴。

HTML

htmlcs 實現了完整的 beautify 功能，同時針對某些規則作了修復，比如添加 doctype、頁面編碼和標題，移除冗余的 style 和 script 標簽的 type，布爾值屬性的處理等等。另外值得一提的是，對于 style 和 script 標簽的代碼，fecs 也能輕松處理。

其他

文件流轉

借鑒 gulp，通過 vinyl-fs 讀取文件流，glob pattern 通過子命令的參數指定：

當然也可以直接在.fecsrc或package.json中配置 files 節點，然后直接使用：

配置文件

配置文件的支持來自 manis ，支持使用.fecsrc或package.json，但以第一個找到的為準。下面以.fecsrc為例：

{
    "files": [],

    "eslint": {...},

    "csshint": {...},

    "htmlcs": {...},

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

files數組配置的是 fecs 要檢查的文件 pattern，在當前目錄下執行fecs命令不指定路徑或文件時使用。其他節點是針對相應模塊的配置。當使用package.json配置時，需將以上內容置于 fecs 節點。

錯誤報告

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

結果格式

各編輯器、IDE 對 linter 結果的格式，事實上的標準是 CheckStyle，為方便第三方工具，我們還另外提供有 XML、HTML 和 JSON 格式的檢查結果。