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

天明夜盡發表於2020-12-29

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

前言

貓哥是一個常年混跡在 GitHub 上的貓星人,所以發現了不少好的前端開源專案、常用技巧,在此分享給大家。

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

已經推薦了 面試專案css 奇技淫巧專案程式碼規範專案資料結構與演算法專案JavaScript 奇技淫巧專案前端必備線上工具 等專題的近 100 個優秀專案了。

平時如何發現好的開源專案,可以看看這篇文章:GitHub 上能挖礦的神仙技巧 - 如何發現優秀開源專案

以下為【前端GitHub】的第 14 期精華內容。


今天給大家推薦的是平時學習前端時,經常用到的一些輔助工具類網站。

網址描述
unbug.github.io/codelf變數命名智慧推薦(支援中文)
www.docschina.orgWeb 前端開發人員提供優質中文文件
regexr.com正規表示式驗證匹配
any-rule正規表示式庫,非常全,使用起來很方便
www.toptal.com/developers多張圖片合成雪碧圖,並生成對應 css
tool.lu眾多工具集合,包括時間戳轉換,進位制轉換等
www.bootcdn.cncdn.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,也有裝這個外掛呢。

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 本前端精華書籍哦。

往期精文

你最想對超級貓說點啥?

相關文章