實(shí)質(zhì)上，Visual Studio Code是一款代碼編輯器，像許多其他代碼編輯器一樣，VS Code的左邊采用了一個(gè)共同的用戶界面和資源管理器的布局，它顯示了所有你可以訪問的文件和文件夾,它的右邊是一個(gè)編輯器，顯示你打開過的文件內(nèi)容。

image

文件，文件夾和項(xiàng)目

VS Code是基于文件和文件夾的，你可以用VS Code打開一個(gè)文件和文件夾。在此之上，VS Code有讀取和利用由不同框架和平臺(tái)定義的項(xiàng)目文件的優(yōu)勢(shì)。比如，你打開的文件包含一個(gè)或多個(gè)package.js,project.json,tsconfig.json和項(xiàng)目文件，VS Code能讀取這些文件并使用它們來提供額外的功能。在編輯中，它們像豐富的自能感知。

基本布局

VS Code有一個(gè)簡單直觀的布局，它提供最大化的編輯空間，同時(shí)留下足夠空間來瀏覽和訪問你的文件夾或項(xiàng)目全部上下文。它的用戶界面分為五個(gè)方面：

• 編輯器：來編輯你的文件。你可以同時(shí)打開三個(gè)的編輯。
• 側(cè)邊框：包含不同的視圖。在你的項(xiàng)目工作的時(shí)候，視圖像資源管理器來幫助你。
• 狀態(tài)欄：顯示打開的項(xiàng)目和編輯的文件的相關(guān)信息。
• 視圖欄：位于最左邊的視圖欄，可以讓你在視圖之間切換并給你更多的特定于上下文指示
• 面板：在編輯區(qū)下面有不同的面板，面板有輸入或調(diào)試信息，錯(cuò)誤和警告或一個(gè)集成終端。

當(dāng)你每次打開VS Code，它跟你上次關(guān)閉它時(shí)的狀態(tài)一樣。文件夾，布局，打開的文件都被保存。

image

VS Code允許同時(shí)打開三個(gè)可視編輯器，這樣你可以編輯或查看并排一起的三個(gè)文件。在編輯區(qū)頂部區(qū)域，每個(gè)被打開的文件都有選項(xiàng)卡頭部（Tabs）

提示：側(cè)邊框移動(dòng)到右側(cè)（View > Move Side Bar）,切換顯示/隱藏 ?B 。

分欄編輯

你最多可以并排的打開三個(gè)編輯器。

如果你已經(jīng)打開一個(gè)編輯，你有很多方法打開其他編輯器，而且新編輯器會(huì)出現(xiàn)在當(dāng)前編輯器一邊。方法如下：

• 按住 Ctrl (Mac:'Cmd')，同時(shí)點(diǎn)擊一個(gè)文件
• ?+\ 組合可以把一個(gè)編輯器分裂為兩個(gè)。
• 右擊文件然后點(diǎn)擊 Open the side
• 點(diǎn)擊編輯器右上角的 Split Editor 按鈕
• 把文件拖拽到編輯器的兩側(cè)

image

每次你打開一個(gè)文件的時(shí)候，編輯器將顯示當(dāng)前文件的內(nèi)容。如果你有2個(gè)編輯器并排著，并且你想打開一個(gè)文件出現(xiàn)在編輯器的右邊，在打開這個(gè)文件前，務(wù)必確保那個(gè)編輯器被選中（通過點(diǎn)擊編輯器里面）。

當(dāng)你有一個(gè)或多個(gè)編輯器被打開過，而且想快速在他們之間切換 Ctrl (Mac:'Cmd')+1，2或3

提示：你可以縮放編輯器，也可以對(duì)他們重新進(jìn)行排序。拖拽編輯器的標(biāo)題區(qū)域到其他位置。拖拽編輯器的邊緣縮放編輯器。

資源管理器

在你的項(xiàng)目里，資源管理器是被用來瀏覽，打開，管理所有文件和文件夾的。

用VS Code打開你的文件夾后，該文件夾的內(nèi)容在資源管理器里是展開的，在這兒你可以做很多操作：

• 創(chuàng)建，刪除，重命名文件和文件夾
• 用拖拽移動(dòng)文件和文件夾
• 通過右擊菜單瀏覽所有選項(xiàng)

提示：你可以拖拽VS code外部文件到資源管理器里來復(fù)制它們

image

VS Code與其他工具非常和諧，特別是命令行工具，如果你想用在VS Code被打開的文件夾上下文運(yùn)行一個(gè)命令行工具，右鍵點(diǎn)擊文件夾并選擇 Open in Command (mac和Linux：Open in Termainal)。

image

你也可以右擊一個(gè)文件或文件夾并選擇·Reveal in Explorer·（mac：Reaveal in Finder ,Linux: Open Containing Folder ）。

