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

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

前言

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

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

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

平時如何發現好的開源項目，能夠看看這篇文章：GitHub 上能挖礦的神仙技巧 - 如何發現優秀開源項目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 不住了。npm

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

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

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

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

unbug.github.io/codelf/

2. docschina

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

www.docschina.org

3. regexr

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

特性

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

regexr.com/

4. any-rule

any-rule 正則表達式

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

github.com/any86/any-r…

5. CSS Sprites Generato

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

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

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

www.toptal.com/developers/…

6. tool.lu

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

tool.lu/

7. bootcdn / baomitu

國內的CDN庫，速度快

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

8. jsdelivr

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

www.jsdelivr.com

9. gitignore

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

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

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

www.gitignore.io/

10. codesandbox

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

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

支持自動代碼提示。

好比選擇建立相關的項目

能夠直接編輯代碼運行

codesandbox.io/

11. typora

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

www.typora.io

12. mdnice

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

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

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

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

github.com/mdnice/mark…

最後

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

[前端GitHub]：github.com/FrontEndGit…

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

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

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

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

往期精文

你最想對超級貓說點啥？