18 個提高生產力的開發者工具

本篇介紹一些提高生產力的工具，包括網站、瀏覽器外掛程式、VSCode外掛程式和命令列工具~

網站篇

Bundlephobia

如果你想要安裝一個新的依賴，這個網站可以查看這個依賴的大小、是否支援tree-shaking 等各項指標。 （僅限npm 包哈）

https://bundlephobia.com/

Coolors

還在煩惱自己某個專案的配色？可以來這個網站找找看。

https://coolors.co/

Carbon

可以把程式碼變成好看的圖片，筆者之前的文章曾經使用過~

https://carbon.now.sh/

Snippet generator

程式碼片段很好用，可是生成它們卻很麻煩，這個網站可以根據程式碼一鍵產生。支援 VSCode，Sublime Text，Atom。

https://snippet-generator.app/

#Wolfram Alpha

如果你有一個複雜的表達式需要計算，或是很長的if 語句想要簡化，可以用這個網站，它會幫你判斷各種條件，以及產生韋恩圖等資料圖表。

https://www.wolframalpha.com/input/?i=a or b and b or c

DevHints

#速查表大全，包括bash，es6，regexp，vscode 等上百種cheatsheets

https://devhints.io/

#Caniuse

瀏覽器相容性速查，browserlist 用的就是這裡的資料來相容瀏覽器的。

https://caniuse.com/

#Chrome 外掛程式篇

## FeHelper

超過20 個實用小功能，包括字串編解碼、JSON格式化、二維碼產生等。

https://www.baidufe.com/fehelper

#Wappalyzer##幫你偵測網站使用了哪些技術棧。

https://www.wappalyzer.com/

#Screencastify

將你的網站錄成小影片。

https://www.screencastify.com/

VSCode 外掛程式篇

#Bracket Pair Colorizer

括號高亮工具，快速找到你的另一半！ （括號）

Bracket Pair Colorizer

#Git Graph

Git 歷史記錄圖化，有了它，我好像用不上Sourcetree 了~

Git Graph

GitLens

#神器！查看歷史記錄超方便~

GitLens

#Live Share

##VSCode 官方插件，遠端程式碼分享。

Live Share

#推薦教學課程：vscode基礎教學

#CLI 工具篇

ngrok

一行命令，內網穿透。示範本地專案必備。

https://ngrok.com/

#serve

快速起服務，可用於偵錯打包後代碼！

https://github.com/zeit/serve

#tldrToo long; Didn't read.各種指令說明太複雜，用這個可以只看重點！

https://tldr.sh/

###fkill#########強殺進程，跨平台。 #########https://github.com/sindresorhus/fkill-cli##########如果你還有其他好用的工具，歡迎留言分享~#### ###########參考文章###############18 DevTools for productivity######

以上是18 個提高生產力的開發者工具的詳細內容。更多資訊請關注PHP中文網其他相關文章！