实质上, Visual Studio Code 是一款代码编辑器, 像许多其他代码编辑器一样, VS Code 的左边采用了一个共同的用户界面和资源管理器的布局, 它显示了所有你可以访问的文件和文件夹, 它的右边是一个编辑器, 显示你打开过的文件内容.
image
文件, 文件夹和项目
VS Code 是基于文件和文件夹的, 你可以用 VS Code 打开一个文件和文件夹. 在此之上, VS Code 有读取和利用由不同框架和平台定义的项目文件的优势. 比如, 你打开的文件包含一个或多个 package.js,project.json,tsconfig.json 和项目文件, VS Code 能读取这些文件并使用它们来提供额外的功能. 在编辑中, 它们像丰富的自能感知.
基本布局
VS Code 有一个简单直观的布局, 它提供最大化的编辑空间, 同时留下足够空间来浏览和访问你的文件夹或项目全部上下文. 它的用户界面分为五个方面:
编辑器: 来编辑你的文件. 你可以同时打开三个的编辑.
侧边框: 包含不同的视图. 在你的项目工作的时候, 视图像资源管理器来帮助你.
状态栏: 显示打开的项目和编辑的文件的相关信息.
视图栏: 位于最左边的视图栏, 可以让你在视图之间切换并给你更多的特定于上下文指示
面板: 在编辑区下面有不同的面板, 面板有输入或调试信息, 错误和警告或一个集成终端.
当你每次打开 VS Code, 它跟你上次关闭它时的状态一样. 文件夹, 布局, 打开的文件都被保存.
image
VS Code 允许同时打开三个可视编辑器, 这样你可以编辑或查看并排一起的三个文件. 在编辑区顶部区域, 每个被打开的文件都有选项卡头部(Tabs)
提示: 侧边框移动到右侧(View> Move Side Bar), 切换显示 / 隐藏 B .
分栏编辑
你最多可以并排的打开三个编辑器.
如果你已经打开一个编辑, 你有很多方法打开其他编辑器, 而且新编辑器会出现在当前编辑器一边. 方法如下:
按住 Ctrl (Mac:'Cmd'), 同时点击一个文件
+\ 组合可以把一个编辑器分裂为两个.
右击文件然后点击 Open the side
点击编辑器右上角的 Split Editor 按钮
把文件拖拽到编辑器的两侧
image
每次你打开一个文件的时候, 编辑器将显示当前文件的内容. 如果你有 2 个编辑器并排着, 并且你想打开一个文件出现在编辑器的右边, 在打开这个文件前, 务必确保那个编辑器被选中(通过点击编辑器里面).
当你有一个或多个编辑器被打开过, 而且想快速在他们之间切换 Ctrl (Mac:'Cmd')+1,2 或 3
提示: 你可以缩放编辑器, 也可以对他们重新进行排序. 拖拽编辑器的标题区域到其他位置. 拖拽编辑器的边缘缩放编辑器.
资源管理器
在你的项目里, 资源管理器是被用来浏览, 打开, 管理所有文件和文件夹的.
用 VS Code 打开你的文件夹后, 该文件夹的内容在资源管理器里是展开的, 在这儿你可以做很多操作:
创建, 删除, 重命名文件和文件夹
用拖拽移动文件和文件夹
通过右击菜单浏览所有选项
提示: 你可以拖拽 VS code 外部文件到资源管理器里来复制它们
image
VS Code 与其他工具非常和谐, 特别是命令行工具, 如果你想用在 VS Code 被打开的文件夹上下文运行一个命令行工具, 右键点击文件夹并选择 Open in Command (mac 和 Linux:Open in Termainal).
image
你也可以右击一个文件或文件夹并选择. Reveal in Explorer.(mac:Reaveal in Finder ,Linux:
- Open Containing Folder
- ).
提示: 用P 通过文件的名称可以快速的搜索和打开一个文件.
在默认的情况下, VS Code 排除来自资源管理器的一些文件(比如:.git). 用 files.exclude 来设置规则隐藏来自资源器的文件和文件夹.
提示: 隐藏像 Unity 的 \*.meta ,Typescript 项目里的 \*.js 的驱动原文件是非常有用的. 在 Typescript 文件里, 你可以修改
"**/*.js": {"when": "$(basename).ts"}
来排除生成的 JavaScript.
打开编辑器
在资源管理器的顶部有标有 OPEN EDITORS 的部分, 这是当前文件或预览列表. 这些文件是你在工作中用 VS Code 打开过的. 比如, 按照下面操作, 一个文件会被列到 OPEN EDITORS 中.
对文件进行更改
在资源管理器双击一个文件
打开一个不属于当前文件夹的文件
配置编辑器
VS Code 给你许多选项来配置编辑器. 你可以通过 User Setting 配置全局, 或者通过 Workspace Setting 配置每个项目或者文件夹. 在 setting.json 中值是被生效的.
选择 File> Preferences> User Settings (或者P 跳出输入框, 输入 user, 并且回车), 打开 User Setting.json
选择 File> Preferences> Workspace Settings(或者P 跳出输入框, 输入 worksp, 并且回车),
Workspace Setting.json
Mac 用户注意: Preferences 菜单在 Code 里, 不是 File 中, 比如: Code> Preferences> User Settings
在窗口的左边你将看到 VS Code 的 Default Setting , 并且在窗口右边你可以编辑 Settings.json . 从 Default Setting 中你可以很容易的查看和复制配置.
编辑你的设置之后, 用 S 保存你的配置, 它们会立即生效.
保存 / 自动保存
默认情况下, VS Code 需要用 S 保存重新设置的数据到磁盘里.
然而, VS Code 能很容易开启自动保存, 在你配置延迟后或者焦点离开编辑器后自动保存你的更改文件. 自动保存一旦被开启, 就不需要手动去保存文件.
打开 User Setting 或者 Workspace 配置自动保存, 找到如下相关设置:
files.autoSave : 设置值为 off 表示关闭自动保存, afterDelay 保存文件后延迟自动保存, onFocusChange 焦点移出编辑器后就会自动保存.
files.autoSaveDelay
: files.autoSave 的值是 afterDelay 时, 就可以设置自动保存的延迟时间.
搜索文件
VS Code 允许你在当前被打开的文件夹里快速搜索所有文件. 使用 F 并且输入你想搜索的内容. 搜索结果被分组到包含的关键词的文件中, 搜索结果中每个文件有包含关键词的数量以及文件位置. 展开一个文件可以看到这个文件包含关键词列表. 点击关键词就能在当前编辑器里查看它.
image
提示: 在搜索框里只支持正则表达式
你可以通过 J 配置高级搜索选项. 这将显示附加字段配置搜索
image
在搜索框下面有两个输入框, 你可以包含和排除文件. 点击输入框的右边切换 glob 模式:
* 匹配路径段里面 0 或多个除 / 以外的字符
? 匹配路径段里面一个除 / 以外的字符
** 匹配路径段的多个字符, 包括 /
{} 用组的形式(列如:
{**/*.html,**/*.txt}
匹配所有的 HTML 和文本文件)
[] 匹配指定的字符范围
VS Code 可以在默认情况下排除一些你不感兴趣的文件夹 (例如: node_modules ) 来减少搜索结果的数量. 可以通过设置改变 files.exclude 和 search.exclude 标题下面的规则.
提示: 在资源管理器里右击一个文件夹并且选择 Find in Floder 就可以在这个文件夹内任意搜索
你也可以搜索并替换文件. 展开搜索框出现替换文本框(Mac:Cmd + shift ).
image
当你键入文本到替换框中时, 你可以看到即将更改的差异性显示. 你可以通过文件替换框替换所有文件, 也可以替换一个文件里所有或者替换一个单一变化,
image
命令面板 |
VS Code 同样可以用键盘操作. 最重要的键盘组合 P , 这将调出命令面板. 从这里, 你可以访问 VS Code 所有的功能, 包含快捷键最常见的操作.
image
命令面板提供了许多命令. 你可以执行编辑命令, 打开文件, 搜索符号, 查看一个文件的简要概要, 使用同一个交互的窗口.
P 只需简单的输入它的名字就让你导航到所有文件或者符号
Tab 显示你最后打开的一组文件路径
P 调出命令面板
O 在一个文件里, 跳到一个指定符号的位置
G 在一个文件里, 输入行数直接跳到指定行的位置
输入 ? 到输入框得到可用的命令列表, 你可以从这里执行:
image
文件切换
当你打开一个项目的时候, 资源管理器擅长文件之间的切换. 然而, 当你处理任务时, 你将发现你自己在一组文件之间快速切换. VS Code 提供两个功能强大命令通过易用的键组合来浏览不同文件.
按住 Ctrl 然后按 Tab 键来查看编辑组中打开的所有文件的列表. 如果要打开其中一个文件, 再次使用 Tab 键选择你想浏览的文件, 然后松开 ctrl 去打开它.
image
另外, 你能使用 - 和 - 在文件和编辑位置之间进行导航. 如果你在同一个文件不同行之间跳来跳去. 这些快捷键可以让你轻松地在这些位置之间进行导航.
提示: 当你使用 P 时, 你可以通过他们的名字打开任何文件
文件编码
在 User Setting 或 Workspace 中通过编辑 files.encoding 设置全局或每个工作区域的文件编码.
image
你可以在状态栏中查看到文件编码格式
image
点击在状态栏中的编码按钮, 用不同的编码格式来重新打开或者保存当前文件.
image
然后选择一个编码格式
image
命令行启动
你可以通过命令行来启动 VS Code 来快速打开一个文件, 文件夹, 或者项目. 通常情况, 在一个文件范围内打开 VS Code. 我们发现最好的方法是在终端键入:
code .
提示: 对于 Mac 用户, 我们需要通过设置使您能够从终端内启动 VS Code. 首选运行 VS code 并打开命令面板( P ), 然后输入 shell command 找到: Install 'code' command in PATH .
image
Windows 和 Lunix 用户安装过程自动把 VS Code 的执行代码加到 PATH 环境变量中.
有时你想打开或者创建一个文件. 如果指定文件不存在, VS Code 将会为你创建此文件.
code index.html style.CSS readme.md
提示: 你可以通过空格键来分隔许多文件名
额外的命令行参数
当通过 code 的命令行启动 VS Code 时你可以使用以下可选的命令行参数:
参数 | 描述 |
---|---|
-h 或 --help | code 使用说明 |
-v 或 --version | VS Code 版本(例如:0.10.10) |
-n 或 --new-window | 打开一个 VS Code 新的版本替代默认版本 |
-r 或 --reuse-window | 强制打开最后活动窗口的文件或文件夹 |
-g 或 --goto | 当和 file:line:column? 使用时 ,打开文件并定位到一个的特定行和可选的列位置的文件。 |
file | 以一个文件名打开。如果文件不存在,此文件将被创建并标记为已编辑 |
file:line:column? | 以文件的名称在指定行和可选的列的位置打开,你可以以这个方式指定多个文件。但是在使用 file:line:column? 之前必须使用 -g 参数。例如:code -g file:10 |
folder | 以一个文件夹名打开。你可以指定多个文件夹。例如:code folder folder |
-d 或 --diff | 打开一个不同的编辑器。需要两个文件路径作为参数。例如:code -d file file |
--locale | 为 VS Code 设置显示语言,支持语言环境有:en-US (英语) ,zh-TW (中文繁体),zh-CN (中文简体),fr ,de ,it ,ja ,ko ,ru ,es 。例如: code . --locale=en-US 设置显示语言为英语 |
--disable-extensions | 禁用所有安装的插件。下拉选 Show installed Extensions 后插件依然可见,但是永远不会被激活。 |
--list-extensions | code --list-extensions 列出被安装的插件 |
--install-extension | 安装一个插件。提供完整的扩展名 publisher.extension 作为参数。例如:code --install-extension ms-vscode.cpptools |
--uninstall-extension | 卸载一个插件。提供完整的扩展名 publisher.extension 作为参数. 例如 code --uninstall-extension ms-vscode.csharp |
-w 或 --wait | 等待窗口返回之前关闭 |
打开一个项目
VS Code 不区分你打开是文件夹还是项目. 如果 VS Code 在文件夹检测到你打开一个项目(例如: 一个 C# 项目), 这个项目的上下文将被显示在状态栏. 如果有多个项目被发现, 可以从这里切换项目.
在一个文件夹 C:\src\webApp 里打开一个项目, 像这里启动 VS Code:
code C:\src\WebApp
VS Code 打开之后, 只需打开源文件并且使用状态栏根据需要来切换活动项目
image
窗口管理
VS Code 有一些选项来控制窗口应该被新建还是恢复上一次窗口.
在 User setting 或 Workspace setting 中:
window.openFilesInNewWindow
: 设置文件是否在一个新窗口打开, 而不是在重用现有的 VS Code 实例. 默认是 true, VS Code 打开一个新的窗口. false 重用 VS code 最后一个活动实例并在此打开文件.
window.reopenFolders
设置通知 VS Code 怎么去恢复以前会话窗口. 默认是 one ,VS Code 将重新打开你处理过最后一个文件夹. 改变设置为 none 不重新打开任何文件夹并始终以一个空文件打开. 设置为 all 恢复上次会话处理过的所有文件夹
来源: https://juejin.im/entry/5aebe0735188251cc953bf38