天天看點

10個優化代碼的CSS和JavaScript工具

檢查和測試代碼來發現任何潛在錯誤,進而在放到網站上之前及時消除錯誤是一個非常重要的過程。代碼檢查的過程也俗稱為是web設計師

和開發者之間的linting。作為一個設計師,如果你想要寫出高度優化的代碼,那麼你一定需要linting工具。有兩種類型的代碼檢查工具。一種是在

執行時間檢查代碼中的錯誤和bug。另一種是使用靜态代碼分析技術并在執行前檢查碼。後者因為可以節省時間和麻煩顯然更佳。

事實上,linting可以放在不同的階段。如果你喜歡在敲代碼的時候測試代碼,那麼你可以使用lint工具。當然,如果你想在保持檔案的時候或執

行的階段lint代碼,那麼linting工具也可以如你所願。這取決于個人的選擇。如果你正在找尋用于css和javascript最好的

linting工具,那麼請繼續閱讀。

1.csslint

誠然csslint會“傷害你的感情”,但作為交換它會“讓你的代碼改進很多” 。csslint目前上司了css linting的市場。它用javascript編寫,不但是開源的,而且自帶大量的配置選項。

10個優化代碼的CSS和JavaScript工具

2.sublimelinter csslint

csslint是一次如此高效的css linting工具,以緻于很難找到一個競争對手可以與之媲美。也許這就是為什麼

sublimelinter linting架構會把它的css linting插件建構在csslint上面的原因。sublimelinter是一個

sublimetext插件,給使用者提供了lint代碼(css,php,python,java,ruby等)的手段。

10個優化代碼的CSS和JavaScript工具

3.stylelint

stylelint可以幫助開發人員避免css、scss中或任何其他postcss可以解析的文法錯誤。stylelint測試了超過一百條規則,你可以選擇你想切換的那些規則(見此舉例配置)。

10個優化代碼的CSS和JavaScript工具

4.w3c css validator

盡管w3c的css validator通常不被認為是一種linting工具,但它為開發人員提供了一個用w3c官方标準檢查css代碼的很好機會。w3c建立它自己的驗證程式,旨在提供一個類似于lint程式檢查器針對c語言的工具。

10個優化代碼的CSS和JavaScript工具

5.dirty markup

dirty markup可以清理,格式化以及驗證你的html、css和javascript代碼。如果你喜歡簡單直接的設計,并希望一個快捷的解決方案,那麼選它就對了。當你在編輯器中編寫或修改代碼的時候,dirty markup可以實時抛出錯誤消息和通知。

10個優化代碼的CSS和JavaScript工具

6.jslint

jslint最初由douglas crockford釋出于2002年,從那時起就有了蓬勃的生命力,是以你可以安全地認定它是一個既穩定又可靠的javascript linting工具。

10個優化代碼的CSS和JavaScript工具

7.jshint

jshint是一個社群驅動項目,始于竭力創造一個更可配置,不那麼固執的jslint版本。jshint允許開發人員配置任何它的linting選項,然後把自定義的配置放到一個單獨的檔案中,這使得該工具很容易重複使用,是以非常适合大型項目。

10個優化代碼的CSS和JavaScript工具

8.eslint

eslint是javascript linting宏圖中最近的一件大事。之是以受歡迎是因為高度靈活的特性。你不僅可以自定義大量尖端的linting規則,将之與所有主要的代碼編輯器內建,還可以很容易地通過添加不同的插件擴充其功能。

10個優化代碼的CSS和JavaScript工具

9.jscs

jscs,或javascript code

style,是針對javascript的一個可插拔的代碼風格linter,用來檢查代碼格式規則。jscs的目标是提供一個用程式設計方式實施遵從于某一

編碼風格向導的手段。雖然jscs不檢查bug和錯誤,但它仍然為許多高科技行業的參與者,如谷歌、airbnb和angularjs所用,因為它可以幫

助開發人員保持一個高度可讀又一緻的代碼庫。

10個優化代碼的CSS和JavaScript工具

10.standardjs

standardjs,或javascript standard style是一種代碼風格linter,有點像jscs,但差別是更為簡單和直接。如果你不想花時間在配置上,隻想要一個能開箱即用的高效工具的話,那麼standardjs是一個超棒的選擇。

作者:小峰

來源:51cto

繼續閱讀