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

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

1.1 快速打開(kāi)文件（Ctrl + P）

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

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

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

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

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

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

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

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

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

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

2.1 自動(dòng)補(bǔ)全與智能提示

VSCode 提供了強(qiáng)大的代碼自動(dòng)補(bǔ)全和智能提示功能。在編寫(xiě)代碼時(shí)，輸入時(shí) VSCode 會(huì)自動(dòng)提示方法、屬性等內(nèi)容，極大提升了編碼效率。

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

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

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

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

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

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

2.3 多光標(biāo)編輯（Alt + Click）

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

// 按住 Alt 并點(diǎn)擊不同的位置，可以同時(shí)編輯多個(gè)變量名
const name = 'John';
const age = 30;
const job = 'developer';

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

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

# 使用 Ctrl + Shift + [ 折疊代碼塊
# 使用 Ctrl + Shift + ] 展開(kāi)代碼塊

三、使用集成終端

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

3.1 切換終端（Ctrl + Shift + ）

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

3.2 在終端中運(yùn)行代碼

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

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

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

4.1 使用代碼片段

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

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

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

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

4.2 使用自定義快捷鍵

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

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

五、調(diào)試功能

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

5.1 設(shè)置斷點(diǎn)

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

5.2 調(diào)試配置

通過(guò)點(diǎn)擊左側(cè)活動(dòng)欄中的 "Run" 圖標(biāo)，你可以配置和啟動(dòng)調(diào)試會(huì)話。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ù)具體需求，可以安裝一些插件來(lái)使你的開(kāi)發(fā)進(jìn)行的更加順利

Auto Rename Tagmmet

自動(dòng)重命名成對(duì)的HTML標(biāo)記，修改開(kāi)始標(biāo)簽，結(jié)束標(biāo)簽會(huì)同步修改。

ESLint

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

Live Server

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

image preview

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

Code Spell Checker

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

會(huì)了吧

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

七、vscode常用快捷鍵

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

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

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

八、總結(jié)

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

最新評(píng)論