5 个 Visual Studio Code 技巧助您提高工作效率

VS Code 或许是目前全球最受欢迎的免费开源代码编辑器/轻量级 IDE。以下 5 个技巧保证能提升你的工作效率！

#1 - 使用“重命名符号”进行重构

我们最初创建变量、函数或属性键时，并不总是能赋予它们应有的正确名称。很多时候，在进行重构时，我们需要将其中一些重命名为更合适的名称。

假设我们想在代码中将一个字典/对象更改为foo，counter但它在整个项目中已在多个不同文件中使用过多次。我们还想将其属性键更改为bar，value这样我们就有了 ，counter.value而不是foo.bar。我们该怎么做？

一种简单的方法是简单地通过搜索面板进行全局搜索替换（shift + cmd + F在 macOS 上，或shift + ctrl + F在 Windows 和 Linux 上）。这种方法可能很快捷，但也可能不安全——如果我们碰巧有另一个名为 的变量food，那么简单的替换也会对这个变量生效。counterd哎呀！

这些命名实体被称为“符号”。最直接、最“正确”的方法是使用 VS Code 中的“重命名符号”功能。将光标放在要重命名的“符号”上，然后点击F2（macOS 系统也支持此功能）。我们将在要重命名的符号旁边看到一个文本框。这样，整个项目中所有引用此名称的元素都将被正确重命名。如果我们在 React 组件上使用此功能，JSX 标记也会被重命名！

#2 - 编辑快捷方式

编辑器不仅是我们输入内容的地方，也是我们移动文本块的地方。

你有没有注意到，如果你在不选择任何内容的情况下按下标准的复制/粘贴/剪切快捷键，VS Code 会在整行上调用该操作？这对于编辑整行文本非常有用。

还有其他专用于复制和移动线条的快捷方式。

alt + up或alt + down只会将光标当前所在的行向上或向下移动。shift + alt + up或shift + alt + down会复制该行并将其放置在当前行的上方或下方。这些快捷键在您选择多行时也有效。不过，在某些 Linux 发行版中，这些组合键可能会与系统默认的键盘映射冲突。在这种情况下，您必须在 VS Code 的设置中重新分配它们。

然而，最棒的是shift + ctrl + cmd + right/left它能扩展或缩小块选择。在嵌套代码块中尝试一下，你就会明白我的意思了！ Windows/Linux 上的对应功能是shift + alt + right/left。

#3 - 多光标魔法

VS Code 中我最喜欢的一个效率技巧就是它的多光标支持。如果你之前用过Sublime，你肯定知道它有多棒！

首先，我们可以使用alt + mouse click来插入光标。如果在某个地方犯了错误，可以使用cmd + U或ctrl + U来撤消光标插入。如果我们想要多选的文本块已经垂直对齐，我们只需使用cmd + alt + up或（在 Windows 或 Linux 上用cmd + alt + down替换）即可在当前位置的正上方或正下方插入光标。cmdctrl

如果您想选择当前光标下的单词（以空格或特殊字符分隔的文本）或当前选择的文本的下一个出现，cmd + D则可以完成该工作。

非常适合进行批量重命名、删除或复制粘贴，特别是在使用标记语言时！

#4 - 快速键盘导航

使用键盘导航非常方便。您可以使用：

• ctrl + G（在 macOS 上也是如此）转到行...
• ctrl + P（这次在 macOS 上替换ctrl为！）转到文件...cmd
• ctrl + shift + O（在 macOS 上替换ctrl为）转到符号...。cmd

哥们，我太喜欢第三个了！它会直接带你到声明那个函数或变量的地方——也就是那个符号。然后你就可以从那里继续了。😉

另一个不错的快捷方式是ctrl + -或shift + ctrl + -在 Mac 上（alt + left/right在 Windows/Linux 上）直接跳转到之前的光标位置，如果与那些“转到”快捷方式结合使用，效果会更好！

#5 - DIY 代码片段

如果您已经使用 VS Code 一段时间，您可能已经从市场中安装了一些代码片段扩展。代码片段是一种简写形式，您可以键入它来扩展为完整的代码片段。它们通常也足够智能，可以将光标放在关键位置，让您可以直接更改占位符函数名称或类似内容。

但是，最适合你的代码片段永远是自己亲手编写的。为 VS Code 编写自己的代码片段其实并不难！

只需转到Mac 上的“代码”>“首选项”>“用户代码片段”或 Windows/Linux 上的“文件”>“首选项”>“用户代码片段”，您就可以选择一种语言（或全局范围）来编写自己的代码片段！

片段遵循以下格式：

{
  // ...
  "Name of the snippet": {
    "prefix": "helo", // the shorthand to invoke the snippet
    "body": [
      "print('Hello, $1');",
      "$2"
    ],
    "description": "Prints 'Hello, blahblahblah' to terminal"
  }
  // ...
}

请注意$1，$2等符号仅表示占位符键的位置，您可以Tab在调用代码片段时使用 键跳转到这些位置。要将光标移出代码片段并使Tab键恢复正常，只需按Esc。

奖励 - 安装 IntelliCode 扩展

微软最近为 VS Code 推出了更高级的 IntelliSense 扩展，该扩展由机器学习提供支持。欢迎前往他们的扩展市场查看！

该扩展目前支持 JavaScript、TypeScript、Python 和 Java。自从 IntelliCode 预览版发布以来，我就一直在用它编写代码，这个小小的扩展帮我节省了大量的时间和精力！:)

最初发布在我的博客上，我大约每两周发布一次关于 web dev、flutter 和有时 ML 的随机内容。

你也可以在 Twitter 上找到我@hexrcs :)