Visual Studio Code入门(译)

96
天天luck
0.8 2016.07.26 16:41* 字数 3495

实质上,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.autoSaveDelayfiles.autoSave 的值是 afterDelay 时,就可以设置自动保存的延迟时间。

搜索文件

VS Code允许你在当前被打开的文件夹里快速搜索所有文件。使用 ⇧⌘F 并且输入你想搜索的内容。搜索结果被分组到包含的关键词的文件中,搜索结果中每个文件有包含关键词的数量以及文件位置。展开一个文件可以看到这个文件包含关键词列表。点击关键词就能在当前编辑器里查看它。

image

提示:在搜索框里只支持正则表达式

你可以通过 ⇧⌘J 配置高级搜索选项。这将显示附加字段配置搜索

image

在搜索框下面有两个输入框,你可以包含和排除文件。点击输入框的右边切换glob模式:

  • * 匹配路径段里面0或多个除 / 以外的字符
  • ? 匹配路径段里面一个除 / 以外的字符
  • ** 匹配路径段的多个字符,包括 /
  • {} 用组的形式(列如: {**/*.html,**/*.txt} 匹配所有的HTML和文本文件)
  • [] 匹配指定的字符范围

VS Code可以在默认情况下排除一些你不感兴趣的文件夹(例如:node_modules )来减少搜索结果的数量。可以通过设置改变 files.excludesearch.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 SettingWorkspace 中通过编辑 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 (中文简体),frdeitjakorues 。例如: 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 settingWorkspace setting 中:
window.openFilesInNewWindow : 设置文件是否在一个新窗口打开,而不是在重用现有的VS Code实例。默认是 true, VS Code打开一个新的窗口。false 重用VS code最后一个活动实例并在此打开文件。

window.reopenFolders 设置通知VS Code怎么去恢复以前会话窗口。默认是 one ,VS Code将重新打开你处理过最后一个文件夹。改变设置为 none 不重新打开任何文件夹并始终以一个空文件打开。设置为 all 恢复上次会话处理过的所有文件夹

前端技术