50

宇宙最强vscode教程（基础篇）

 5 years ago
source link: https://segmentfault.com/a/1190000017949680?amp%3Butm_medium=referral
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

本文主要介绍vscode在工作中常用的快捷键及插件，与工作无关的内容不谈，复杂的内容不谈，看完之后并用于实践绝对能提高工作效率

阅读之前需要你有一定的vscode使用经验，至少要知道插件怎么安装

本文的快捷键是基于mac的，win下只需要把 cmd 键在换成为 ctrl 。win下区别和mac只会有部分区别，如果你在win下按了快捷键没有反应，不要气馁，百度一下原因

温馨提醒：快捷键需要持续练习直到成为肌肉记忆

[TOC]

注意：

在看文章之前记住记住打开命令面板的快捷键 Cmd+shift+P (win下是Ctrl+shift+p)

一、代码编辑

windows下的快捷键放在括号里

光标的移动

基础

  1. 移动到行首 Cmd+左方向键 (win Home)
  2. 移动到行尾 Cmd+右方向键 (win End)
  3. 移动到文档的开头和末尾 Cmd+上下方向键 （win Ctrl+Home/End）
  4. 在花括号{}左边右边之间跳转 Cmd+Shift+ (win Ctrl+Shift+)

进阶

controls+-

文本选择

  1. 你只需要多按一个shift键就可以在光标移动的时候选中文本
  2. 选中单词 Cmd+D 下面要讲的多光标也会讲到Cmd+D
  3. 对于代码块的选择没有快捷键，可以使用 cmd+shift+p 打开命令面板，输入 选择括号所有内容 ,待会说下如何添加快捷键

7ruUruZ.gif

删除

  1. 你可以选中了代码之后再删除，再按Backpack(是backpack吗)或者delete删除,但是那样做太low了
  2. 所以，最Geek的删除方式是 Cmd+Shift+K (win Ctrl+Shift+K) ,想删多少删多少，当前你可以使用 ctrl+x 剪切，效果一样的

r2ieei.gif

代码移动

  • Option+上下方向键(win Alt+上下)

raE7jmb.gif

  • 代码移动的同时按住shift就可以实现代码复制 Option+Shift+上下 ZbEZji2.gif

添加注释

注释有两种形式，单行注释和块注释(在js中，单行注释//,块注释/**/)

Cmd+/
Option+Shift+A

注意：不同语言使用的注释不同

二、代码格式

代码格式化

  • 对整个文档进行格式化： Option+Shift+F (win Alt+Shift+F ),vscode会根据你使用的语言，使用不同的插件进行格式化，记得要下载相应格式化的插件
  • 对选中代码进行格式化： Cmd+K Cmk+F win( Ctrl+K Ctrl+F )

代码缩进

缩进

三、一些小技巧

  • 调整字符的大小写，选中，然后在命令面板输入 转化为大写 或者 转化为小写

    ZFFNryz.gif

  • 合并代码行，多行代码合并为一行， Cmd+J (win下未绑定)

    3AnQjqb.gif

  • 行排序，将代码行按照字母顺序进行排序，无快捷键，调出命令面板，输入 按升序排序 或者 按降序排序

    Znyi6nA.gif

四、多光标特性

使用鼠标：

按住 Option (win Alt ),然后用鼠标点，鼠标点在哪里哪里就会出现一个光标

注意：有的mac电脑上是按住 Cmd ，然后用鼠标点才可以

Nv6fQbf.gif

快捷命令

  1. Cmd+D (win Ctrl+D ) 第一次按下时，它会选中光标附近的单词；第二次按下时，它会找到这个单词第二次出现的位置，创建一个新的光标，并且选中它。(注： cmd-k cmd-d 跳过当前的选择)

    EV3qqmV.gif

  2. Option+Shift+i (win Alt+Shift+i) 首先你要选中多行代码，然后按 Option+Shift+i ,这样做的结果是：每一行后面都会多出来一个光标

    rYJFV3f.gif

撤销多光标

Esc

五、快速跳转(文件、行、符号)

快速打开文件

Cmd+P （win Ctrl+P）输入你要打开的文件名,回车打开

Rj2qeai.gif

这里有个小技巧，选中你要打开的文件后，按 Cmd+Enter ,就会在一个新的编辑器窗口打开(窗口管理，见下文)

7n2Y3eN.gif

在tab不同的文件间切换，cmd+shift+[]

行跳转

加入浏览器报了个错，错误在53行，如何快速跳转到53行

Ctrl+g 输入行号

Rfm2a2J.gif

如果你想跳转到某个文件的某一行，你只需要先按下 “Cmd + P”，输入文件名，然后在这之后加上 “:”和指定行号即可。

aQVVNvm.gif

符号跳转

符号可以是文件名、函数名，可以是css的类名

Cmd+Shift+O (win Ctrl+Shift+o) 输入你要跳转的符号，回车进行跳转

win下输入 Ctrl+T ，可以在不同文件的符号间进行搜索跳转

22Er22r.gif

定义(definition)和实现(implementation)处

f12 跳到函数的定义处

Cmd+f12 (win Ctrl+f12)跳转到函数的实现处

rInMfea.gif

引用跳转

很多时候，除了要知道一个函数或者类的定义和实现以外，你可能还希望知道它们被谁引用了，以及在哪里被引用了。这时你只需要将光标移动到函数或者类上面，然后按下 Shift + F12 ，VS Code 就会打开一个引用列表和一个内嵌的编辑器。在这个引用列表里，你选中某个引用，VS Code 就会把这个引用附近的代码展示在这个内嵌的编辑器里。

7FzURnm.gif

六、代码重构

当我们想修改一个函数或者变量的名字时候，我们只需把光标放到函数或者变量名上，然后按下 F2 ，这样这个函数或者变量出现的地方就都会被修改。

n67R7fZ.gif

下一篇会讲一些高级的应用


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK