VSCode使用技巧,程式碼編寫效率提升2倍以上!

正在輸入程式碼……發表於2023-03-08

VSCode是一款開源免費的跨平臺文字編輯器,它的可擴充套件性和豐富的功能使得它成為了許多程式設計師的首選編輯器。在本文中,我將分享一些VSCode的使用技巧,幫助您更高效地使用它。

1. 外掛
VSCode具有非常豐富的外掛生態系統,透過安裝外掛可以為編輯器增加更多的功能。以下是一些首選推薦的常用外掛:

CodeGeeX:基於人工智慧驅動的,快速編寫程式碼的程式碼生成工具。在外掛市場就可以免費下載使用!

擁有程式碼生成功能:可以根據自然語言註釋描述的功能,自動生成程式碼。也可以根據已有的程式碼自動生成後續程式碼,補全當前行或生成後續若干行,幫助你提高程式設計效率。
程式碼翻譯功能:支援多種程式語言之間互譯,準確率高。目前程式碼翻譯功能支援八種最流行的程式語言: Python、Go、Java、JavaScript、C++、C#、PHP、TypeScript等;
程式碼解釋功能:可以一鍵為你的程式碼逐行新增註釋;

ESLint:用於在程式碼編寫期間檢測和修復常見的JavaScript程式碼錯誤和風格問題。

Prettier:自動格式化程式碼。

GitLens:提供了一些有用的Git功能,例如顯示每行程式碼的最後一次修改的作者和時間,程式碼的提交歷史等等。

Code Spell Checker:檢查拼寫錯誤。

Rainbow Brackets:高亮括號,使它們更容易區分。

Bracket Pair Colorizer:對匹配的括號進行顏色編碼,使其更容易識別。

當然這些外掛也只是冰山一角,你可以在VSCode外掛市場中搜尋你需要的外掛。

2. 快捷鍵
VSCode有很多實用的快捷鍵,可以幫助您更快地完成常見的任務。以下是一些常用的快捷鍵:

Ctrl + Shift + P:開啟命令皮膚,可以快速搜尋並執行命令。

Ctrl + Shift + E:開啟側邊欄中的檔案資源管理器。

Ctrl + Shift + F:開啟全域性搜尋。

Ctrl + Shift + D:開啟側邊欄中的偵錯程式。

**Ctrl + **:開啟終端。

當然這些快捷鍵只是冰山一角,透過官方文件可以找到更多的快捷鍵。

3. 自定義設定
您可以根據自己的喜好和需要,自定義VSCode的設定。以下是一些常見的設定:

修改字型大小和樣式。

配置自動儲存。

配置程式碼摺疊。

設定檔案自動換行。

修改主題。

您可以在VSCode的“首選項”選單中找到這些設定。

4. 偵錯程式
VSCode的偵錯程式非常強大,可以幫助您除錯JavaScript、TypeScript、Node.js等應用程式。您可以透過在程式碼中新增斷點,逐步執行程式碼,檢視變數值等等來進行除錯。如果您不熟悉如何使用VSCode的偵錯程式,可以參考官方文件中的偵錯程式教程。

5. 多游標編輯
多游標編輯是VSCode中非常實用的功能,可以在多個位置同時編輯文字。

您可以使用以下快捷鍵來啟用多游標編輯:

Ctrl + Alt + Up/Down:在當前行上/下新增一個游標。

Ctrl + Shift + L:選擇所有匹配項並將游標放在每個匹配項上。

Alt + Click:在滑鼠單擊處新增游標。

在啟用多游標編輯後,您可以同時編輯多個位置的文字。例如,您可以在多個行中同時新增相同的程式碼,或者在一組行中同時刪除相同的程式碼。

6. 程式碼片段
程式碼片段是一些常用程式碼的快速輸入方式,您可以在程式碼中輸入簡短的快捷程式碼來自動生成常用程式碼塊。例如,當您輸入for並按下Tab鍵時,VSCode會自動為您生成一個for迴圈的程式碼塊。您可以透過在json檔案中定義程式碼片段來建立自己的程式碼片段,例如:
file
在定義完畢後,您可以在程式碼中輸入hello並按下Tab鍵來使用該程式碼片段。

7. Emmet
Emmet是一種快速編寫HTML、CSS等程式碼的方式。它使用簡短的程式碼片段來生成複雜的程式碼塊。例如,您可以在HTML中輸入ul>li*5並按下Tab鍵,VSCode會自動為您生成一個包含5個列表項的無序列表。

在VSCode中,預設情況下Emmet是啟用的。如果您不確定如何使用Emmet,請檢視官方文件中的Emmet教程。

結論
以上是一些常見的VSCode使用技巧,希望對您有所幫助。當然,VSCode擁有更多的功能和外掛,您可以透過關注我的內容掌握這些技巧,更高效的使用VSCode來編寫程式碼。特別推薦使用CodeGeeX外掛,程式碼編寫效率提升50%以上!

本文作者ChatGPT

本文由部落格一文多發平臺 OpenWrite 釋出!

相關文章