提示：用?P通過文件的名稱可以快速的搜索和打開一個(gè)文件。

在默認(rèn)的情況下，VS Code排除來自資源管理器的一些文件（比如：.git）。用files.exclude 來設(shè)置規(guī)則隱藏來自資源器的文件和文件夾。

提示：隱藏像Unity的 \*.meta ,Typescript項(xiàng)目里的 \*.js 的驅(qū)動(dòng)原文件是非常有用的。在Typescript文件里，你可以修改 "**/*.js": {"when": "$(basename).ts"} 來排除生成的JavaScript。

打開編輯器

在資源管理器的頂部有標(biāo)有 OPEN EDITORS 的部分，這是當(dāng)前文件或預(yù)覽列表。這些文件是你在工作中用VS Code打開過的。比如，按照下面操作，一個(gè)文件會(huì)被列到 OPEN EDITORS 中。

• 對(duì)文件進(jìn)行更改
• 在資源管理器雙擊一個(gè)文件
• 打開一個(gè)不屬于當(dāng)前文件夾的文件

配置編輯器

VS Code給你許多選項(xiàng)來配置編輯器。你可以通過 User Setting 配置全局，或者通過 Workspace Setting 配置每個(gè)項(xiàng)目或者文件夾。在 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 中你可以很容易的查看和復(fù)制配置。

編輯你的設(shè)置之后，用 ?S 保存你的配置，它們會(huì)立即生效。

保存/自動(dòng)保存

默認(rèn)情況下，VS Code需要用 ?S 保存重新設(shè)置的數(shù)據(jù)到磁盤里。

然而，VS Code能很容易開啟自動(dòng)保存，在你配置延遲后或者焦點(diǎn)離開編輯器后自動(dòng)保存你的更改文件。自動(dòng)保存一旦被開啟，就不需要手動(dòng)去保存文件。

打開 User Setting 或者 Workspace 配置自動(dòng)保存，找到如下相關(guān)設(shè)置：

• files.autoSave ：設(shè)置值為off表示關(guān)閉自動(dòng)保存，afterDelay 保存文件后延遲自動(dòng)保存，onFocusChange 焦點(diǎn)移出編輯器后就會(huì)自動(dòng)保存。
• files.autoSaveDelay ： files.autoSave 的值是 afterDelay 時(shí)，就可以設(shè)置自動(dòng)保存的延遲時(shí)間。

搜索文件

VS Code允許你在當(dāng)前被打開的文件夾里快速搜索所有文件。使用 ??F 并且輸入你想搜索的內(nèi)容。搜索結(jié)果被分組到包含的關(guān)鍵詞的文件中，搜索結(jié)果中每個(gè)文件有包含關(guān)鍵詞的數(shù)量以及文件位置。展開一個(gè)文件可以看到這個(gè)文件包含關(guān)鍵詞列表。點(diǎn)擊關(guān)鍵詞就能在當(dāng)前編輯器里查看它。

image

提示：在搜索框里只支持正則表達(dá)式

你可以通過 ??J 配置高級(jí)搜索選項(xiàng)。這將顯示附加字段配置搜索

image

在搜索框下面有兩個(gè)輸入框，你可以包含和排除文件。點(diǎn)擊輸入框的右邊切換glob模式：

• * 匹配路徑段里面0或多個(gè)除 / 以外的字符
• ? 匹配路徑段里面一個(gè)除 / 以外的字符
• ** 匹配路徑段的多個(gè)字符，包括 /
• {} 用組的形式（列如： {**/*.html,**/*.txt} 匹配所有的HTML和文本文件）
• [] 匹配指定的字符范圍

VS Code可以在默認(rèn)情況下排除一些你不感興趣的文件夾（例如：node_modules ）來減少搜索結(jié)果的數(shù)量。可以通過設(shè)置改變 files.exclude 和 search.exclude 標(biāo)題下面的規(guī)則。

提示：在資源管理器里右擊一個(gè)文件夾并且選擇 Find in Floder 就可以在這個(gè)文件夾內(nèi)任意搜索

你也可以搜索并替換文件。展開搜索框出現(xiàn)替換文本框（Mac：Cmd + shift ）。

image

當(dāng)你鍵入文本到替換框中時(shí)，你可以看到即將更改的差異性顯示。你可以通過文件替換框替換所有文件，也可以替換一個(gè)文件里所有或者替換一個(gè)單一變化，

image

命令面板|

VS Code同樣可以用鍵盤操作。最重要的鍵盤組合 ??P ,這將調(diào)出命令面板。從這里，你可以訪問VS Code所有的功能，包含快捷鍵最常見的操作。

image

命令面板提供了許多命令。你可以執(zhí)行編輯命令，打開文件，搜索符號(hào)，查看一個(gè)文件的簡要概要，使用同一個(gè)交互的窗口。

