VS code 高效使用说明

Posted henei

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VS code 高效使用说明相关的知识,希望对你有一定的参考价值。

工欲善其事必先利其器!如果你是做前端开发,我推荐 VS Code 作为「主力开发工具」。

VS Code 的全称是 Visual Studio Code,是一款开源的、免费的、跨平台的、高性能的、轻量级的代码编辑器。它在性能、语言支持、开源社区方面,都做得很不错。

VS Code 的特点

  • VS Code 的使命,是让开发者在编辑器里拥有 IDE 那样的开发体验,比如代码的智能提示、语法检查、图形化的调试工具、插件扩展、版本管理等。
  • 跨平台支持 MacOS、Windows 和 Linux 等多个平台。
  • VS Code 的源代码以 MIT 协议开源。
  • 支持第三方插件,功能强大,生态系统完善。
  • VS Code 自带了 javascript、TypeScript 和 Node.js 的支持。也就是说,你在书写 JS 和 TS 时,是自带智能提示的。当然,其他的语言,你可以安装相应的扩展包插件,也会有智能提示。

VS Code 的安装

  • VS Code 官网:https://code.visualstudio.com

VS Code 的安装很简单,直接去官网下载安装包,然后双击安装即可。

VS Code 快捷键

VS Code 用得熟不熟,首先就看你是否会用快捷键。以下列出的内容,都是常用快捷键,而加粗部分的快捷键,使用频率则非常高。

1、工作区快捷键

Mac 快捷键Win 快捷键作用备注
Cmd + Shift + PCtrl + Shift + P,F1显示命令面板
Cmd + BCtrl + B显示/隐藏侧边栏很实用
Cmd + \\Ctrl + \\创建多个编辑器【重要】抄代码利器
Cmd + 1、2Ctrl + 1、2聚焦到第 1、第 2 个编辑器同上重要
cmd +/-ctrl +/-将工作区放大/缩小(包括代码字体、左侧导航栏)在投影仪场景经常用到
Cmd + JCtrl + J显示/隐藏控制台
Cmd + Shift + NCtrl + Shift + N重新开一个软件的窗口很常用
Cmd + Shift + WCtrl + Shift + W关闭软件的当前窗口
Cmd + NCtrl + N新建文件
Cmd + WCtrl + W关闭当前文件

2、跳转操作

Mac 快捷键Win 快捷键作用备注
Cmd + `没有在同一个软件的多个工作区之间切换使用很频繁
Cmd + Option + 左右方向键Ctrl + Pagedown/Pageup在已经打开的多个文件之间进行切换非常实用
Ctrl + TabCtrl + Tab在已经打开的多个文件之间进行跳转不如上面的快捷键快
Cmd + Shift + OCtrl + shift + O在当前文件的各种方法之间进行跳转
Ctrl + GCtrl + G跳转到指定行
Cmd+Shift+\\Ctrl+Shift+\\跳转到匹配的括号

3、移动光标

Mac 快捷键Win 快捷键作用备注
方向键方向键在单个字符之间移动光标大家都知道
option + 左右方向键Ctrl + 左右方向键在单词之间移动光标很常用
Cmd + 左右方向键Fn + 左右方向键在整行之间移动光标很常用
Cmd + ←Fn + ←(或 Win + ←)将光标定位到当前行的最左侧很常用
Cmd + →Fn + →(或 Win + →)将光标定位到当前行的最右侧很常用
Cmd + ↑Ctrl + Home将光标定位到文章的第一行
Cmd + ↓Ctrl + End将光标定位到文章的最后一行
Cmd + Shift + \\ 在代码块之间移动光标

4、编辑操作

Mac 快捷键Win 快捷键作用备注
Cmd + EnterCtrl + Enter在当前行的下方新增一行,然后跳至该行即使光标不在行尾,也能快速向下插入一行
Cmd+Shift+EnterCtrl+Shift+Enter在当前行的上方新增一行,然后跳至该行即使光标不在行尾,也能快速向上插入一行
Option + ↑Alt + ↑将代码向上移动很常用
Option + ↓Alt + ↓将代码向下移动很常用
Option + Shift + ↑Alt + Shift + ↑将代码向上复制
Option + Shift + ↓Alt + Shift + ↓将代码向下复制写重复代码的利器

5、多光标编辑

Mac 快捷键Win 快捷键作用备注
Cmd + Option + 上下键Ctrl + Alt + 上下键在连续的多列上,同时出现光标
Option + 鼠标点击任意位置Alt + 鼠标点击任意位置在任意位置,同时出现光标
Option + Shift + 鼠标拖动Alt + Shift + 鼠标拖动在选中区域的每一行末尾,出现光标
Cmd + Shift + LCtrl + Shift + L在选中文本的所有相同内容处,出现光标

其他的多光标编辑操作:(很重要)

  • 选中某个文本,然后反复按住快捷键「 Cmd + D 」键(windows 用户是按住「Ctrl + D」键), 即可将全文中相同的词逐一加入选择。
  • 选中一堆文本后,按住「Option + Shift + i」键(windows 用户是按住「Alt + Shift + I」键),既可在每一行的末尾都创建一个光标。

6、删除操作

Mac 快捷键Win 快捷键作用备注
Cmd + shift + KCtrl + Shift + K删除整行「Cmd + X」的作用是剪切,但也可以删除整行
option + BackspaceCtrl + Backspace删除光标之前的一个单词英文有效,很常用
option + deleteCtrl + delete删除光标之后的一个单词
Cmd + Backspace 删除光标之前的整行内容很常用
Cmd + delete 删除光标之后的整行内容

备注:上面所讲到的移动光标、编辑操作、删除操作的快捷键,在其他编辑器里,大部分都适用。

7、编程语言相关

Mac 快捷键Win 快捷键作用备注
Cmd + /Ctrl + /添加单行注释很常用
Option + Shift + FAlt + shift + F代码格式化很常用
F2F2以重构的方式进行重命名改代码备
Ctrl + J 将多行代码合并为一行Win 用户可在命令面板搜索”合并行“
Cmd +
Cmd + UCtrl + U将光标的移动回退到上一个位置撤销光标的移动和选择

8、搜索相关

Mac 快捷键Win 快捷键作用备注
Cmd + Shift + FCtrl + Shift +F全局搜索代码很常用
Cmd + PCtrl + P在当前的项目工程里,全局搜索文件名
Cmd + FCtrl + F在当前文件中搜索代码,光标在搜索框里
Cmd + GF3在当前文件中搜索代码,光标仍停留在编辑器里很巧妙

9、查找某个函数在哪些地方被调用了

比如我已经在a.js文件里调用了 foo()函数。那么,如果我想知道foo()函数在其他文件中是否也被调用了,该怎么做呢?

做法如下:在 a.js 文件里,选中foo()函数(或者将光标放置在foo()函数上),然后按住快捷键「Shift + F12」,就能看到 foo()函数在哪些地方被调用了,比较实用。

10、鼠标操作

  • 在当前行的位置,鼠标三击,可以选中当前行。
  • 用鼠标单击文件的行号,可以选中当前行。
  • 在某个行号的位置,上下移动鼠标,可以选中多行。

以上是关于VS code 高效使用说明的主要内容,如果未能解决你的问题,请参考以下文章

VS code自定义用户代码片段snippet

[搬运] 将 Visual Studio 的代码片段导出到 VS Code

vs code 用户代码片段 html.json

VS Code配置markdown代码片段

VS Code配置markdown代码片段

VS Code中自定义Emmet代码片段