前端開發必備工具箱

Tomas Pustelnik 原做， New Frontend 翻譯。

前端開發是一個至關複雜的方向，至少就大項目而言，你很難僅用瀏覽器和編輯器完成工做。這裏列出了我在開發過程當中用到的工具。我但願這個列表能幫助其餘人發現一些能夠用在工做流程中的好工具。

必備工具

這些是我平常使用的工具，缺了它們我很難高效工做。

• VS Code —— 我選擇的編輯器是微軟出品的 VS Code。免費、輕量（和 WebStorm 之類的 IDE 相比），大量開箱即用的特性，豐富的擴展。
• 瀏覽器 —— 個人默認瀏覽器是 Firefox，有時切換到 Chrome 進行開發。我也安裝了其餘瀏覽器，以供測試之用。
• DevDocs —— 這個網頁應用匯聚了各類項目的文檔，還支持離線使用。當我須要查詢文檔時，通常會訪問這個站點。我主要用它查詢 JS 和 DOM/瀏覽器方面的文檔。我真沒找到什麼能和它媲美的工具（詳盡而易於搜索）。你應該看一看。
• Google —— 沒錯，我常常上網搜索。關於某個 bug 的信息，如何作某件事（有時會是很基礎的事情），軟件包和軟件庫的示例代碼和文檔（若是 DevDocs 沒收錄），我都會上網搜一搜。
• MDN —— 對任何 web 開發者來講這都是很是棒的資源。這個站點的部份內容能夠在以前提到的 DevDocs 上找到，不過有些頁面只有 MDN 上有。我主要用它查詢一些關於可訪問性的內容，上面有很多討論這一主題的文章。
• StackOverflow —— 常常 google 到上面的內容。若是有問題，多半能在上面找到答案。
• GitHub —— 某個軟件包我有疑問，或者想知道關於它的更多信息，我會到它的 GitHub 倉庫去翻 issue 和代碼，一般能找到問題的答案，就像 StackOverflow。據我我的的經驗，若是有關於某個特定軟件包的問題，在 GitHub 上翻到相關 issue 的概率要高於在 StackOverflow 上找到相關問題（像 React 這類特別流行的庫例外）。固然，我也使用 GitHub 的版本控制功能。

CSS

• CSS-Tricks —— 你能在上面找到大量有趣的文章和竅門。這個網站上也有一個指南（Guides）欄目，包含關於特定 HTML、CSS、JS 概念的深刻講解。我經常訪問這個站點更新關於網格佈局的知識。不過其餘指南也很是棒。這個站點絕對值得一看。
• CSS Reference —— 若是須要更新 CSS 知識或者查下不熟悉、不經常使用的屬性，我會訪問這個站點。上面對每一個 CSS 屬性的講解很深刻，給出的示例也很清楚，便於你理解這些屬性並應用於本身的項目。站點的做者是 Sara Soudain。
• Can I Use —— 若是你在乎瀏覽器兼容性，但願負責任地使用前沿特性（漸進加強），那麼這是不可或缺的工具。

性能優化

• SVGOMG —— 從設計師那裏收到一份爲 web 優化的 SVG 文件，這種事情實在太罕見。因此我會用 SVGOMG 優化 SVG，效果十分驚人。這是 SVGO 的網頁版，因此你也可使用相應的命令行工具壓縮 SVG。
• Shrinkme.app —— 使用這個網頁應用優化圖像文件十分快捷方便。開箱即用，支持批量上傳，效果至關不錯。
• Sqoosh —— 須要將圖片壓縮到極致，或者建立 webp 格式的圖像文件的時候，我會使用這個網站。你能夠用它提供的大量選項調出滿意的效果。你也能夠用它縮放圖像或是轉換圖像格式。它用了不少前沿技術（當初 Google Chrome 團隊作這個工具是爲了演示現代瀏覽器的功能），因此你須要使用 Chrome 或基於 Chromium 的瀏覽器（Opera、Brave 等）。我上次試過，在 Firefox 下這個站點並不能正常工做。
• Icomoon app —— 我須要建立定製圖標集時會用這個工具。能夠選擇現有圖標（免費圖標和付費圖標），也能夠上傳本身的圖標。接着就能夠生成相應的圖標字體或 SVG 圖標文件（今時今日，後者是一個更好的選擇）。
• Google Fonts —— 須要建立定製 web 字體時，我會首先訪問 Google Fonts。我一般會下載所需文件，而後自行託管，這樣性能更好。Google Fonts 有一個很棒的特性，容許只編碼須要用到的字符。
• Glyphhanger —— 減小文件大小是提高網站性能的最佳途徑之一。Web 字體常常包含不少咱們不須要的字形，因此我會用 Glyphhanger 子集化字體。你能夠指定須要的 Unicode 區段和字符，Glyphanger 會建立一個只包含相應字符的字體文件。它也能夠將 .ttf 文件轉爲其餘更適合 web 的格式，好比 .woff 和 .woff2。須要花一點功夫正確使用這個工具，不過我以爲存在字體性能問題時，這是一個值得考慮的選項。
• Lighthouse —— 我在發佈網頁前會進行測試，Chrome 瀏覽器的 Lighthouse 是最經常使用的工具之一。它會檢查各方面的常見問題並給出評分，也會給出改進提示。這是一個很是好的工具，能夠初步檢查我在開發時是否遺漏了一些問題。
• Font style matcher —— 定製字體加載後會切換字體，若是你但願這個切換不容易察覺，那麼可使用這個字體風格匹配器找到和定製字體相似的默認字體。

