Visual Studio Code (VSCode) 是一款功能強大的開源代碼編輯器，免費開源。憑借其豐富的擴展性、良好的性能和簡潔的界面，VSCode 成為前端開發(fā)、后端開發(fā)乃至全棧開發(fā)的首選編輯器之一。很多人在使用VS Code時有些小技巧還沒掌握。其實，掌握這些技巧可以大大提高我們的工作效率。本文將分享一些常用的 VSCode 小技巧，幫助你提升開發(fā)效率和編程體驗。

一、快速導(dǎo)航與文件搜索

1.1 快速打開文件（Ctrl + P）

在大型項目中，文件眾多，查找一個文件可能需要花費很多時間。VSCode 提供了 Ctrl + P（Windows）或 Cmd + P（Mac）快捷鍵，能夠快速打開文件。只需輸入文件名的部分字符，VSCode 就會列出所有匹配的文件。

# 按下 Ctrl + P 后，輸入文件名的一部分
# 例如，輸入 "app" 來快速打開 app.js 文件

此外，使用 Ctrl + P 時，還可以輸入文件內(nèi)的某個函數(shù)或變量名，以快速跳轉(zhuǎn)到該位置。

1.2 快速跳轉(zhuǎn)到符號（Ctrl + Shift + O）

當(dāng)代碼中有很多函數(shù)或類時，跳轉(zhuǎn)到一個特定的符號可能會很麻煩。使用 Ctrl + Shift + O，你可以快速列出當(dāng)前文件中的所有函數(shù)、類、變量等符號，并直接跳轉(zhuǎn)到你需要的地方。

# 按下 Ctrl + Shift + O 后，輸入函數(shù)名或符號名
# 例如，輸入 "handleClick" 來快速定位到該函數(shù)

1.3 文件內(nèi)容搜索（Ctrl + F）

在一個文件中查找某個特定的內(nèi)容，VSCode 的內(nèi)置搜索非常方便。按下 Ctrl + F 打開搜索框，然后輸入你需要查找的關(guān)鍵詞，VSCode 會高亮顯示所有匹配的內(nèi)容。

# 按下 Ctrl + F 后，輸入查找的關(guān)鍵詞
# 可以使用正則表達式進行更高級的搜索

二、提高編碼效率的快捷鍵

2.1 自動補全與智能提示

VSCode 提供了強大的代碼自動補全和智能提示功能。在編寫代碼時，輸入時 VSCode 會自動提示方法、屬性等內(nèi)容，極大提升了編碼效率。

例如，在 JavaScript 或 TypeScript 中，輸入對象名后按 .，VSCode 會列出該對象的所有可用屬性和方法：

const person = {
  name: 'John',
  age: 30,
};

person. // VSCode 會提示所有屬性，如 name、age 等

2.2 快速修復(fù)（Ctrl + .）

當(dāng)你的代碼出現(xiàn)錯誤時，VSCode 會給出錯誤提示。你可以使用 Ctrl + .（Windows）或 Cmd + .（Mac）快速查看并應(yīng)用建議的修復(fù)方法。例如，如果你漏掉了某個導(dǎo)入的模塊，VSCode 會提示你自動補全或?qū)肴笔У哪K。

import { useState } from 'react'; // 如果忘記了導(dǎo)入，按下 Ctrl + . 會給出自動導(dǎo)入建議

2.3 多光標編輯（Alt + Click）

在編輯多個位置時，使用單一光標顯得效率低下。VSCode 提供了多光標編輯功能，按住 Alt 鍵（Windows）或 Option 鍵（Mac）點擊多個位置，可以在多個地方同時編輯內(nèi)容。

// 按住 Alt 并點擊不同的位置，可以同時編輯多個變量名
const name = 'John';
const age = 30;
const job = 'developer';

2.4 代碼折疊（Ctrl + Shift + [）

當(dāng)文件較大，函數(shù)或類很多時，代碼的可讀性會受到影響。VSCode 支持代碼折疊，可以幫助你將不需要查看的部分折疊起來，集中精力在當(dāng)前正在編輯的部分。

# 使用 Ctrl + Shift + [ 折疊代碼塊
# 使用 Ctrl + Shift + ] 展開代碼塊

三、使用集成終端

VSCode 內(nèi)置了強大的集成終端功能，允許你直接在編輯器中打開終端，執(zhí)行命令。你可以使用 `Ctrl + `` 來打開或關(guān)閉終端。

3.1 切換終端（Ctrl + Shift + ）

如果你有多個終端窗口打開，Ctrl + Shift + （Windows）或 Cmd + Shift + （Mac）可以快速切換到下一個終端窗口。

3.2 在終端中運行代碼

你可以直接在集成終端中運行項目相關(guān)命令。例如，對于一個 Node.js 項目，可以直接在終端輸入 node app.js 來運行代碼，或使用 npm start 啟動開發(fā)服務(wù)器。

# 在終端輸入命令來啟動 Node.js 應(yīng)用
npm start

四、代碼片段與自定義快捷鍵

4.1 使用代碼片段

VSCode 允許你為常用代碼片段創(chuàng)建快捷方式，以提高開發(fā)效率。你可以創(chuàng)建自定義的代碼片段，或者使用社區(qū)提供的代碼片段擴展。

例如，可以創(chuàng)建一個 JavaScript 函數(shù)模板：

"Print Function": {
  "prefix": "func",
  "body": [
    "function ${1:funcName}(${2:params}) {",
    "  console.log('${3:message}:', ${2});",
    "}"
  ],
  "description": "A simple function template"
}

通過輸入 func，VSCode 會自動補全為 function funcName(params) { console.log(message, params); }，并跳轉(zhuǎn)到各個可編輯字段。

4.2 使用自定義快捷鍵

如果你經(jīng)常使用某些命令，可以為它們設(shè)置自定義快捷鍵。打開 File -> Preferences -> Keyboard Shortcuts，找到你需要設(shè)置快捷鍵的命令，點擊右側(cè)的鉛筆圖標，輸入你想要的快捷鍵。

例如，你可以為 "切換終端" 設(shè)置 Ctrl + T 快捷鍵，或者為 "格式化文檔" 設(shè)置 Ctrl + Shift + F。

五、調(diào)試功能

VSCode 的調(diào)試功能非常強大，支持 JavaScript、TypeScript、Python、Java 等多種語言的調(diào)試。

5.1 設(shè)置斷點

在代碼的某一行點擊行號旁邊，可以設(shè)置斷點，調(diào)試器會在該行停止執(zhí)行，方便你查看當(dāng)前的變量和執(zhí)行棧。

5.2 調(diào)試配置

通過點擊左側(cè)活動欄中的 "Run" 圖標，你可以配置和啟動調(diào)試會話。VSCode 支持多種調(diào)試配置，包括瀏覽器調(diào)試、Node.js 調(diào)試等。

// .vscode/launch.json 配置示例
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}/app.js"
    }
  ]
}

六、好用的vscode插件

vscode安裝完成后，根據(jù)具體需求，可以安裝一些插件來使你的開發(fā)進行的更加順利

Auto Rename Tagmmet

自動重命名成對的HTML標記，修改開始標簽，結(jié)束標簽會同步修改。

ESLint

用于 JavaScript/TypeScript 代碼的語法檢查和格式化。

Live Server

為 HTML、CSS 和 JavaScript 提供實時預(yù)覽和自動刷新，在瀏覽器中實時預(yù)覽靜態(tài)網(wǎng)頁的插件。

image preview

預(yù)覽代碼中圖片的作用，鼠標移上去就會有小窗展示圖片。

Code Spell Checker

檢查代碼中單詞拼寫是否正確，當(dāng)單詞不正常的時候，就會在下方出現(xiàn)波浪線進行提示，還可以自定義詞典，忽略某個單詞的檢查等。

會了吧

打開源碼可以自動分析所有包含的英語單詞，并顯示解釋結(jié)果，先學(xué)單詞再看代碼

七、vscode常用快捷鍵

vscode用的熟練與否，首先就是看你是否會使用快捷鍵，以下表格列出的是一些常用的快捷鍵！

上面提到的是比較重要的一些快捷鍵，除了以上快捷鍵之外，vscode內(nèi)還可以自定義快捷鍵

在設(shè)置中搜索鍵盤快捷方式，就可以查看和修改所有的快捷鍵表了。
 

八、總結(jié)

通過這些實用的 VSCode 小技巧，你可以顯著提高開發(fā)效率，減少不必要的重復(fù)操作，從而專注于業(yè)務(wù)邏輯的開發(fā)。無論是文件導(dǎo)航、代碼編輯、調(diào)試還是終端操作，VSCode 都能提供非常豐富的功能，幫助你快速構(gòu)建高質(zhì)量的應(yīng)用。掌握這些技巧，不僅能讓你更熟悉 VSCode 的強大功能，還能讓你在日常開發(fā)中事半功倍。

最新評論