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

前言

貓哥是一個常年混跡在 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 個超火的大廠前端代碼規范，你也能寫出詩一樣的代碼！

總結

以上是生活随笔為你收集整理的推荐 12 个学习前端必备的神仙级工具类项目与网站的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。