比如:

  • Shift + ↑:可以移动整行
  • Shift + Alt + ↓: 可以复制整行


------更新-----

stable版 1.31已经可以用了。

----------------

Insider版现在提供screencast模式,方便我录制视频用。会自动显示你的键盘操作。

screencast mode

评论区问是哪个版本,为什么没这个功能。VS Code有Stable和Insider两种版本。我上面说了是Insider版现在提供的功能,将来会进入Stable的。


经常帮一些同学 One-on-One 地解决问题,在看部分同学使用 VS Code 的时候,有些蹩脚,实际上一些有用的技巧能够提高我们的日常工作效率。

( 豁,评论里有人说看完就学会了 One-on-One →_→)

欢迎点击头像关注我们,后续持续分享更多阿里工程师的技术干货成长心得。

——————————————————————————————————————————

一、重构代码

VS Code 提供了一些快速重构代码的操作,例如:

将一整段代码提取为函数:选择要提取的源代码片段,然后单击做成槽中的灯泡查看可用的重构操作。代码片段可以被提取到一个新方法中,或者在不同的范围内(当前闭包、当前函数内、当前类中、当前文件内)提取到一个新函数中。在提取重构期间,VS Code 会引导为该函数进行命名。

将表达式提取到常量:为当前选定的表达式创建新的常量。

移动到新的文件:将指定的函数移动到新的文件,VS Code 将自动命名并创建文件,且在当前文件内引入新的文件。

转换导出方式export const name 或者 export default

合并参数:将函数的多个参数合并为单个对象参数:

参考: 重构操作

Refactoring source code in Visual Studio Code?

code.visualstudio.com图标

JS/TS 重构操作

https://code.visualstudio.com/Docs/languages/typescript#_refactoring?

code.visualstudio.com

二、自定义视图布局

VS Code 的布局系统非常灵活,可以在工作台上的活动栏、面板中移动视图。

参考:重新排列视图

Visual Studio Code April 2020?

code.visualstudio.com图标

三、快速调试代码

在 VS Code 内调试 JS/TS 代码非常简单,只需要使用 Debug: Open Link 命令即可。这在调试前端或 Node 项目时非常有用,这类型的项目通常会启动一个本地服务,这时候只需要将本地服务地址填写到 Debug: Open Link 输入框中即可。

参考:Debug

Debugging in Visual Studio Code?

code.visualstudio.com图标

四、查看和更新符号的引用

查看符号的引用、快速修改引用的上下文:例如,快速预览某个函数在哪些地方被调用了及其调用时上下文,还可以在预览视图中更新调用上下文的代码。

重命名符号及其引用:接著上面的例子,如果想更新函数名以及所有调用,怎么实现?按 F2 键,然后键入所需的新名称,再按 Enter 键进行提交。符号的所有引用都将被重命名,该操作还是跨文件的。

参考:Peek

Code Navigation in Visual Studio Code?

code.visualstudio.com图标

Rename Symbol

https://code.visualstudio.com/docs/editor/editingevolved#_rename-symbol?

code.visualstudio.com

五、符号导航

在查看一个长文件的时候,代码定位会是非常痛苦的事情。一些开发者会使用 VS Code 的小地图,但其实还有更便捷的方法:可以使用 ??O 快捷键唤起符号导航面板,在当前编辑的文件中通过符号快速定位代码。在输入框中键入字元可以进行筛选,在列表中通过箭头来进行上下导航。这种方式对于 Markdown 文件也非常友好,可以通过标题来快速导航。

参考:Go to Symbol

Code Navigation in Visual Studio Code?

code.visualstudio.com图标

六、拆分编辑器

当对内容特别多的文件进行编辑的时候,经常需要在上下文中进行切换,这时候可以通过拆分编辑器来使用两个编辑器更新同一个文件:按下快捷键 ? 将活动编辑器拆分为两个。

可以继续无尽地拆分编辑器,通过拖拽编辑器组的方式排列编辑器视图。

参考:

Side by side editing

Visual Studio Code User Interface?

code.visualstudio.com图标

七、重命名终端

VS Code 提供了集成终端,可以很方便地快速执行命令行任务。用得多了经常会打开多个终端,这时候给终端命名可以提高终端定位的效率。

参考:

Rename terminal sessions

Integrated Terminal in Visual Studio Code?