可訪問性

• VoiceOver —— macOS 的默認屏幕閱讀器。須要花一點時間熟悉這個工具（我推薦這篇介紹文章），不過我努力在開發過程當中時不時用下 VoiceOver。多虧這一點，個人項目中 aria 屬性和麪向屏幕閱讀器的文本使用量大增。使用 VoiceOver 後你會驚訝地發現一些平常使用的網頁組件爲屏幕閱讀器用戶提供的上下文信息少得可憐。
• a11y guidelines —— 一般我會盡可能去找可訪問性良好的解決方案，不過有的時候仍是不得不本身動手，這時我會參考這個頁面。這篇可訪問性指導原則詳細解釋了什麼是可訪問性，爲何可訪問性很重要，如何實現。不少狀況下，複製其中的示例代碼略做調整後便可應用於實際項目。
• WAI-ARIA specification —— 我並不常常閱讀規範。若是我在讀規範，那麼每每是在讀這一篇。其中包含大量關於如何使用 aria 角色和屬性的有價值信息。要我說，任何嚴肅對待可訪問性的開發者，都須要讀下這篇規範。

值得一提

最後列下我的以爲挺好用但又沒那麼經常使用的工具。

• Responsive breakpoints generator —— 手動建立響應式圖像的多種變體很痛苦。用這個工具就很方便。
• HTML Arrows —— 各類符號的 Unicode 碼、HTML 十六進制編碼、HTML 實體編碼、HTML 實體。
• Char reference —— 相似上一個工具，但顯示的信息更少，主要顯示 HTML 實體。
• Typography cheatsheet —— 講解經常使用的字體排印規則和問題。
• Modular scale —— 設計網頁時我一般使用這個工具選擇模塊化的縮放方案。若有興趣瞭解更多關於這個主題的內容，請參考 A List Appart 上的這篇文章 和 Tim Brown 在 Build Conf 2010 上的演講。
• CSS gradient generetor —— 建立漸變背景的在線工具。
• Smooth shadow generator —— 爲網站添加美觀的陰影。
• Bezier curve generator —— 定製 CSS 的立方貝塞爾曲線定時函數。
• Easing functions —— 各類緩動函數，可用於 CSS 動畫和變換。
• ngrok —— 須要向別人展現做品或者測試不一樣設備上的效果時，我會使用 ngrok。ngrok 能夠將本地運行的服務暴露到公網上。不過有的時候配合 Browserstack 的 localhost 擴展時不能工做。
• sharing buttons —— 若是你只須要一個簡單的分享按鈕，不想用 JS，不想折騰追蹤用戶的複雜邏輯，那麼這個工具特別好用。
• Unix timestamp converter —— unix 時間戳轉換器。
• CSS to JS converter —— 能夠將 CSS 轉成 JS，也能夠將 JS 轉回 CSS。基於 CSS-in-JS 庫開發時這個工具十分方便。
• Browser default styles —— 常見瀏覽器的默認樣式。

結語

以上就是我在工做中使用的提升效率的工具，但願能幫你發現一些有用的工具。歡迎在 Twitter 上向我反饋，包括推薦其餘好用的工具。