在开源 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)。

高效使用VSCode的9点建议的更多相关文章

  1. 重复代码的克星,高效工具 VSCode snippets 的使用指南

    为什么要用 snippets(代码段)? 不管你使用何种编程语言,在我们日常的编码工作中,都会存在有大量的重复代码编写,例如: 日志打印: console.log,log.info('...') 输出 ...

  2. 高效开发Android App的10个建议

    假如要Google Play上做一个最失败的案例,那最好的秘诀就是界面奇慢无比.耗电.耗内存.接下来就会得到用户的消极评论,最后名声也就臭了.即使你的应用设计精良.创意无限也没用. 耗电或者内存占用等 ...

  3. 使用VsCode编写和调试.NET Core项目

    ​ 本来我还想介绍以下VSCode或者donet core,但是发现都是废话,没有必要,大家如果对这个不了解可以直接google这两个关键字,或者也根本不会看我这边文章. ​ 好直接进入主题了,本文的 ...

  4. VsCode编写和调试.NET Core

    本文转自:https://www.cnblogs.com/Leo_wl/p/6732242.html 阅读目录 使用VsCode编写和调试.NET Core项目 回到目录 使用VsCode编写和调试. ...

  5. 用vscode开发vue应用[转]

    https://segmentfault.com/a/1190000019055976 现在用VSCode开发Vue.js应用几乎已经是前端的标配了,但很多时候我们看到的代码混乱不堪,作为一个前端工程 ...

  6. 用vscode开发vue应用

    阅读 3237 收藏 205 2019-05-02 原文链接:segmentfault.com 云服务器 1 核 2G , 9元/月 ,买十送二,99/年!!!快来上车!developer.huawe ...

  7. PlantUML --- 使用代码快速绘制时序图、思维导图

    本篇思维导图 @startmindmap <style> mindmapDiagram { .green { BackgroundColor lightgreen } .rose { Ba ...

  8. SELECT TOP 1 比不加TOP 1 慢的原因分析以及SELECT TOP 1语句执行计划预估原理

    本文出处:http://www.cnblogs.com/wy123/p/6082338.html 现实中遇到过到这么一种情况: 在某些特殊场景下:进行查询的时候,加了TOP 1比不加TOP 1要慢(而 ...

  9. node.js 基础学习笔记3 -http

    http模块,其中封装了一个高效的HTTP服务器和一个建议的HTTP客户端 http.server是一个基于事件的HTTP服务器 http.request则是一个HTTP客户端工具,用户向服务器发送请 ...

随机推荐

  1. 线程(Thread、ThreadPool)

    多线程的操作,推荐使用线程池线程而非新建线程.因为就算只是单纯的新建一个线程,这个线程什么事情也不做,都大约需要1M的内存空间来存储执行上下文数据结构,并且线程的创建与回收也需要消耗资源,耗费时间.而 ...

  2. 多个router和多个network

    一般搭建成功了opentack后,都会按照文档的这样创建网络 Scenario 1: one tenant, two networks, one router Scenario 2: two tena ...

  3. [转] Quality Of Service In OpenStack

    http://tropicaldevel.wordpress.com/2013/07/15/quality-of-service-in-openstack/ In this post I will b ...

  4. 举例子来说明Python引用和对象

    今天看到这么一句奇怪的话: python中变量名和对象是分离的:最开始的时候是看到这句话的时候没有反应过来.决定具体搞清楚一下python中变量与对象之间的细节.(其实我感觉应该说 引用和对象分离 更 ...

  5. [Swift]LeetCode44. 通配符匹配 | Wildcard Matching

    Given an input string (s) and a pattern (p), implement wildcard pattern matching with support for '? ...

  6. [Swift]LeetCode338. 比特位计数 | Counting Bits

    Given a non negative integer number num. For every numbers i in the range 0 ≤ i ≤ num calculate the ...

  7. Vue入门手册整理

    目录 第一章.环境搭建 第二章.目录结构 第三章.Vue调试 第四章.定义页面 附录资料 第一章.环境搭建 1.1.准备: npm: 6.9.0 (npm > 3.0) node: v10.15 ...

  8. shell 问题备忘

    一 ls结果赋给变量 dirSrc=$(ls test/ -l | awk '/^d/{print $NF}') echo "dirSrc is $dirSrc" 二 使用cut查 ...

  9. 第一次写html网页

    步骤一:(在notpad中写) <html> <head> <title>登录页面</title> </head> <body> ...

  10. Spring Boot @ControllerAdvice 处理全局异常,返回固定格式Json

    需求 在构建RestFul的今天,我们一般会限定好返回数据的格式比如: { "code": 0,  "data": {},  "msg": ...