高效使用VSCode的9点建议

译者按： 充分利用其特性，你会以为 VSCode 很是强大！

• 原文: Pro tips for Visual Studio Code to be productive in 2018 👨🏻‍💻

• 译者: Fundebug

为了保证可读性，本文采用意译而非直译。另外，本文版权归原做者全部，翻译仅用于学习。

在开源 IDE 市场，最近几年 Visual Studio Code(简称 VSCode)愈来愈流行。自从 2015 年对外发布后，根据 2018 年 Stack Overflow 的调查报告，有 35%的开发者转而使用 VSCode。我接下来会介绍一些建议和技巧来让你更加高效的使用 VSCode。

Git 和 Gitlens

Git 能够说是在开发者中最流行的软件，从 IDE 直接操做 Git 会比经过命令行简单不少。Git 模块能够帮助你作 stage、commit、stash、undo 等操做。Gitlens 插件提供了更多的可能性。Gitlens 最有用的特性就是你能够看到每一行代码的 commit 历史。

实时共享

VSCode Live Share 是一个实验性的特性。官网上这样说到：

不管构建什么类型的应用，使用何种语言编程或使用何种操做系统，当须要协做时，实时共享都可以当即将你的项目与队友共享。 队友可实时编辑和调试，无需克隆存储库或设置其环境。

经过 Live Share，能够共同进行编辑和调试，同时还可共享音频、服务器、终端、差别、注释等。 不管是进行代码评审、与队友结对编程、参与 Hackathon 活动仍是进行互动式讲座，Live Share 均可以经过多种写做方式为你提供支持。

JSON to Code

是否经历过，当个面对一个 API，你但愿它返回的数据结构可以有一个类型定义，可是又不用本身去手动定义？ Paste JSON as Code 能够一键将 JSON 文件转换为一个目标语言的类型定义。

批量重命名

写代码和维护代码的时候少不了作重构，特别是当你重构一个很大的模块或则很大一段代码的时候，一个一个去查找和修改变量/函数名会很头痛。好在 VSCode 能够帮助咱们。

若是你选中一个变量/方法名，而后按 F2，你能够编辑选中的名字，整个项目中全部相关的实例都会被修改。

若是你只想修改当前文件，使用 Command+F2(Mac) 或则 Ctrl+F2(Windows) 命令。

跳转到定义

当在写代码的时候，面对一个变量/方法，每每会忘记其指代的含义。在这个时候怎么作呢？你要花上数分钟的时间来搜索整个项目，定位到正确的位置。在 VSCode，你可使用 Command(Mac)/Ctrl(Windows) 并鼠标单击对应的变量/方法名，VSCode 会自动跳转到正确的位置。

或则，你能够将光标停留在变量/方法名，而后按下 Command(Mac)/Ctrl(Windows)，会在当前光标旁边弹出变量/函数的定义。这样省去跳转到其它位置的麻烦。

多行编辑

若是你想要插入/删除多个相同文本的实例，你能够建立一个多光标(Multiple cursor)。你能够按住 Option(Mac)/Alt(Windows) 按键，而后每点击一次，光标就在当前位置停住。每一次点击建立一个新的光标，而后就能够同时编辑这些位置。

在 HTML 中很是有用，特别是当你想修改类名/超连接，而它在多处出现的时候。

Debugger

Debugger 自己内容不少，VSCode 有一个专门介绍的视频。

Youtube 视频地址：VSCode debugging Node.js

绑定快捷键

若是你想高效的工做，将你经常使用的命令制成快捷键。你能够经过cheat sheet/“查看快捷键绑定”来快速查看核心命令。

命令控制台是你最好的朋友，你可使用 Command+p(Mac)/Ctrl+p(Windows) 来打开。输入文件名，你能够快速跳转到指定的文件。这比你在左侧项目目录慢慢找要快得多。

• 你能够输入 > 来查看全部可用任务

• 用@符号来获取当前文件全部的 Symbols(变量/函数/类名/方法等等)

自定义绑定快捷键

在 VSCode 有一个命令缺失了，那就是“保存全部”。咱们能够自定义一个：Command+Shift+S(Mac)/Ctrl+Shift+S(Windows)。

关于Fundebug

Fundebug专一于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。 自从2016年双十一正式上线，Fundebug累计处理了10亿+错误事件，付费客户有Google、360、金山软件、百姓网等众多品牌企业。欢迎你们免费试用！

版权声明

转载时请注明做者Fundebug以及本文地址： https://blog.fundebug.com/2019/03/26/tips-for-vscode-to-be-productive/