VSCode方便实用必备的使用技巧大全

Visual Studio Code (VSCode) 是一款功能强大的开源代码编辑器，免费开源。凭借其丰富的扩展性、良好的性能和简洁的界面，VSCode 成为前端开发、后端开发乃至全栈开发的首选编辑器之一。很多人在使用VS Code时有些小技巧还没掌握。其实，掌握这些技巧可以大大提高我们的工作效率。本文将分享一些常用的 VSCode 小技巧，帮助你提升开发效率和编程体验。

一、快速导航与文件搜索

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

在大型项目中，文件众多，查找一个文件可能需要花费很多时间。VSCode 提供了 Ctrl + P（Windows）或 Cmd + P（Mac）快捷键，能够快速打开文件。只需输入文件名的部分字符，VSCode 就会列出所有匹配的文件。

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

此外，使用 Ctrl + P 时，还可以输入文件内的某个函数或变量名，以快速跳转到该位置。

1.2 快速跳转到符号（Ctrl + Shift + O）

当代码中有很多函数或类时，跳转到一个特定的符号可能会很麻烦。使用 Ctrl + Shift + O，你可以快速列出当前文件中的所有函数、类、变量等符号，并直接跳转到你需要的地方。

# 按下 Ctrl + Shift + O 后，输入函数名或符号名
# 例如，输入 "handleClick" 来快速定位到该函数

1.3 文件内容搜索（Ctrl + F）

在一个文件中查找某个特定的内容，VSCode 的内置搜索非常方便。按下 Ctrl + F 打开搜索框，然后输入你需要查找的关键词，VSCode 会高亮显示所有匹配的内容。

# 按下 Ctrl + F 后，输入查找的关键词
# 可以使用正则表达式进行更高级的搜索

二、提高编码效率的快捷键

2.1 自动补全与智能提示

VSCode 提供了强大的代码自动补全和智能提示功能。在编写代码时，输入时 VSCode 会自动提示方法、属性等内容，极大提升了编码效率。

例如，在 JavaScript 或 TypeScript 中，输入对象名后按 .，VSCode 会列出该对象的所有可用属性和方法：

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

person. // VSCode 会提示所有属性，如 name、age 等

2.2 快速修复（Ctrl + .）

当你的代码出现错误时，VSCode 会给出错误提示。你可以使用 Ctrl + .（Windows）或 Cmd + .（Mac）快速查看并应用建议的修复方法。例如，如果你漏掉了某个导入的模块，VSCode 会提示你自动补全或导入缺失的模块。

import { useState } from 'react'; // 如果忘记了导入，按下 Ctrl + . 会给出自动导入建议

2.3 多光标编辑（Alt + Click）

在编辑多个位置时，使用单一光标显得效率低下。VSCode 提供了多光标编辑功能，按住 Alt 键（Windows）或 Option 键（Mac）点击多个位置，可以在多个地方同时编辑内容。

// 按住 Alt 并点击不同的位置，可以同时编辑多个变量名
const name = 'John';
const age = 30;
const job = 'developer';

2.4 代码折叠（Ctrl + Shift + [）

当文件较大，函数或类很多时，代码的可读性会受到影响。VSCode 支持代码折叠，可以帮助你将不需要查看的部分折叠起来，集中精力在当前正在编辑的部分。

# 使用 Ctrl + Shift + [ 折叠代码块
# 使用 Ctrl + Shift + ] 展开代码块

三、使用集成终端

VSCode 内置了强大的集成终端功能，允许你直接在编辑器中打开终端，执行命令。你可以使用 `Ctrl + `` 来打开或关闭终端。

3.1 切换终端（Ctrl + Shift + ）

如果你有多个终端窗口打开，Ctrl + Shift + （Windows）或 Cmd + Shift + （Mac）可以快速切换到下一个终端窗口。

3.2 在终端中运行代码

你可以直接在集成终端中运行项目相关命令。例如，对于一个 Node.js 项目，可以直接在终端输入 node app.js 来运行代码，或使用 npm start 启动开发服务器。

# 在终端输入命令来启动 Node.js 应用
npm start

四、代码片段与自定义快捷键

4.1 使用代码片段

VSCode 允许你为常用代码片段创建快捷方式，以提高开发效率。你可以创建自定义的代码片段，或者使用社区提供的代码片段扩展。

例如，可以创建一个 JavaScript 函数模板：

"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); }，并跳转到各个可编辑字段。

4.2 使用自定义快捷键

如果你经常使用某些命令，可以为它们设置自定义快捷键。打开 File -> Preferences -> Keyboard Shortcuts，找到你需要设置快捷键的命令，点击右侧的铅笔图标，输入你想要的快捷键。

例如，你可以为 "切换终端" 设置 Ctrl + T 快捷键，或者为 "格式化文档" 设置 Ctrl + Shift + F。

五、调试功能

VSCode 的调试功能非常强大，支持 JavaScript、TypeScript、Python、Java 等多种语言的调试。

5.1 设置断点

在代码的某一行点击行号旁边，可以设置断点，调试器会在该行停止执行，方便你查看当前的变量和执行栈。

5.2 调试配置

通过点击左侧活动栏中的 "Run" 图标，你可以配置和启动调试会话。VSCode 支持多种调试配置，包括浏览器调试、Node.js 调试等。

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

六、好用的vscode插件

vscode安装完成后，根据具体需求，可以安装一些插件来使你的开发进行的更加顺利

Auto Rename Tagmmet

自动重命名成对的HTML标记，修改开始标签，结束标签会同步修改。

ESLint

用于 JavaScript/TypeScript 代码的语法检查和格式化。

Live Server

为 HTML、CSS 和 JavaScript 提供实时预览和自动刷新，在浏览器中实时预览静态网页的插件。

image preview

预览代码中图片的作用，鼠标移上去就会有小窗展示图片。

Code Spell Checker

检查代码中单词拼写是否正确，当单词不正常的时候，就会在下方出现波浪线进行提示，还可以自定义词典，忽略某个单词的检查等。

会了吧

打开源码可以自动分析所有包含的英语单词，并显示解释结果，先学单词再看代码

七、vscode常用快捷键

vscode用的熟练与否，首先就是看你是否会使用快捷键，以下表格列出的是一些常用的快捷键！

上面提到的是比较重要的一些快捷键，除了以上快捷键之外，vscode内还可以自定义快捷键

在设置中搜索键盘快捷方式，就可以查看和修改所有的快捷键表了。
 

八、总结

通过这些实用的 VSCode 小技巧，你可以显著提高开发效率，减少不必要的重复操作，从而专注于业务逻辑的开发。无论是文件导航、代码编辑、调试还是终端操作，VSCode 都能提供非常丰富的功能，帮助你快速构建高质量的应用。掌握这些技巧，不仅能让你更熟悉 VSCode 的强大功能，还能让你在日常开发中事半功倍。