code.visualstudio.com图标

八、Git 操作

VS Code 内置了 Git 源代码管理功能,提供了一些便捷的 Git 操作方式。例如:

解决冲突:VS Code 会识别合并冲突,冲突的差异会被突出显示,并且提供了内联的操作来解决冲突。

暂存或撤销选择的代码行:在编辑器内可以针对选择的行来撤销修改、暂存修改、撤销暂存。

参考:Using Version Control in VS Code

Version Control in Visual Studio Code?

code.visualstudio.com图标

九、搜索结果快照

VS Code 提供了跨文件搜索功能,搜索结果快照可以提供更多的搜索结果的信息,例如代码所在行码、搜索关键字的上下文,并且可以对搜索结果进行编辑和保存。

参考:Search Editors

https://code.visualstudio.com/updates/v143#search-editors?

code.visualstudio.com

十、可视化搭建页面

在 VS Code 中可以通过可视化搭建的方式生成 Web 页面,这是通过安装 VS Code 的 Iceworks(https://marketplace.visualstudio.com/items?itemName=iceworks-team.iceworks) 插件实现的。安装插件后,通过 ??P 唤起命名面板,在命令面板中输入『可视化搭建』即可唤起可视化搭建界面,在界面内通过选择网页元素、进行拖拽布局、设置元素样式和属性来搭建页面,最后点击『生成代码』就可以生成 React 代码。

参考:

Iceworks 可视化搭建

https://ice.work/docs/iceworks/guide/visual-construction?

ice.work

最后这个是作者的广告植入啦,作者给了一些 Tips(提升) 给大家,大家也要付一下作者的 Tips(小费) 哦~ ;D

————————————————————————————————————————

阿里巴巴集团淘系技术部官方账号。

点击下方主页关注我们,你将收获更多来自阿里一线工程师的技术实战技巧成长经历心得。另,不定期更新最新岗位招聘信息和简历内推通道,欢迎各位以最短路径加入我们。

阿里巴巴淘系技术?

www.zhihu.com图标编辑于 2020-12-14继续浏览内容知乎发现更大的世界打开Chrome继续知乎用户知乎用户

安装 Zhihu On VSCode 插件,上班假装打代码,实则摸鱼刷知乎。

Zhihu On VSCode,是由开发者 牛岱 开发的一个 VS Code 插件,它可以实现在 VS Code 中浏览知乎热门话题、回答问题或发布文章等。

安装了插件后,在 VS Code 的左侧栏,会新增一个知乎的图标。

增加知乎的图标

点击知乎图标,可以打开如下图的面板,面板划分为三个区域:推荐、热榜和收藏

三个板块

登录知乎

浏览知乎个性推荐的内容,需要先登录知乎帐号。

将滑鼠移动到推荐栏上方,右侧会出现隐藏的菜单,第一个图标即代表登录。

登录按钮

这里提供了两种登录方式,一种是扫描二维码,一种则是使用密码,使用密码登录需要较多步骤,建议扫描二维码登录。

成功登录后,VS Code 右下角会出现「你好,XXX」的提示。

登录成功

浏览内容

登录之后,推荐下方就会根据你平时浏览的内容,给你推荐相关的信息。

点击推荐下方的任意内容,在 VS Code 的右边会打开一个新的窗口,可以浏览每个问题下方的回答。

推荐下方默认只展示 6 条内容,如果你对当前的内容都不感兴趣,可以点击推荐推荐栏右上角的刷新按钮,获取新的内容。

刷新按钮

使用知乎进行搜索

除了浏览个性推荐的信息流内容,我们使用知乎,还可能出于明确的目的,想寻找我们关心的信息,这就需要用到搜索

点击推荐栏右上角的第三个图标,即可进行搜索。

知乎搜索

在弹出的输入框,先点击输入框下方的「综合」,再输入你想寻找的信息。

选择综合

发布文章

前面的内容,是从内容消费者的角度,来介绍插件浏览和寻找信息的功能。

如果你平时会写写东西,发布到知乎等内容平台,那么这个插件也适合你,因为它支持把 VS Code 中的文章直接发布到知乎

要想实现前面所说的,只需要满足一个条件:在 VS Code 中使用 Markdown 编辑方式来书写文档

在 VS Code 中创建 Markdown 格式文档的方法为,使用快捷键 Ctrl + N 新建一个文档,文档的格式默认是 txt 格式,即纯文本格式

此时,你可以使用快捷键 Ctrl + S,对文档进行保存操作,将保存类型设置为 Markdown,得到的文档就是 Markdown 文档了。

保存为MD格式

当你使用 Markdown 格式编辑文档时,单击滑鼠右键,在弹出的菜单中,选择「Zhihu: Preview」,可以预览 Markdown 渲染的效果。

预览MD渲染后的效果

完成文章的编辑时,右击菜单,选择「Zhihu: Publish」,将文章发布到知乎。

发布文章到知乎

点击发布文章的选项,在顶部弹出的输入框中,输入文章的标题,点击输入框下方的「发布新文章」:

输入文章标题

接著敲击回车键,等待返回文章发布成功的提示,你可以选择打开链接,前往知乎确认是否发布成功。

回答问题

Zhihu On VSCode 插件不仅可以发布文章,也可以用来回答知乎上的问题。

不过,相比发布文章,使用这个插件回答问题,稍微有一点麻烦。

与发布文章类似,你需要在 VS Code 中先创建一个空白的 Markdown 文档。

在空白文档的开头处,需要使用 #! + 空格 + 问题链接的格式,引用问题的链接,方能将你的回答与待回答的问题匹配到一起。

接著在下方使用 Markdown 语法,输入针对某个问题的回答,具体如下图所示:

使用插件回答问题

回答完成编辑后,与发布文章时进行类似的操作,右击菜单,选择「Zhihu: Publish」,即可发布回答。

添加图片

在知乎发布文章或回答问题时,除了文字内容,我们大概率还会用到图片

而这个插件也为我们考虑到了这一点,在你需要添加图片的位置,右击菜单,选择「Zhihu: Upload Image From Explorer」,在打开的窗口中,选择想添加的图片。

上传图片

这样一来,添加的图片会自动上传到知乎的伺服器,免去最后再添加图片的麻烦。

插件安装

VS Code 的插件有两种安装方法,一种是使用软体内部的插件管理进行安装,一种则是通过外部的插件市场安装。

插件管理

点击软体左侧边栏第 5 个图标,进入插件管理面板,在搜索栏输入 Zhihu On VSCode 进行搜索。

搜索返回的结果中,点击拟安装的插件,在打开的详情页中,单击 install 按钮进行安装。

插件市场

https://marketplace.visualstudio.com/items?itemName=niudai.vscode-zhihu

在浏览器中打开上方的链接,就可以看到 Zhihu On VSCode 插件在网站 Marketplace 上的介绍页。

点击绿色的 Install 按钮,会提示在软体 VS Code 中打开当前页面,跳转到 VS Code 内部,点击安装即可。

02. 打造成一个超好用的 Markdown 编辑器

以上,就是本次想和你分享的内容。

希望对你帮助。

安装 Zhihu On VSCode 插件,上班假装打代码,实则摸鱼刷知乎。

Zhihu On VSCode,是由开发者 牛岱 开发的一个 VS Code 插件,它可以实现在 VS Code 中浏览知乎热门话题、回答问题或发布文章等。

安装了插件后,在 VS Code 的左侧栏,会新增一个知乎的图标。

增加知乎的图标

点击知乎图标,可以打开如下图的面板,面板划分为三个区域:推荐、热榜和收藏

三个板块

登录知乎

浏览知乎个性推荐的内容,需要先登录知乎帐号。

将滑鼠移动到推荐栏上方,右侧会出现隐藏的菜单,第一个图标即代表登录。

登录按钮

这里提供了两种登录方式,一种是扫描二维码,一种则是使用密码,使用密码登录需要较多步骤,建议扫描二维码登录。

成功登录后,VS Code 右下角会出现「你好,XXX」的提示。

登录成功

浏览内容

登录之后,推荐下方就会根据你平时浏览的内容,给你推荐相关的信息。

点击推荐下方的任意内容,在 VS Code 的右边会打开一个新的窗口,可以浏览每个问题下方的回答。

推荐下方默认只展示 6 条内容,如果你对当前的内容都不感兴趣,可以点击推荐推荐栏右上角的刷新按钮,获取新的内容。

刷新按钮

使用知乎进行搜索

除了浏览个性推荐的信息流内容,我们使用知乎,还可能出于明确的目的,想寻找我们关心的信息,这就需要用到搜索

点击推荐栏右上角的第三个图标,即可进行搜索。

知乎搜索

在弹出的输入框,先点击输入框下方的「综合」,再输入你想寻找的信息。

选择综合

发布文章

前面的内容,是从内容消费者的角度,来介绍插件浏览和寻找信息的功能。

如果你平时会写写东西,发布到知乎等内容平台,那么这个插件也适合你,因为它支持把 VS Code 中的文章直接发布到知乎

要想实现前面所说的,只需要满足一个条件:在 VS Code 中使用 Markdown 编辑方式来书写文档

在 VS Code 中创建 Markdown 格式文档的方法为,使用快捷键 Ctrl + N 新建一个文档,文档的格式默认是 txt 格式,即纯文本格式

此时,你可以使用快捷键 Ctrl + S,对文档进行保存操作,将保存类型设置为 Markdown,得到的文档就是 Markdown 文档了。

保存为MD格式

当你使用 Markdown 格式编辑文档时,单击滑鼠右键,在弹出的菜单中,选择「Zhihu: Preview」,可以预览 Markdown 渲染的效果。

预览MD渲染后的效果

完成文章的编辑时,右击菜单,选择「Zhihu: Publish」,将文章发布到知乎。

发布文章到知乎

点击发布文章的选项,在顶部弹出的输入框中,输入文章的标题,点击输入框下方的「发布新文章」:

输入文章标题

接著敲击回车键,等待返回文章发布成功的提示,你可以选择打开链接,前往知乎确认是否发布成功。

回答问题

Zhihu On VSCode 插件不仅可以发布文章,也可以用来回答知乎上的问题。

不过,相比发布文章,使用这个插件回答问题,稍微有一点麻烦。

与发布文章类似,你需要在 VS Code 中先创建一个空白的 Markdown 文档。

在空白文档的开头处,需要使用 #! + 空格 + 问题链接的格式,引用问题的链接,方能将你的回答与待回答的问题匹配到一起。

接著在下方使用 Markdown 语法,输入针对某个问题的回答,具体如下图所示:

使用插件回答问题

回答完成编辑后,与发布文章时进行类似的操作,右击菜单,选择「Zhihu: Publish」,即可发布回答。

添加图片

在知乎发布文章或回答问题时,除了文字内容,我们大概率还会用到图片

而这个插件也为我们考虑到了这一点,在你需要添加图片的位置,右击菜单,选择「Zhihu: Upload Image From Explorer」,在打开的窗口中,选择想添加的图片。

上传图片

这样一来,添加的图片会自动上传到知乎的伺服器,免去最后再添加图片的麻烦。

插件安装

VS Code 的插件有两种安装方法,一种是使用软体内部的插件管理进行安装,一种则是通过外部的插件市场安装。

插件管理

点击软体左侧边栏第 5 个图标,进入插件管理面板,在搜索栏输入 Zhihu On VSCode 进行搜索。

搜索返回的结果中,点击拟安装的插件,在打开的详情页中,单击 install 按钮进行安装。

插件市场

https://marketplace.visualstudio.com/items?itemName=niudai.vscode-zhihu

在浏览器中打开上方的链接,就可以看到 Zhihu On VSCode 插件在网站 Marketplace 上的介绍页。

点击绿色的 Install 按钮,会提示在软体 VS Code 中打开当前页面,跳转到 VS Code 内部,点击安装即可。

02. 打造成一个超好用的 Markdown 编辑器

以上,就是本次想和你分享的内容。

希望对你帮助。

本文 GitHub https://github.com/imcoderlemon/CodeClass 已收录,项目包含技术干货,几百本计算机电子书,3本LeetCode刷题笔记,各类学习资源和大厂面试经验,持续更新,欢迎 Star

其他的答主和高赞回答都说的很全面了,推荐了很多基本功能和实用技巧。我就说两个其他人没提到,但非常实用的技巧给大家,强烈推荐体验一下。

作为一名VSCode重度爱好者,使用VSCode两年多了,尝试过各种编辑器,独爱这一款。

奇淫巧技谈不上,把VSCode常规功能都掌握了,完全就够用了!

推荐两个就是很多人不知道的常规功能

远程开发

传统的远程开发:在本地编辑文件,利用FTP工具上传到远程编译机调试编译,这一套繁琐的操作,因此非常的方便。

VsCode 远程开发:和其他 IDE 传统的远程开发不同,VSCode 在本地主机(一般是Windows或MAC)上的操作的对象直接就是远程机(Linux),所有在本地主机上的操作直接作用于远程机器,并且还能像在本地一样查找远端机的引用和定义,不受本地机器配置和环境影响

工作原理是这样:

要能连上远程主机,首先我们需要下载VS Code远程开发插件,VS Code其实是提供了一个远程开发插件包,包括:

  • Remote - SSH - 通过使用 SSH 链接虚拟或者实体Linux主机。
  • Remote - Containers – 连接 Docker 开发容器。
  • Remote - WSL - 连接 Windows Subsystem for Linux (Linux子系统)。

打开软体的扩展界面,搜索 Remote 开头的插件,也能看到这三个的不同远程开发插件,我们这里连接的是云主机,选择安装 Remote - SSH 插件安装即可。

手把手教你配置VS Code远程开发工具,工作效率提升N倍?

mp.weixin.qq.com

具体的使用方式和详细操作就不这里展开了,可以看上面我写过的文章介绍,有非常详细的说明,强烈推荐体验一下。

流程图绘制

这是要推荐的第二个功能,需要安装一款支持用VSCode绘图的插件 PlantUML,去插件市场下载下面这个插件:

说是流程图,其实不止能绘制流程图,按官方网站上的说明可以画下面这些图:

时序图 用例图 类图 活动图 活动图 组件图 状态图 对象图 部署图 定时图 Network Wireframe Archimate Gantt MindMap

简直是开挂了的UML绘图神器,有了它一个VSCode画各种图,我不是针对谁

更厉害的是,画图不用画笔,用类似Markdown语法的标记语言就能画出好看的各种图,手残党福音。语法说明在这里:顺序图的语法和功能

举个时序图的例子:

上面这幅时序图是用下面的代码画出来的!是不是很极客风~

@startuml
用户 -&> 认证中心: 登录操作
认证中心 -&> 缓存: 存放(key=token+ip,value=token)token

用户 & 认证中心: 下次访问头部携带token认证
认证中心 & 用户: 信息
@enduml

漂亮的状态图,写出来的!

好看的组件图,还是出来的!

太多类型的图了,不再举例。

今天的分享就到这了,还不赶紧去体验一下!

------一条分割线------

如果觉得我的回答还行,对你有帮助,或是解决了你的问题

不求什么回报,

只希望你能点个赞、感谢与收藏~

一是当做对我的鼓励,

二是防止下次想看却找不到

如果你是计算机技术编程爱好者来看看我的其他回答吧,或许你会喜欢~

后端都要学习什么??

www.zhihu.com图标什么是微服务架构??

www.zhihu.com图标Visual Studio Code 如何编写运行 C、C++ 程序??

www.zhihu.com图标有哪些你看了以后大呼过瘾的编程书??

www.zhihu.com图标计算机专业,你的学校从大一到大四用了哪些教材??

www.zhihu.com图标

0. 如果只能安装一个插件,那就是Tabnine,一个让你怀疑人生的代码补全插件

据评论区的大家反应,这个插件卡(或者占内存)。

我自己用著不卡。

请大家根据实际情况选择。

1. 如果只能推荐一个快捷键,那就是Ctrl+D,同时选择多处文字,同时编辑

Ctrl+Shift+L 也是同样的原理

2. 直播的时候打开 Screencast Mode 有奇效

上面的那张动图的效果就是这么做出来的。

3. 选择多一点点点 Alt+Shift+→

4. PHP代码的格式化非常恼人,但是phpfmt解决了

解决方式很粗暴丑陋,但是解!决!了!

5. PowerShell的快捷键也可以在集成终端里用

跳词

Ctrl+←

Ctrl+→

删左右

Ctrl+Home

Ctrl+End

要使用这两个快捷键,要在设置文件中增加

"terminal.integrated.commandsToSkipShell": [
"-workbench.action.terminal.scrollToBottom",
"-workbench.action.terminal.scrollToTop"
]

6. F1 可以打开命令面板,你可以充分发挥你的好奇心,看看到底有什么命令


推荐阅读:
相关文章