前言

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

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

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

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

1、vscode插件

1.1 Live-server

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

1.2 Auto Rename Tag

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

1.3 Code Spell Checker

這個插件可以對你的代碼進行拼接檢查，比如你拼寫了一個錯誤的單詞，他會給出標記。

1.4 Code Runner

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

如果要運行ts，需要先全局安裝typescript和ts-node。

1.5 CodeGeeX

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

1.6 JavaScript (ES6) code snippets

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

1.7 Git History

這個插件可以幫助我們查看git日志、文件歷史記錄、比較分支或提交，對于項目多人協(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)常用的代碼片段，非常實用。

1.10 GitHub Repositories

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

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

1.11 javascript console utils

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

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

2、VScode快捷鍵

2.1 下一個相同變量

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

2.2 選擇所有相同變量

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

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

如果需要查找并跳轉(zhuǎn)到某個文件，可以先按下Ctrl/Command+p，然后用輸入文件名或者文件路徑，在篩選出的文件列表中點擊文件即可跳轉(zhuǎn)到對應(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 移動相關(guān)

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

2.7 向上/向下插入一行

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

2.8 切換工作區(qū)

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

2.9 重命名文件/文件夾

先選中某一個文件/文件夾，然后window按F2，mac按enter鍵即可重命名當前名文件/文件夾。

2.10 轉(zhuǎn)到某一行

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

2.11 切換編輯的文件

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

2.12 格式化文件

可以使用shift + alt + f格式化當前文件。

2.13 放大縮小編輯器界面

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

2.14 折疊/展開代碼

• 折疊/展開當前代碼塊：Ctrl/Command + Shift + [（折疊當前代碼塊），Ctrl/Command + Shift + ]（展開當前代碼塊）。
• 折疊/展開當前文件所有代碼：Ctrl/Command + k，Ctrl/Command + 0（折疊所有代碼，按住 Ctrl/Command，分別點擊 k 和 0），Ctrl/Command + k，Ctrl/Command + j（展開所有代碼，按住Ctrl/Command，分別點擊 k 和 j）。
• 折疊/展開當前光標所在區(qū)域：Ctrl/Command + k，Ctrl/Command + [（折疊光標所在區(qū)域代碼，按住 Ctrl/Command，分別點擊 k 和[），Ctrl/Command + k，Ctrl/Command + ]（展開光標所在區(qū)域代碼，按住Ctrl/Command，分別點擊 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ù)制當前行。

小結(jié)

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

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

最新評論