推薦 12 個學習前端必備的神仙級工具類項目與網站

今天給你們推薦的是平時學習前端時，常常用到的一些輔助工具類網站。

前言

你們好，我是大家的 貓哥，一個不喜歡吃魚、又不喜歡喵 的超級貓 ~

貓哥是一個常年混跡在 GitHub 上的貓星人，因此發現了很多好的前端開源項目、經常使用技巧，在此分享給你們。

公衆號： 前端GitHub，專一於挖掘 GitHub 上優秀的前端開源項目，並以專題的形式推薦，每專題大概 10 個好項目，每週會有一到三篇精華文章推送，與時俱進版前端資源教程。

已經推薦了 面試項目、css 奇技淫巧項目、代碼規範項目、數據結構與算法項目、JavaScript 奇技淫巧項目、前端必備在線工具 等專題的近 100 個優秀項目了。

平時如何發現好的開源項目，能夠看看這篇文章：GitHub 上能挖礦的神仙技巧 - 如何發現優秀開源項目

如下爲【前端GitHub】的第 14 期精華內容。

---

今天給你們推薦的是平時學習前端時，常常用到的一些輔助工具類網站。

網址	描述
unbug.github.io/codelf	變量命名智能推薦（支持中文）
www.docschina.org	Web 前端開發人員提供優質中文文檔
regexr.com	正則表達式驗證匹配
any-rule	正則表達式庫，很是全，使用起來很方便
www.toptal.com/developers	多張圖片合成雪碧圖，並生成對應 css
tool.lu	衆多工具集合，包括時間戳轉換，進制轉換等
www.bootcdn.cn 或 cdn.baomitu.com	國內的CDN庫，速度快
www.jsdelivr.com	國外的 cdn 庫，支持 github，npm，WordPress
www.gitignore.io	根據選擇會去生成 .gitignore 文件
codesandbox.io	在線編輯代碼
www.typora.io	實用的 Markdown 寫做工具，所見即所得
mdnice.com	使 markdown 語法更加美觀，若是你有寫博客，那這個很是合適你(強烈推薦)

1. codelf

有一種痛，不是程序員可能不懂，但若是是程序員必定懂，那就是給變量或函數命名。

隨着項目愈來愈複雜，變量和函數數量愈來愈多，英語水平貌似也 hold 不住了。

雖然每一個編程語言都有各類命名規範，可是也不能解決全部的問題。

每一個程序員或多或少都在寫代碼的時候爲變量和函數命名苦惱過！

也能夠在本身用的編輯器裏安裝插件，支持 VS Code、Atom、Sublime Text 和 Chrome。

超級貓就是用 VS Code，也有裝這個插件呢。

https://unbug.github.io/codelf/

2. docschina

印象中文，爲 Web 前端開發人員提供優質中文文檔。

https://www.docschina.org

3. regexr

RegExr 是一個基於 HTML/JS 開發的在線工具，用來建立、測試和學習正則表達式。

特性

• 輸入時，結果會實時更新
• 支持 JavaScript 和 PHP/PCRE RegEx
• 將匹配項或表達式移至詳細信息
• 保存並與他人共享表達式
• 在編輯器中使用 cmd-Z/Y 撤消和重作

https://regexr.com/

4. any-rule

any-rule 正則表達式

any-rule 維護了一個經常使用正則表達式合集，而且自己是一個支持 Web/VS Code/idea/Alfred Workflow 多平臺的正則表達式工具。

https://github.com/any86/any-rule

5. CSS Sprites Generato

在不少前端展現頁面須要用到將小圖標拼合爲一整個圖片，而後在使用的時候，自動裁剪爲單一圖片展現。

這個時候就須要一個便捷的工具，CSS Sprites Generator 就是這樣一個便捷的CSS圖像拼合工具。

好比多張圖片生成雪碧圖，還有國內的 CDN 庫，趕忙去試一試吧。

https://www.toptal.com/developers/css/sprite-generator

6. tool.lu

衆多工具集合，包括時間戳轉換，進制轉換等

https://tool.lu/

7. bootcdn / baomitu

國內的CDN庫，速度快

https://www.bootcdn.cn/ 或 https://cdn.baomitu.com/

8. jsdelivr

國外的 cdn 庫，支持 github，npm，WordPress。

https://www.jsdelivr.com

9. gitignore

根據選擇會去生成 .gitignore 文件。

根據用戶輸入的語言類型或者平臺類型，自動生成對應的 gitignore 文件。

例如，輸入 Vue，React，點擊 "Create" 便可。

https://www.gitignore.io/

10. codesandbox

CodeSandbox 是一個在線的代碼編輯器，主要聚焦於建立 Web 應用項目。

支持主流的前端相關文件的編輯：JavaScript、TypeScript、CSS、Less、Sass、Scss、HTML、PNG 等。

支持自動代碼提示。

好比選擇建立相關的項目

能夠直接編輯代碼運行

https://codesandbox.io/

11. typora

實用的 Markdown 寫做工具，所見即所得。

https://www.typora.io

12. mdnice

MDNice 微信 Markdown 編輯器是一款 Markdown 微信編輯器,擁有良好的兼容性、海量主題樣式、免費的圖牀、強大的技術團隊,提供文章一鍵排版,同時支持知乎、掘金、微信。

使 markdown 語法更加美觀，若是你有寫博客，那這個很是合適你，強烈推薦。

這個工具是大鵬大佬開發的，超級貓一直有用這個工具，那個工具倉庫 Star 還不到 200 的時候就給它點讚了，由於實在是好用，以爲確定會火，如今的確是火了，幾乎常常寫博客的人都知道和用它。

超級貓還貢獻了 2 種主題呢，裏面的 綠意、科技藍 的主題就是筆者貢獻的，哈哈。

https://github.com/mdnice/markdown-nice

最後

不知不覺，已經寫到第 14 期了呢，已經分享超過 100 個好的前端項目了呢，往期精文請看下方寶藏倉庫，點擊很危險，請慎入！

[前端GitHub]： https://github.com/FrontEndGitHub/FrontEndGitHub

平時如何發現好的開源項目，能夠看看這篇文章：如何在 GitHub 上發現優秀開源項目 和 如何使用 GitHub 進行精準搜索的神仙技巧。

以爲有用 ？喜歡就收藏，順便點個贊吧，你的支持是超級貓最大的鼓勵！

能夠加超級貓的 wx：CB834301747 ，一塊兒閒聊前端。

微信搜 「前端GitHub」，回覆 「電子書」 便可以得到 160 本前端精華書籍哦。

往期精文

• 10 個 GitHub 上超火的前端面試項目，打造本身的加薪寶庫！
• 12 個 GitHub 上超火的 JavaScript 奇技淫巧項目
• 10 個 GitHub 上超火的 CSS 技巧項目，找到寫 CSS 的靈感！
• 11 個超火的前端必備在線工具，終於有時間上班摸魚了
• 11 個超火的大廠前端代碼規範，你也能寫出詩同樣的代碼！