我要评论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用的熟练与否，首先就是看你是否会使用快捷键，以下表格列出的是一些常用的快捷键！
mac快捷键 | win快捷键 | 作用 |
cmd+shift+p | ctrl+shift+p，f1 | 显示命令面板 |
cmd+b | ctrl+b | 显示/隐藏侧边栏 |
cmd+1、2 | ctrl+1、2 | 聚焦到第1、第2个编辑器 |
cmd++、cmd+- | ctrl++、ctrl+- | 将工作区放大/缩小（包括代码字体、左侧导航栏） |
cmd+shift+n | ctrl+shift+n | 重新开一个软件的窗口 |
cmd+\ | ctrl+\ | 拆分多个编辑器 |
cmd+` | 无 | 在同一个软件的多个工作区之间切换 |
cmd+option+左右方向键 | ctrl+pagedown/pageup | 在已经打开的多个文件之间进行切换 |
方向键 | 方向键 | 在单个字符之间移动光标 |
option+左右方向键 | ctrl+左右方向键 | 在单词之间移动光标 |
option+alt+左右方向键 | alt+shift+左右方向键 | 左右扩大/缩小选中的范围 |
cmd+enter | ctrl+enter | 在当前行的下方新增一行，然后跳至改行，即使光标不在行位，也能快速向下插入一行 |
cmd+shift+enter | ctrl+shift+enter | 在当前行的上方新增一行，然后跳至改行，即使光标不在行位，也能快速向下插入一行 |
option+↑ | alt+↑ | 将代码向上移动 |
option+↓ | alt+↓ | 将代码向下移动 |
option+shift+↑ | alt+shift+↑ | 将代码向上复制一行 |
option+shift+↓ | alt+shift+↓ | 将代码向下复制一行 |
option+backspace | ctrl+backspace | 删除光标之前的一个单词 |
cmd+shift+k | ctrl+shift+k | 删除整行 |
cmd+backspace | 删除光标之前的整行内容 | |
option+鼠标连续点击任意位置 | alt+鼠标连续点击任意位置 | 在任意位置，同时出现多个光标 |
cmd+d | ctrl+d | 将光标放在某个单词的位置，或者先选中某个单词，然后反复按下cmd+d键，即可将下一个相同的词逐一加入选择 |
cmd+shift+l | ctrl+shift+l | 将光标放在某个单词的位置（或者先选中某个单词），然后按下快捷键，则所有的相同内容处，都会出现光标 |
option+shift+i | alt+shift+i | 选中一堆文本后，按下快捷键，即可在每一行的末尾都出现一个光标 |
cmd+option+上下键 | ctrl+alt+上下键 | 在连续的多列上，同时出现多个光标 |
option+shift+鼠标拖动 | alt+shift+鼠标拖动 | 按住快捷键，然后把鼠标从区域的左上角拖至右下角，即可在选中区域的每一行末尾，出现光标 |
cmd+/ | ctrl+/ | 添加单行注释 |
option+shift+f | alt+shift+f | 代码格式化 |
f2 | f2 | 以重构的方式进行重姓名 |
cmd+shift+f | ctrl+shift+f | 全局搜索代码 |
cmd+g | f3 | 在当前文件中搜索代码，光标仍停留在编辑器里 |
ctrl+shift+鼠标竖直拖动 | 如果行数相同，可以实现把内容分行填入，如果内容只有一行，则多行复制填入 |
上面提到的是比较重要的一些快捷键，除了以上快捷键之外，vscode内还可以自定义快捷键
在设置中搜索键盘快捷方式，就可以查看和修改所有的快捷键表了。
八、总结
通过这些实用的 vscode 小技巧，你可以显著提高开发效率，减少不必要的重复操作，从而专注于业务逻辑的开发。无论是文件导航、代码编辑、调试还是终端操作，vscode 都能提供非常丰富的功能，帮助你快速构建高质量的应用。掌握这些技巧，不仅能让你更熟悉 vscode 的强大功能，还能让你在日常开发中事半功倍。
发表评论