• ?P 只需簡單的輸入它的名字就讓你導(dǎo)航到所有文件或者符號(hào)
• ??Tab 顯示你最后打開的一組文件路徑
• ??P 調(diào)出命令面板
• ??O 在一個(gè)文件里，跳到一個(gè)指定符號(hào)的位置
• ?G 在一個(gè)文件里，輸入行數(shù)直接跳到指定行的位置

輸入 ? 到輸入框得到可用的命令列表，你可以從這里執(zhí)行：

image

文件切換

當(dāng)你打開一個(gè)項(xiàng)目的時(shí)候，資源管理器擅長文件之間的切換。然而，當(dāng)你處理任務(wù)時(shí)，你將發(fā)現(xiàn)你自己在一組文件之間快速切換。VS Code提供兩個(gè)功能強(qiáng)大命令通過易用的鍵組合來瀏覽不同文件。

按住 Ctrl 然后按 Tab 鍵來查看編輯組中打開的所有文件的列表。如果要打開其中一個(gè)文件，再次使用 Tab 鍵選擇你想瀏覽的文件，然后松開 ctrl 去打開它。

image

另外，你能使用 ?- 和 ??- 在文件和編輯位置之間進(jìn)行導(dǎo)航。如果你在同一個(gè)文件不同行之間跳來跳去。這些快捷鍵可以讓你輕松地在這些位置之間進(jìn)行導(dǎo)航。

提示：當(dāng)你使用 ?P 時(shí)，你可以通過他們的名字打開任何文件

文件編碼

在 User Setting 或 Workspace 中通過編輯 files.encoding 設(shè)置全局或每個(gè)工作區(qū)域的文件編碼。

image

你可以在狀態(tài)欄中查看到文件編碼格式

image

點(diǎn)擊在狀態(tài)欄中的編碼按鈕，用不同的編碼格式來重新打開或者保存當(dāng)前文件。

image

然后選擇一個(gè)編碼格式

image

命令行啟動(dòng)

你可以通過命令行來啟動(dòng)VS Code來快速打開一個(gè)文件，文件夾，或者項(xiàng)目。通常情況，在一個(gè)文件范圍內(nèi)打開VS Code.我們發(fā)現(xiàn)最好的方法是在終端鍵入：

code .

提示：對(duì)于Mac用戶，我們需要通過設(shè)置使您能夠從終端內(nèi)啟動(dòng)VS Code.首選運(yùn)行VS code并打開命令面板（ ??P ），然后輸入 shell command 找到: Install ‘code' command in PATH 。

image

Windows和Lunix用戶安裝過程自動(dòng)把VS Code的執(zhí)行代碼加到 PATH 環(huán)境變量中。

有時(shí)你想打開或者創(chuàng)建一個(gè)文件。如果指定文件不存在，VS Code將會(huì)為你創(chuàng)建此文件。

code index.html style.css readme.md

提示：你可以通過空格鍵來分隔許多文件名

額外的命令行參數(shù)

當(dāng)通過 code 的命令行啟動(dòng)VS Code時(shí)你可以使用以下可選的命令行參數(shù)：

打開一個(gè)項(xiàng)目

VS Code不區(qū)分你打開是文件夾還是項(xiàng)目。如果VS Code在文件夾檢測(cè)到你打開一個(gè)項(xiàng)目（例如：一個(gè) C# 項(xiàng)目），這個(gè)項(xiàng)目的上下文將被顯示在狀態(tài)欄。如果有多個(gè)項(xiàng)目被發(fā)現(xiàn)，可以從這里切換項(xiàng)目。
在一個(gè)文件夾 C:\src\WebApp 里打開一個(gè)項(xiàng)目，像這里啟動(dòng)VS Code：

code C:\src\WebApp

VS Code 打開之后，只需打開源文件并且使用狀態(tài)欄根據(jù)需要來切換活動(dòng)項(xiàng)目

image

窗口管理

VS Code有一些選項(xiàng)來控制窗口應(yīng)該被新建還是恢復(fù)上一次窗口。

在 User setting或 Workspace setting 中：
window.openFilesInNewWindow ： 設(shè)置文件是否在一個(gè)新窗口打開，而不是在重用現(xiàn)有的VS Code實(shí)例。默認(rèn)是 true, VS Code打開一個(gè)新的窗口。false 重用VS code最后一個(gè)活動(dòng)實(shí)例并在此打開文件。

window.reopenFolders 設(shè)置通知VS Code怎么去恢復(fù)以前會(huì)話窗口。默認(rèn)是 one ,VS Code將重新打開你處理過最后一個(gè)文件夾。改變?cè)O(shè)置為 none 不重新打開任何文件夾并始終以一個(gè)空文件打開。設(shè)置為 all 恢復(fù)上次會(huì)話處理過的所有文件夾