10個優化程式碼的CSS和JavaScript工具
本文由碼農網 – 小峰原創翻譯,轉載請看清文末的轉載要求,歡迎參與我們的付費投稿計劃!
檢查和測試程式碼來發現任何潛在錯誤,從而在放到網站上之前及時消除錯誤是一個非常重要的過程。程式碼檢查的過程也俗稱為是Web設計師和開發者之間的linting。作為一個設計師,如果你想要寫出高度優化的程式碼,那麼你一定需要linting工具。有兩種型別的程式碼檢查工具。一種是在執行時間檢查程式碼中的錯誤和bug。另一種是使用靜態程式碼分析技術並在執行前檢查碼。後者因為可以節省時間和麻煩顯然更佳。
事實上,linting可以放在不同的階段。如果你喜歡在敲程式碼的時候測試程式碼,那麼你可以使用lint工具。當然,如果你想在保持檔案的時候或執行的階段lint程式碼,那麼linting工具也可以如你所願。這取決於個人的選擇。如果你正在找尋用於CSS和JavaScript最好的linting工具,那麼請繼續閱讀。
1.CSSLint
誠然CSSLint會“傷害你的感情”,但作為交換它會“讓你的程式碼改進很多” 。CSSLint目前領導了CSS linting的市場。它用JavaScript編寫,不但是開源的,而且自帶大量的配置選項。
2.SublimeLinter CSSLint
CSSLint是一次如此高效的CSS linting工具,以致於很難找到一個競爭對手可以與之媲美。也許這就是為什麼SublimeLinter linting框架會把它的CSS linting外掛構建在CSSLint上面的原因。SublimeLinter是一個SublimeText外掛,給使用者提供了lint程式碼(CSS,PHP,Python,Java,Ruby等)的手段。
3.StyleLint
StyleLint可以幫助開發人員避免CSS、SCSS中或任何其他PostCSS可以解析的語法錯誤。StyleLint測試了超過一百條規則,你可以選擇你想切換的那些規則(見此舉例配置)。
4.W3C CSS Validator
儘管W3C的CSS Validator通常不被認為是一種linting工具,但它為開發人員提供了一個用W3C官方標準檢查CSS程式碼的很好機會。W3C建立它自己的驗證程式,旨在提供一個類似於Lint程式檢查器針對C語言的工具。
5.Dirty Markup
Dirty Markup可以清理,格式化以及驗證你的HTML、CSS和JavaScript程式碼。如果你喜歡簡單直接的設計,並希望一個快捷的解決方案,那麼選它就對了。當你在編輯器中編寫或修改程式碼的時候,Dirty Markup可以實時丟擲錯誤訊息和通知。
6.JSLint
JSLint最初由Douglas Crockford釋出於2002年,從那時起就有了蓬勃的生命力,因此你可以安全地認定它是一個既穩定又可靠的JavaScript linting工具。
7.JSHint
JSHint是一個社群驅動專案,始於竭力創造一個更可配置,不那麼固執的JSLint版本。JSHint允許開發人員配置任何它的linting選項,然後把自定義的配置放到一個單獨的檔案中,這使得該工具很容易重複使用,因此非常適合大型專案。
8.ESLint
ESLint是JavaScript linting巨集圖中最近的一件大事。之所以受歡迎是因為高度靈活的特性。你不僅可以自定義大量尖端的linting規則,將之與所有主要的程式碼編輯器整合,還可以很容易地通過新增不同的外掛擴充套件其功能。
9.JSCS
JSCS,或JavaScript Code Style,是針對JavaScript的一個可插拔的程式碼風格linter,用來檢查程式碼格式規則。JSCS的目標是提供一個用程式設計方式實施遵從於某一編碼風格嚮導的手段。雖然JSCS不檢查bug和錯誤,但它仍然為許多高科技行業的參與者,如谷歌、AirBnB和AngularJS所用,因為它可以幫助開發人員保持一個高度可讀又一致的程式碼庫。
10.StandardJS
StandardJS,或JavaScript Standard Style是一種程式碼風格linter,有點像JSCS,但區別是更為簡單和直接。如果你不想花時間在配置上,只想要一個能開箱即用的高效工具的話,那麼StandardJS是一個超棒的選擇。
譯文連結:http://www.codeceo.com/article/10-css-javascript-linting-tool.html
英文原文:10 CSS and JavaScript Linting Tools for Code Optimization
翻譯作者:碼農網 – 小峰
[ 轉載必須在正文中標註並保留原文連結、譯文連結和譯者等資訊。]
相關文章
- javaScript程式碼優化JavaScript優化
- 11個原始碼優化和分析的Java工具原始碼優化Java
- 推薦 10 個超棒的 CSS3 程式碼生成工具CSSS3
- 淺談JavaScript程式碼效能優化JavaScript優化
- 案例分析之JavaScript程式碼優化JavaScript優化
- JavaScript 程式碼效能優化總結JavaScript優化
- 5款優秀的JavaScript程式碼壓縮工具JavaScript
- Python和JavaScript間程式碼轉換4個工具PythonJavaScript
- 分享15個優秀的CSS解決方案和工具CSS
- CSS程式碼重構與優化之路CSS優化
- JavaScript 的效能優化:程式碼載入和執行模式淺析JavaScript優化模式
- 編寫優秀 CSS 程式碼的 8 個策略CSS
- 談談JavaScript非同步程式碼優化JavaScript非同步優化
- 淺談JavaScript程式碼效能優化2JavaScript優化
- 9個最好用的JavaScript開發工具和程式碼編輯器JavaScript
- 5個最優秀的Java和C#程式碼轉換工具JavaC#
- javascript效能優化(10)JavaScript優化
- Web效能優化系列:10個JavaScript效能提升的技巧Web優化JavaScript
- javascript指令碼的效能優化JavaScript指令碼優化
- CSS效能優化的8個技巧CSS優化
- CSS效能優化的幾個技巧CSS優化
- javascript程式碼效能優化簡單介紹JavaScript優化
- css優化文字顯示效果程式碼例項CSS優化
- CSS、JavaScript開發者必備的10款最佳工具CSSJavaScript
- 10個便利的CSS程式碼線上生成器CSS
- [譯] JavaScript 如何工作:在 V8 引擎裡 5 個優化程式碼的技巧JavaScript優化
- 10個最“優秀”的程式碼註釋
- 編寫優秀程式碼的10個技巧
- javascript對於if條件語句程式碼的優化方式JavaScript優化
- 建立漂亮的 CSS 按鈕的 10 個程式碼片段CSS
- CSS程式碼重構與優化簡單介紹CSS優化
- 13 個免費的 PNG 影像的優化和壓縮工具優化
- 分支對程式碼效能的影響和優化優化
- 10個視覺化 CSS 工具, 快速生成 CSS 片段,渣男,又想拋棄我!!視覺化CSS
- [譯] JavaScript 是如何工作的:CSS 和 JS 動畫背後的原理 + 如何優化效能JavaScriptCSSJS動畫優化
- 程式碼優化優化
- 那些令人驚歎的 HTML、CSS、JavaScript 工具和庫HTMLCSSJavaScript
- 加速編碼的 JavaScript 庫和工具JavaScript