建站
咨詢
售后
建站咨詢
新聞中心
本文已經(jīng)過(guò)原作者 Katherine Peterson 授權(quán)翻譯。
創(chuàng)新互聯(lián)主要從事成都網(wǎng)站建設(shè)、網(wǎng)站制作、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)西安,10多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來(lái)電咨詢建站服務(wù):18982081108
VSCode 之所以是如此出色的代碼編輯器，其原因之一是由社區(qū)創(chuàng)建的龐大的插件庫(kù)，從而提高了開(kāi)發(fā)人員的工作效率。以下是一些我最喜歡的VSCode 插件。
1. Rainbow Brackets
地址：https://marketplace.visualstudio.com/items?itemName=2gua.rainbow-brackets
這個(gè)插件讓我們的括號(hào)變成五顏六色，這樣很容易就能找到匹配的對(duì)。
2. Auto Rename Tag
地址：https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
重命名一個(gè)HTML / XML標(biāo)簽時(shí)，自動(dòng)重命名配對(duì)的HTML / XML標(biāo)簽。
3. Relative Path
地址：https://marketplace.visualstudio.com/items?itemName=jakob101.RelativePath
此插件節(jié)省了我很多時(shí)間來(lái)編寫(xiě)導(dǎo)入語(yǔ)句。使用簡(jiǎn)單的鍵盤(pán)快捷鍵即可輕松獲取工作區(qū)中任何文件的相對(duì)路徑。
4. Prettier
地址：https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
和esLint不同在于，ESLint只是一個(gè)代碼質(zhì)量工具(確保沒(méi)有未使用的變量、沒(méi)有全局變量，等等)。而 Prettier 只關(guān)心格式化文件(最大長(zhǎng)度、混合標(biāo)簽和空格、引用樣式等)?？梢?jiàn)，代碼格式統(tǒng)一的問(wèn)題，交給 Prettirer 再合適不過(guò)了。和 Eslint 配合使用，風(fēng)味更佳。
5. htmltagwrap
地址：https://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap
可以在選中HTML標(biāo)簽中外面套一層標(biāo)簽。
6. Markdown Preview Enhanced
地址：ttps://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced
如果你寫(xiě)過(guò)markdown文件，有一個(gè)實(shí)時(shí)預(yù)覽是非常有用的。
7. Polacode
地址：https://marketplace.visualstudio.com/items?itemName=pnp.polacode
這個(gè)插件可以將你的代碼保存成圖片分享給別人!
8. Random Everything
地址：https://marketplace.visualstudio.com/items?itemName=helixquar.randomeverything
這個(gè)插件可以根據(jù)數(shù)據(jù)類型自動(dòng)生成隨機(jī)數(shù)據(jù)，特別適合生成測(cè)試數(shù)據(jù)。
9. CSS Peek
地址：https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek
CSS Peek插件擴(kuò)展了HTML和ejs代碼編輯功能，支持在源代碼中的字符串中找到css/scss/less(類和id)。這在很大程度上是受方括號(hào)中稱為CSS內(nèi)聯(lián)編輯器的類似功能的啟發(fā)。
10. Turbo Console Log
地址：https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log
快捷添加 console.log，一鍵 注釋 / 啟用 / 刪除 所有 console.log。
簡(jiǎn)單說(shuō)下這個(gè)插件要用到的快捷鍵:
- ctrl + alt + l 選中變量之后，使用這個(gè)快捷鍵生成 console.log
- alt + shift + c 注釋所有 console.log
- alt + shift + u 啟用所有 console.log
- alt + shift + d 刪除所有 console.log
11. Simple React Snippets
地址：https://marketplace.visualstudio.com/items?itemName=burkeholland.simple-react-snippets
快速生成 React 模板片段~
12. Snippet Creator
地址:ttps://marketplace.visualstudio.com/items?itemName=ryanolsonx.snippet-creator
有許多代碼段擴(kuò)展，如上面的React，但有時(shí)我們可能想要制作自己的自定義代碼段，這個(gè)插件可以讓你輕松做到這一點(diǎn)。
~完，我是小智，我要去刷碗了~
原者：Katherine Peterson 譯者：前端小智 來(lái)源：dev原文：https://dev.to/katherinecodes/my-12-favorite-vscode-extensions-cld
本文轉(zhuǎn)載自微信公眾號(hào)「大遷世界」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系大遷世界公眾號(hào)。
當(dāng)前文章：我喜歡的12個(gè)VSCode插件！
文章起源：http://www.5511xx.com/article/dpepdpo.html
