VS Code 是一个功能强大的编辑器,当初把VS Code拿来当做文本编辑器用,随着VS Code的强大,用的也越来越顺手,但是并没有对VS Code 有更深入的了解。这篇官方文档大致介绍了VS Code的主要功能,浏览一下可以让我们对VS Code 的功能有个整体的把握,知道VS Code有什么,我们可以做什么,相信无论是否熟练使用VS Code看完这篇文章之后都会有些收获。文章看起来很长,实际上其中有大量图片,浏览一遍大概在10分钟左右。
原文地址:Visual Studio Code Tips and Tricks
“提示和技巧”可以让你学习到如何更高效的使用VS Code。你将会熟悉它强大的编辑功能、代码智能提示和源码管理功能,同时学习有用的快捷键。这篇文章提供了一个大致的预览,所以请务必在 《开始》和《用户指南》中更查看详细的话题,以便了解更多。
如果没有安装VS Code,可以到下载页面下载。你可以找到各个平台的安装包。
更喜欢视频?你可以观看最近发布的 Visual Studio Code tips and tricks,它包含20个使用VSCode 高效工作的小技巧。
开始
最好的上手探索VS Code的方法是打开开始页面(Get Started)。你大致看到VS Code 的自定义设置和功能概述。 帮助 > Get Started
译者注:
Get Started:这个在简体中文插件中没有翻译,所以直接写了,叫“入门”或者“开始”什么都可以,理解意思)
如果你想要提高到你的代码编辑能力,可以打开交互式演练场( Interactive Editor playground)。尝试VS Code 的代码编辑功能,例如多光标编辑、智能提示、代码片段、Emmet 等等。帮助> Editor Playground.
命令面板
默认快捷键
快捷键参考表
快速打开
在最近打开的文件之间跳转
重复按快速打开(Ctrl+P)的快捷键,将会快速在最近打开的文件之间循环跳转。
快速打开多个文件
你可以使用右箭头键通过从“快速打开”打开多个文件。按右箭头键将会在后面打开当前选择的文件,同时你可以继续从“快速打开”的列表选择文件。
译者注:
显示快速打开列表时,如果按 Enter,则会打开对应的文件,同时收起文件列表,而使用Arrow Right 则不会收起文件列表,可以继续打开其它文件。
在最近打开的文件夹和工作空间跳转
最近打开
快捷键:Ctrl+R
显示一个快速下拉列表,列出了文件 > 最近打开的文件夹 中的内容,包含最近打开的文件夹和工作区以及文件。
VS Code 有强大的命令行界面。你可以自定义如何启动编辑器以支持多种多样的场景。
确保VS Code 的二进制文件在你的path上这样就可以简单的输入 就可以打开VS Code 了,如果VS Code 在安装过程中以及添加到了环境变量中,请参阅各个平台特定的安装指导。(Running VS Code on Linux, macOS, Windows)。
.vscode 文件夹
工作区相关文件在根目录的.vscode 文件夹中。例如tasks.json 用于运行任务,launch.json 用于调试
错误和警告
修改语言模式
你可以给VS Code 自定义很多功能。
- 改变主题
- 改变快捷键
- 调整设置
- 添加JSON校验
- 创建代码片段
- 安装扩展
改变主题
键盘映射
你是否习惯使用其它编辑器的的快捷键?你可以安装键盘映射扩展。
打开 File>Preferences > Migrate Keyboard Shortcuts from … 就能看到可以使用的快捷键映射
- Vim
- Sublime Text Keymap
- Emacs Keymap
- Atom Keymap
- Brackets Keymap
- Eclipse Keymap
- Visual Studio Keymap
- Customize your keyboad
自定义快捷键
查看更多VS Code的快捷键
调整设置
默认情况下,VS Code 会显示设置编辑器。你可以通过搜索栏搜索设置。但是你仍然可以通过**Open Settings (JSON)**命令打开文件,直接修改设置。你可以通过设置改变你的默认的设置编辑器。
打开用户设置
快捷键:Ctrl+,
改变UI元素的字体大小。
改变缩放级别
修改字体
Tip: 你需要安装一个字体来支持连字. FiraCode 在VS Code 团队很受欢迎。
译者注:的确不错,挺好玩的。(^o^)/~。
自动保存
你也可以在顶层菜单切换自动保存 文件> 自动保存
保存时格式化
粘贴时格式化
改变tab的大小
使用space还是tab
重新渲染空格
默认情况下,空格将会在选则的时候可见。
译者注:就是选择文本的时候,空格位置会显示个圆点什么的。
忽略文件/文件夹
从编辑器窗口移除这些文件和文件夹
在搜索结果中排除文件、文件夹
等等,其它自定义
语言专用设置
你可以通过语言标示符来给某一个语言指定设置,可以在语言标示符列表中找到常用的语言ID。
Tip: 你也可以通过 命令创建特定语言的设置 .
添加JOSN校验
默认情况下对许多文件类型启用。可以在settings.json中创建自己的模式和验证。
或者在工作空间中定义模式。
或者自定义模式
在JSON文档查看更多。
快捷键:Ctrl+Shift+X
找扩展
- 在VS Code 的扩展市场搜索
- VS Code 内置的扩展页面搜索
- 浏览扩展推荐
- 社区扩展列表,例如awesome-vscode.
安装扩展
扩展推荐
建立自己的扩展
你对自己创建扩展感兴趣吗?你可以在 扩展API文档中学习,尤其注意查看这些重点文档。
- 配置(configuration)
- 命令(commands)
- 快捷键(keybindings)
- 语言(languages)
- 调试(debuggers)
- 语法(grammars)
- 主题(themes)
- 代码片段(snippets)
- JSON 验证(jsonValidation)
集成终端
- 集成终端文档
- 掌握VS Code 的终端相关文章
切换侧边栏
切换面板
快捷键:Ctrl+J
Zen 模式
分割编辑器
快捷键:Ctrl+
编辑器之间切换
切换到文件浏览页面
快捷键:Ctrl+Shift+E
创建或者打开页面
快捷键:Ctrl+click(Cmd+click macOS)
关闭当前打开的文件夹
快捷键:Ctrl+F4
文件历史记录导航
浏览整个历史:Ctrl+Tab
向后导航:Alt+Left
向前导航:Alr+Right
文件关联
给未正确检测到语言的文件创建语言关联,例如,许多自定义扩展名的配置文件实际上是JSON.
阻止脏写入
Note:文件将会保持脏的状态无法保存直到你选择一个或者两个操作解决冲突。
下面是一些编辑代码的常见功能,如果快捷键使用不顺手,可以安装你原来使用的编辑器的快捷键扩展
Tips:你可以在扩展页面使用 搜索快捷键相关的扩展。
多光标选择
你可以使用Alt+ Click 在任意位置添加光标。
列选择模式
垂直标尺
你可以使用配置在编辑器中添加垂直标尺。它可以在你想要添加垂直标尺的地方添加一系列标尺。
快速滚动
按下Alt在编辑器中和文件浏览器中启用快速滚动。快速滚动默认使用5X 速度滚动,你可以通过设置调整。
向上/下复制行
快捷键: Shift+Alt+Up or Shift+Alt+Down
Linux 下这两个快捷键没有绑定,因为它们和Ubuntu的快捷键冲突。你可以自行给和 这两个命令设置快捷键。
缩小/扩大选择
跳转到文件中的符号
在工作空间中跳转
大纲视图
跳转到指定行
快捷键:Ctrl+G
撤销光标位置
快捷键:Ctrl+U
译者注:相当于光标位置的历史记录的Ctrl+Z.
移除末尾空格
转换文本命令
代码格式化
代码折叠
你也可以折叠(Ctrl+K Ctrl+0)和 展开(Ctrl+K Ctrl+J)全部区域。可以使用Ctrl+K Ctrl+/折叠块注释。
选择当前行
快捷键: Ctrl+L
跳转到文件开始和结尾
快捷键: Ctrl+Home 和 Ctrl+End
打开Markdown 预览
一边编辑一边预览Markdown
Peek
跳转到定义
跳转到引用
选择一个符号,然后输入 Shift+F12 也可以使用上下文菜单。
查找所有引用
选择一个符号,然后键入Shift+Alt+F12以打开“引用”视图,在专用视图中显示文件的所有符号。
重命名符号
搜索和修改
.eslintrc.json
安装Eslint扩展。配置你想要的规则,详情参阅Eslint 规范。
下面是配置使用ES6
package.json
Emmet 语法
Emmet语法支持
创建自定义代码片段
文件(File) > 首选项(Preferences) > 用户片段(User Snippets) (Code > Preferences > User Snippets on macOS),选择一个语言并创建代码片段。
在创建你的代码中查看更多。
快捷键: Ctrl+Shift+G
VS Code 提供“开箱即用”的Git 集成,也可以在插件市场中安装其他插件。本节介绍的Git集成大部分UI和操作和其他其它插件共享。
Diff
在源码控制页面选择一个文件打开diff。
文件太大无法上传,点击这里查看
也可以点击右上角的 Open Changes 按钮,diff当前打开的文件。
页面
默认的diff页面是水平布局。
点击右上角的More Actions (…)可以选择切换为垂直布局。
查看窗口
编辑挂起的更改
您可以直接在diff视图中对挂起更改直接进行编辑。
Branches
可以在状态栏中轻松切换Git分支。
文件太大无法上传,点击这里查看
Staging
暂存文件更改
将鼠标悬停在文件名上,然后单击加号按钮。
单击减号按钮取消暂存更改。
文件太大无法上传,点击这里查看
部分暂存
选择文件(使用箭头),然后从命令选项板中选择“暂存选定范围”,暂存文件的一部分。
撤销上次的 commit
单击(…)按钮,然后选择“撤消上次提交”以撤消上次提交。这些更改将添加到“分段更改”部分
文件太大无法上传,点击这里查看
查看Git输出
VS Code使查看Git命令实际运行的内容变得容易。这在学习Git或调试困难的源码管理问题时非常有用。
使用Toggle Output 命令(Ctrl+Shift+U)选择下拉框中的Git。
Gutter indicators
在编辑器中查看差异,更多信息请查看文档
文件太大无法上传,点击这里查看
译者注:它的作用应该是在VS Code 对于变更过的部分标出不同的颜色。
解决合并冲突
在合并过程中,转到源码管理页面(Ctrl+Shift+G)并在差异视图中进行更改。
你可以在行内通过指令解决代码冲突 Accept Current Change, Accept Incoming Change,Accept Both Changes, and Compare Changes
设置VS Code 作为git的默认合并工具
设置VS Code 为Git的默认对比工具
配置调试
打开命令面板(Ctrl+Shift+P)选择Debug: Open launch.json,选择一个匹配你的项目的环境配置 (Node.js, Python, C++, 等等),这会自动生成,默认支持Node.js,其他语言需要安装对应的插件,查看调试文档获取更多信息。
断点和步进
查看数据
日志记录点
日志记录点的作用很像断点,但是当命中它的时候不会打断调试器,只会在控制台中记录相关信息,日志记录点对于无法修改或暂停的生产服务器特别有用。
在编辑器左侧栏中的“添加日志点”命令添加日志点,它将显示为“菱形”图标。日志消息是纯文本,但可以在大括号(“{}”)中包含要计算的表达式。
从顶级菜单中选择 终端,运行命令 配置任务(Configure Tasks),然后选择要运行的任务类型。将会自动生成一个文件,其内容如下所示。有关更多详细信息,请参阅任务文档。
自动生成的可能会有一些问题,可以查看相关文档修正。
在终端菜单中运行任务
给任务定义快捷键
你可以给任何任务自定义快捷键,在 命令面板 (Ctrl+Shift+P), 选择 Preferences: Open Keyboard Shortcuts File , 将所需快捷键绑定到命令,并将任务定义为参数(args)。
在资源管理器中将npm脚本作为任务执行
从资源管理器中,您可以在编辑器中打开脚本,将其作为任务运行,并使用nodejs的调试器启动它(当脚本定义调试选项时,如–inspect brk)。单击时的默认操作是打开脚本。要在单击时运行脚本,请将设置为“run”。使用设置排除特定文件夹中包含的package.json文件中的脚本。
通过设置,可以从文件夹的文件资源管理器上下文菜单中启用运行npm脚本。此设置启用文件夹中的命令Run NPM script。。。 选择文件夹时。该命令显示此文件夹中包含的npm脚本的快速选择列表,您可以选择要作为任务执行的脚本。
VSCode有便携模式,允许您将设置和数据保存在与安装相同的位置,例如USB驱动器上
VS Code团队使用Insiders版本测试VS Code的最新功能和错误修复。您也可以在此处下载Insiders版本。
- 对于早期用户-insiders版本有最新的代码更改供用户和扩展作者试用。
- 频繁构建-每天都有最新的bug修复和功能的新构建。
- 并排安装-可以同时安装Insiders版本和稳定版,各自独立使用。
以上就是本篇文章【VS Code 的使用技巧(Visual Studio Code Tips and Tricks)】的全部内容了,欢迎阅览 ! 文章地址:http://fabua.ksxb.net/quote/5437.html 动态 相关文章 文章 同类文章 热门文章 栏目首页 网站地图 返回首页 海之东岸资讯移动站 http://fabua.ksxb.net/mobile/ , 查看更多