前言

先來說下vscode的優(yōu)點(diǎn)：

1. 輕量級(jí)和靈活性：vscode走的是插件化的設(shè)計(jì)思路，因此它本身軟件比較輕量，其它功能通過插件進(jìn)行擴(kuò)展，我們也可以自己動(dòng)手去寫插件，集輕量性和靈活性于一身。
2. 強(qiáng)大的插件生態(tài)系統(tǒng)和活躍的社區(qū)：vscode擁有十分強(qiáng)大的插件生態(tài)系統(tǒng)，各種常見的功能都能很容易找到對(duì)應(yīng)的插件，滿足我們?nèi)粘５拈_發(fā)可以說是綽綽有余啦！而且它的社區(qū)非常活躍，有問題可以去社區(qū)尋找答案。
3. 跨平臺(tái)：在Windows、macOS 和 Linux三端的操作系統(tǒng)上都能用。
4. Git支持：vscode提供了圖形化的git操作，可以很方便的進(jìn)行版本控制、分支管理、查看差異、解決沖突，用起來巨爽。
5. 強(qiáng)大的維護(hù)團(tuán)隊(duì)：vscode背后的維護(hù)團(tuán)隊(duì)是Microsoft微軟，這團(tuán)隊(duì)實(shí)力不用多說。

擁有這么多優(yōu)點(diǎn)，難怪現(xiàn)在能成為我們前端程序員的寵兒。

在日常開發(fā)中，如果能掌握好vscode的使用方法和技巧，那寫起代碼來真的是手拿把攥，事半功倍，接下來給大家介紹一些又好用又能提升效率的vscode插件和快捷鍵。

1、vscode插件

1.1 Live-server

這個(gè)插件會(huì)啟動(dòng)一個(gè)本地的服務(wù)器，可以實(shí)時(shí)預(yù)覽代碼效果，不需要手動(dòng)刷新，比如我們寫一個(gè)html文件時(shí)，想實(shí)時(shí)看到html在瀏覽器中的預(yù)覽效果，這個(gè)就非常合適了。

1.2 Auto Rename Tag

這個(gè)插件可以幫助我們對(duì)XML/HTML標(biāo)簽對(duì)重命名，比如你需要把標(biāo)簽<a></a>改成<p></p>，你只需要改把開始標(biāo)簽的a改成p即可，這個(gè)插件會(huì)幫你同步修改結(jié)束標(biāo)簽。

1.3 Code Spell Checker

這個(gè)插件可以對(duì)你的代碼進(jìn)行拼接檢查，比如你拼寫了一個(gè)錯(cuò)誤的單詞，他會(huì)給出標(biāo)記。

1.4 Code Runner

可以右鍵直接運(yùn)行代碼，支持多種語言，比如C, C++, Java, Javascript, JS, PHP, Python, Ruby, Go等。

如果要運(yùn)行ts，需要先全局安裝typescript和ts-node。

1.5 CodeGeeX

這是一款免費(fèi)的AI代碼輔助工具，它提供代碼生成/完成、評(píng)論生成、代碼翻譯和基于AI的聊天等功能，我們用它寫代碼的話，它會(huì)幫助我們進(jìn)行代碼推導(dǎo)和自動(dòng)補(bǔ)全，還可以幫助我們一鍵生成注釋，有什么技術(shù)問題也可以使用它的聊天功能進(jìn)行詢問找尋答案，可以說十分方便，最重要的是只需要去它的官網(wǎng)注冊(cè)一個(gè)賬號(hào)即可免費(fèi)使用。

1.6 JavaScript (ES6) code snippets

這個(gè)插件預(yù)設(shè)了很多ES6的代碼片段，可以使用它定義好的一些快捷鍵觸發(fā)對(duì)應(yīng)預(yù)設(shè)的 ES6 語法片段 snippets，從而提高我們的開發(fā)效率。

1.7 Git History

這個(gè)插件可以幫助我們查看git日志、文件歷史記錄、比較分支或提交，對(duì)于項(xiàng)目多人協(xié)助和定位bug非常有用。

1.8 Vue (Official)

一款支持vue3的官方推薦插件，從 Volar 更名而來，支持 vue 最新語法。

1.9 Vue VSCode Snippets

里面內(nèi)置了很多vue的代碼片段，比如創(chuàng)建單文件基礎(chǔ)架子的 vbase, template 相關(guān)的 vfor、vmodel等，也支持 Vue Composition API、Vuex、vue-router 等相關(guān)常用的代碼片段，非常實(shí)用。

1.10 GitHub Repositories

我之前如果想在 vscode 中查看 GitHub 上的代碼，需要通過 git clone 或者 download 的方式先將 GitHub 倉庫代碼下載到本地。

用上這個(gè)插件之后，可以在 VSCode 中直接瀏覽、編輯 GitHub 倉庫代碼，并且支持 搜索 功能，非常方便。

1.11 javascript console utils

安裝上這個(gè)插件后，使用 Ctrl/Cmd + Shift + L 可以快速生成 console.log 語句， 也可以光標(biāo)選中變量再按 Ctrl/Cmd + Shift + L, 會(huì)把變量名稱也打印出來，十分方便。

