自動化代碼規範

自動化代碼規範

學習map:

• 自動化代碼規範有哪些方法
• 根據本team的需求肯定解決方案
• 安裝 & 使用示例
• 總結

自動化代碼規範有哪些方法

從工具角度來講，Grunt等構建工具、Sublime等IDE均可以幫助檢測代碼中的錯誤和潛在的問題，從提示時機來講，有編寫實時提示和編譯後提示兩種，通過和mentor毛毛的討論，大概可能有如下幾種解決方案：

• FIS 插件（咱們項目使用FIS作前端集成解決方案）
• Grunt 插件
• 編譯後terminal 或者瀏覽器的console 裏提示
• 編輯時IDE裏提示
• sublimeLinter jscs jshint csslint

根據本TEAM的需求肯定解決方案

咱們team的js代碼規範主要繼承自node-style和google-js-style ，我的喜愛，以爲編輯時檢查簡直棒棒的，就像下面這種：

根據上述需求，使用SublimeLinter(Sublime Text的一款插件)、JSHint、JSCS、CSSLint這幾款QA Tools來提高團隊協做中代碼的正確性、準確性、完整性、簡潔性、統一性及易讀性。

下面介紹這幾款工具：

SublimeLinter是一個Sublime Text 3的插件，能夠在編輯時檢測代碼中的錯誤和潛在的問題的，並給出相應的提示。

jshint和csslint自己是命令行工具，依賴node.js環境。他們對應的SublimeLinter插件分別是SublimeLinter-jshint、SublimeLinter-csslint，插件調用node的對應方法，因此咱們在使用以前要經過npm install -g來安裝。

JSCS是一個js的代碼風格檢查工具，他預置了當下比較流行的編碼風格指南如 jQuery、Airbnb、Google等，你也能夠針對項目對其進行任意配置；他對應的SublimeLinter 插件是SublimeLinter-jscs。

綜上，咱們只須要在Sublime裏安裝四個插件，在命令行執行2個命令，在項目根目錄放置.jshintrc.csslintrc.jscsrc三個配置文件(todo文末給出如今地址)，就能夠實時檢測代碼質量了。

安裝 & 使用示例

node.js的環境你們都有了，在命令行執行

npm install -g csslint jshint 

打開Sublime Text 3的控制面板，使用packageControl安裝插件:SublimeLinter、SublimeLinter-jshint、SublimeLinter-jscs、SublimeLinter-csslint

PS：若是尚未下載 | 安裝，點擊文中錨點傳送門就行。保險起見，安裝好後，請重啓IDE。

在項目根目錄建立.jshintrc，內容以下：

{ "strict": true, "nonew": true, "maxdepth": 5, "indent": 4, "curly": true, "eqeqeq": false, "immed": true, "noarg": true, "noempty": true, "quotmark": "single", "undef": true, "latedef": true, "regexp": true, "bitwise": false, "unused": true, "forin": true, "trailing": true, "smarttabs": true, "funcscope": true, "newcap": true, "camelcase": false, "devel": false, "freeze": true, "predef": [ "define", "require", "exports", "module", "describe", "before", "beforeEach", "after", "afterEach", "it" ], "globals": { "jQuery": true, "requirejs": true, "next": true, "angular": true, "node": true, "$": true }, "node": true, "browser": true, "es5": false, "esnext": true } 

PS：相關參數及其含義請前往傳送門

在項目根目錄建立.jscsrc，內容以下：

{ "preset": "google", "fileExtensions": [".js"], "requireParenthesesAroundIIFE": true, "validateIndentation": 4, "disallowTrailingComma": true, "disallowMultipleSpaces": true, "disallowSpacesInsideObjectBrackets": all, "excludeFiles": [ "test/data/**" ] }

PS：相關參數及其含義請前往傳送門

在項目根目錄建立.csslintrc，內容以下：

{ "adjoining-classes": true, "box-sizing": true, "box-model": false, "compatible-vendor-prefixes": false, "floats": false, "font-sizes": false, "gradients": false, "important": true, "known-properties": false, "outline-none": false, "qualified-headings": false, "regex-selectors": false, "shorthand": false, "text-indent": false, "unique-headings": false, "universal-selector": false, "unqualified-attributes": false, "zero-units": false }

PS：相關參數及其含義請前往傳送門

後記

工具只是提醒做用，好的編碼規範仍是要本身養成，也有些工具沒有覆蓋到的須要本身注意。

摘自：http://freeyiyi.com/jscs-in-action