好看的代碼截圖

大家平時(shí)是否見過這樣的代碼截圖。

圖片

這種好看的代碼截圖只需要安裝 VSCODE 插件：CodeSnap。

圖片

圖片

API 兼容性查詢

在開發(fā)的時(shí)候，每次用到一個(gè) JavaScript 的 API 時(shí)，一定要有意識地去看一看這個(gè) API 的兼容性如何，不然容易產(chǎn)生生產(chǎn)事故。

而 Can I Use 這個(gè)網(wǎng)站就是干這件事的，顧名思義翻譯過來就是 我能用嗎？

每次使用 API 擔(dān)憂它的兼容性時(shí)，可以去這個(gè)網(wǎng)站上面查看： https://caniuse.com/

圖片

漸變色生成

平時(shí)寫 CSS 的時(shí)候，或多或少都會接觸到 漸變 這個(gè)概念，但是往往自己都調(diào)不好那個(gè)漸變效果。

所以需要一個(gè)可視化可讓我們調(diào)節(jié)，并且可以生成漸變樣式的網(wǎng)站，那么 cssgradient.io 就是不二之選。

地址：https://cssgradient.io/

圖片

i18N 提示

做過 i18n 的朋友都知道，一般一段話都是通過 aa.bb.cc 這樣去獲取的，數(shù)量少還好，數(shù)量多了就記不住了，所以需要提示~

安裝這個(gè)插件即可。

圖片

平時(shí)狀態(tài)下會提示這段鏈?zhǔn)阶址淼囊馑肌?/p>

圖片

圖片

在線代碼運(yùn)行

你是否遇到這種場景：需要調(diào)試某一段代碼，但是又不想啟動(dòng)自己的項(xiàng)目去調(diào)試。

或者這種場景：有一段代碼效果，想要分享給其他人。

那么這個(gè)時(shí)候就需要 代碼在線運(yùn)行平臺 了，也就是在網(wǎng)頁平臺上調(diào)試代碼，不需要在自己項(xiàng)目上去調(diào)試，并且可以通過網(wǎng)址分享給他人。

平時(shí)用的最多的是 Codepen，地址：https://codepen.io/。

圖片

動(dòng)畫案例庫

我們在開發(fā)公司項(xiàng)目或者個(gè)人項(xiàng)目的時(shí)候，想要用到一些很酷炫的效果，但是靠我們自己又想不出來，那就需要一個(gè)動(dòng)畫案例庫來輔助我們了。

用的最多的是 uiverse.io，地址是：https://uiverse.io/。

啥動(dòng)畫都有，只有你想不到的，沒有做不到的~包含且不僅限于：按鈕、表單、輸入框、彈框等等。

Vue 在線調(diào)試

你想要在線調(diào)試一段 Vue 代碼，并且想要看最終效果以及代碼解析？

Vue 官方推出了 Vue SFC Playground，滿足你的需求。

地址：https://play.vuejs.org/

圖片

圖片

URL 轉(zhuǎn)二維碼

如果你想要將一個(gè) URL 轉(zhuǎn)換為二維碼，以供他人掃碼的話，可以在這個(gè)平臺上去轉(zhuǎn)換 草料。

地址：https://cli.im/text/other

圖片

文件格式轉(zhuǎn)換

一個(gè)免費(fèi)的文件格式轉(zhuǎn)換平臺。

地址：https://onlineconvertfree.com/zh/convert/

在線畫圖平臺

可以在這個(gè)平臺上去隨意畫你的思路、記錄、心得，沒有那么多條條框框，主打的就是一個(gè)自由。

地址：https://excalidraw.com/

圖片

前端基礎(chǔ)文檔查詢

開發(fā)前端，遇到了基礎(chǔ)問題，第一時(shí)間就得查文檔，哪個(gè)文檔最靠譜呢？毫無爭議：MDN。

地址：https://developer.mozilla.org/zh-CN/docs/Web

圖片

網(wǎng)頁 JSON 美化

一個(gè)谷歌插件 JSON Viewer，讓你通過網(wǎng)頁查看的 JSON 數(shù)據(jù)更加美觀。

圖片

圖片