接下來給大家介紹一些vscode非常好用的快捷鍵。

2、VScode快捷鍵

2.1 下一個(gè)相同變量

光標(biāo)選中某個(gè)變量后，可以用Ctrl/Command + d向后查找下一個(gè)相同變量，再繼續(xù)按一次可以繼續(xù)往下查找。

2.2 選擇所有相同變量

如果相同變量非常多，又需要對(duì)它們統(tǒng)一進(jìn)行編輯操作，可以使用Ctrl/Command+shift+l選中所有相同變量，然后就可以統(tǒng)一進(jìn)行編輯操作了。

2.3 查找并跳轉(zhuǎn)到某個(gè)文件

如果需要查找并跳轉(zhuǎn)到某個(gè)文件，可以先按下Ctrl/Command+p，然后用輸入文件名或者文件路徑，在篩選出的文件列表中點(diǎn)擊文件即可跳轉(zhuǎn)到對(duì)應(yīng)的文件中。

2.4 搜索

• Ctrl/Command + f：文件內(nèi)搜索。
• Ctrl/Command + shift + f：全局搜索。

2.5 打開/關(guān)閉側(cè)邊欄

可以使用Ctrl/Command + b打開/關(guān)閉側(cè)邊欄。

2.6 移動(dòng)相關(guān)

• 移動(dòng)當(dāng)前行：先光標(biāo)選中某一樣，然后可以使用alt+上/下方向鍵向上/向下移動(dòng)該行。
• 移動(dòng)到文件頭部、尾部： Ctrl + Home/End（windows），Ctrl + 上/下方向鍵（mac）。
• 移動(dòng)到行首、行尾：Home/End（windows，mac 外接鍵盤下也能用），Command + 左/右方向鍵（mac）。
• 基于單詞的移動(dòng)： Ctrl/Option + 左/右方向鍵。

2.7 向上/向下插入一行

• Ctrl/Command + enter：向上插入一行。
• Ctrl/Command + shift + enter：向下插入一行。

2.8 切換工作區(qū)

可以使用Ctrl + r切換打開目錄，也就是切換工作區(qū)，先按下Ctrl + r，然后選擇目錄即可切換，默認(rèn)是覆蓋當(dāng)前窗口打開，要新窗口打開需要先按住Ctrl鍵再點(diǎn)擊目錄。

2.9 重命名文件/文件夾

先選中某一個(gè)文件/文件夾，然后window按F2，mac按enter鍵即可重命名當(dāng)前名文件/文件夾。

2.10 轉(zhuǎn)到某一行

如果文件內(nèi)容過多，可以使用Ctrl/Command + g命令，然后輸入行數(shù)即可精準(zhǔn)定位到某一行。

2.11 切換編輯的文件

• Ctrl/Command + tab：切換到下一個(gè)文件。
• Ctrl/Command + shift + tab：切換到上一個(gè)文件。

2.12 格式化文件

可以使用shift + alt + f格式化當(dāng)前文件。

2.13 放大縮小編輯器界面

Ctrl/Command + +/-可以放大縮小編輯器界面。

2.14 折疊/展開代碼

• 折疊/展開當(dāng)前代碼塊：Ctrl/Command + Shift + [（折疊當(dāng)前代碼塊），Ctrl/Command + Shift + ]（展開當(dāng)前代碼塊）。
• 折疊/展開當(dāng)前文件所有代碼：Ctrl/Command + k，Ctrl/Command + 0（折疊所有代碼，按住 Ctrl/Command，分別點(diǎn)擊 k 和 0），Ctrl/Command + k，Ctrl/Command + j（展開所有代碼，按住Ctrl/Command，分別點(diǎn)擊 k 和 j）。
• 折疊/展開當(dāng)前光標(biāo)所在區(qū)域：Ctrl/Command + k，Ctrl/Command + [（折疊光標(biāo)所在區(qū)域代碼，按住 Ctrl/Command，分別點(diǎn)擊 k 和[），Ctrl/Command + k，Ctrl/Command + ]（展開光標(biāo)所在區(qū)域代碼，按住Ctrl/Command，分別點(diǎn)擊 k 和]）。

2.15 CV工程師必備

• Ctrl/Command + s：保存。
• Ctrl/Command + c：復(fù)制。
• Ctrl/Command + v：粘貼。
• Ctrl/Command + x：剪切。
• Ctrl/Command + z：撤銷。
• Ctrl/Command + a：全選。
• Alt/Option + shift + 上/下方向鍵: 復(fù)制當(dāng)前行。

小結(jié)

以上就是我個(gè)人在日常前端開發(fā)中常用的VSCode插件和快捷鍵了，熟練使用之后發(fā)現(xiàn)開發(fā)編碼的效率大大提升了，如果大家還有什么好用的VSCode插件和快捷鍵，歡迎大家推薦給我哦！

到此這篇關(guān)于VSCode開發(fā)中有哪些好用的插件和快捷鍵的文章就介紹到這了,更多相關(guān)VSCode插件和快捷鍵內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論