[譯]Visual Studio Code文檔其1—基本使用

Visual Studio Code的基本使用

全文翻譯自官方Docs，更新至1.3版本

Visual Studio Code的核心是一個代碼編輯器。像許多其餘代碼編輯器同樣，VS Code採用了廣泛的UI設計，將顯示全部可訪問的文件及文件夾的目錄樹置於左側，將文件內容編輯器置於右側，並顯示已打開文件的內容。

譯者注：NodeJS方面VS Code是Sublime很好的替代品，不妨試試

文件、文件夾以及Project

VS Code以文件、文件夾爲基礎——你能夠經過打開文件或文件夾來快速啓動VS Code。

VS Code能夠讀寫不一樣框架或平臺中不一樣類型的文件。即使VS Code同時打開了package.json、 project.json、tsconfig.json甚至ASP.NET 5 Visual Studio的項目文件，VS Code仍然能夠讀取它們併爲你提供相應的附加功能，如IntelliSense。

基本佈局

VS Code擁有簡潔且直觀的界面佈局，併爲編輯區提供了最大化的區域，以提供足夠的空間來瀏覽。
UI部分劃分爲如下四個區域：

• 編輯器：最主要的區域，用來編輯文件。能夠以分欄的方式同時打開三個文件。

• 側邊欄：不一樣視圖的顯示區域。

• 狀態欄：位於底部，顯示已打開的project及正在編輯的文件的信息(類型、編碼等)。

• 視圖欄 ：位於最左側，可讓你在不一樣的視圖間進行切換，以及給予你額外特定的全局指示器。如應用Git時，project的變化會在其上顯示相應的數字。

• 面板：在編輯區域下方能夠打開面板來顯示調試信息、警告錯誤抑或是控制檯。

每次打開VS Code時，都會顯示你上次退出時界面的狀態。文件夾、佈局以及已打開的文件都將是上次被保存的狀態。

提示：你能夠移動側邊欄至右手邊(View, Move Sidebar)以及控制其是否顯示(Ctrl+B)。

分欄編輯

你能夠並排打開至多三個編輯器。

若是已經打開了一個編輯器，你能夠有多種方式再打開一個編輯器與之並排：

• Ctrl(Mac: Cmd)+單擊目錄樹中的一個文件

• Ctrl+\令當前窗口一分爲二

• 在左側目錄樹中的文件上右鍵選擇Open to the Side

• 單擊編輯器右上角的Split Editor按鈕

• 拖拽文件到編輯區域的另外一側

打開另外一個文件時，當前得到焦點的編輯器將顯示該文件的內容。因此若是當前有兩個並排的編輯器並想要打開文件foo.css到右側的編輯器時，那麼你須要肯定右側的這個編輯器是處於激活（得到焦點）狀態（能夠經過在編輯器內部單擊的方式激活）的。

打開了多個編輯器並但願能快捷地從中切換時，只須要按住Ctrl(Mac:Cmd)鍵並按下1、2或者3便可。

提示：你能夠經過左右拖拽編輯器標題欄來調整編輯器的位置，經過拖拽編輯器之間的分割線來調整它們的寬度。

Explorer 文件瀏覽器

文件瀏覽器用於瀏覽、打開或管理project中的文件及文件夾。

當使用VS Code打開一個文件夾以後，此文件夾中的全部內容都將呈如今文件瀏覽器之中。能夠對其進行以下操做：

• 建立、刪除、重命名文件或文件夾

• 經過拖拽的方式來移動文件或文件夾

• 使用右鍵菜單瀏覽更多操做

提示：能夠經過拖拽一個外部文件到文件瀏覽器中的方式來複制此文件到project。

在VS Code中也能夠很方便地使用其餘的工具，好比命令行工具。若是想打開以當前工做目錄下的命令行，能夠在文件瀏覽器中選中該文件夾（或其下的某個文件）右擊並選擇右鍵菜單中的Open in Console。

右擊某個文件或文件夾並選擇Reveal in Explorer(Mac:Reveal in Finder)能夠打開該文件或文件夾的本地目錄。

提示：Ctrl+P能夠快捷地根據文件名來搜索並打開這個文件。

默認地，VS Code在文件瀏覽器中排除了一些文件夾（好比.git）。使用設置中的files.exclude能夠配置在文件瀏覽器中須要隱藏的文件夾的規則。

提示：這一點對於隱藏一些資源文件來講很是有用，好比Unity中的\*.meta以及TypeScript項目中的\*.js。Unitry中須要排除\*.cs.meata文件時，匹配規則應該是"**/*.cs.meta": true。

Open Editors

文件瀏覽器的頂部是Open Editors區域，這其中包含了你以前使用VS Code打開過的文件的列表。如下的操做會將文件列入Open Editors：

• 對一個文件進行了改動

• 在文件瀏覽器中雙擊文件

• 打開了一個非當前目錄下的文件

只需在Open Editors中單擊一項，該文件就會在VS Code中被激活。

完成了某項工做時，你能夠很方便地從Open Editors中單獨移除某個文件，也能夠經過Close All Files的操做來移除全部文件。

配置編輯器

在VS Code中，編輯器有許多可供配置的選項。選項依做用域保存在不一樣的地方，做用於全局的存於User Settings中，做用於某個project的存於Workspace Settings中。這些設定的值會保存在不一樣的settings.json文件中。

• 選擇 File > Preferences > User Settings (或者Ctrl+Shift+P, 輸入user再按Enter)來編輯User的settings.json文件。

• 選擇 File > Preferences > Workspace Settings (或者Ctrl+Shift+P, 輸入worksp再按Enter)來編輯Workspace的settings.json文件。

對Mac用戶的提示:Preferences菜單在Code下而不是File下，例Code > Preferences > User Settings。

打開User或者Workspace的設置後，VS Code左側會顯示默認設置(Default Settings)，右側會顯示可編輯的settings.json，在右側添加左側中的設定名稱並附上值就能夠覆蓋默認值了。

編輯好想要修改的設置後，使用Ctrl+S保存，新的設置會當即生效。

保存 / 自動保存

默認地，VS Code須要手動Ctrl+S來保存文件改動到硬盤中。

十分便捷的Auto Save功能能夠在空閒時爲你保存文件的改動，而當這項功能開啓時，就無需手動保存文件了。

打開或者關閉Auto Save：打開命令面板(Ctrl+Shift+P)，接着輸入auto過濾顯示列表，找到Auto Save回車便可。

固然，你也能夠在菜單File中找到這項功能。

搜索

VS Code能夠在當前已打開的文件夾下全部的文件中快速搜索內容，只須要按下Ctrl+Shift+F並輸入關鍵詞便可。搜索結果將以分組的方式顯示包含該關鍵詞的文件，並標記出關鍵詞出現次數和所在位置，單擊一個結果便可打開其所在的文件。

提示：搜索內容支持正則表達式。

使用Ctrl+Shift+J能夠打開高級搜索，爲搜索提供額外的過濾條件。

高級搜索中搜索欄下的兩個輸入框，分別是填寫的須要包含和排除的某些文件。單擊輸入框右側的按鈕(Use Glob Patterns)以確保當前支持Glob Pattern語法：

• *匹配一個或多個任意字符（譯者注：a*.js -> app.js）

• ?匹配一個任意字符（譯者注：ap?.js -> app.js）

• **匹配任意數量的任意字符，即全部

• {}分組條件（例：{**/*.html,**/*.txt}將匹配全部html以及txt文件）

• []定義字符的範圍（例： example.[0-9]將匹配example.0或example.1）

VS Code默認排除了一些你不感興趣的目錄（好比node_modules）以優化搜索的結果，固然，你也能夠對此使用files.exclude和search.exclude section進行設置。

提示：在文件瀏覽器中的文件夾上右鍵Find in Folder將只會在該目錄下進行搜索。

固然，你能夠在搜索的同時去替換文本。顯示替換輸入框的方法以下圖：

在替換輸入框內輸入文本時，下方會顯示出替換先後的對比。替換全部文件或單個文件中匹配結果，抑或是替換某一處匹配結果，能夠自行選擇。

命令面板

使用快捷鍵Ctrl+Shift+P能夠打開命令面板，你能夠經過它來調用全部VS Code的功能，這其中還包括能使用快捷鍵控制的經常使用操做。

在編輯器中的一些操做，打開指定文件、搜索symbol或者查看文件大綱等操做均可以使用命令面板來完成。下面是一些提示：

• Ctrl+P：輸入相應名稱便可快速地打開文件或symbol

• Ctrl+Tab：快速地從打開過的文件中切換

• Ctrl+Shift+O將指向你所指定的symbol所在文件中的位置

• Ctrl+G跳至指定行數

在輸入框內鍵入?將顯示可執行命令的列表：

文件切換

當你瀏覽一個project時，文件瀏覽器能很好地在衆多文件中切換。然而，你也會遇到只在幾個固定的文件中切換的狀況，這個時候文件瀏覽器就顯得不那麼方便了。爲此，VS Code提供了兩組很是好用的快捷鍵以應對這種狀況。

按下Ctrl+Tab時，將顯示從你啓動VS Code後你打開過的文件的列表。（譯者注：但從Open Editors關閉的話就不會出如今該列表了）想要打開其中的文件的話，按住Ctrl(Mac:Cmd)並按下Tab選擇須要切換的文件便可。

固然，也可使用Alt+Left或Alt+Right來切換文件。若是須要在同一文件不一樣行之間快速跳轉，你也可使用這一對快捷鍵。

提示：想要快速地切換至任一文件的話，只須要Ctrl+P並輸入文件名便可。

文件編碼

使用file.encoding來指定VS Code的文件編碼類型，在User Setting或者Workspace Settings中設置。

當前文件的編碼類型能夠在底部狀態欄中看到。

在狀態欄中點擊編碼類型能夠選擇以不一樣的編碼類型來從新打開或保存該文件。

而後選擇一種編碼類型。

從命令行啓動

從命令行啓動VS Code能夠快速打開一個文件、文件或者project。命令行切換到目標目錄，而後輸入：

code .

提示：咱們在Mac和Linux的安裝版本頁面中作出了提示，告訴你該如何啓動VS Code。咱們也爲Windows用戶自動添加了VS Code的環境變量。

想要打開一個文件時，若是該文件不存在，咱們將爲你自動建立：

code index.html style.css readme.md

提示：能夠用空格分隔文件名來同時打開多個文件。

命令行參數

下面是一些code命令可選的參數。

參數	描述
-g或--goto	配以file:line:column時能夠定位到文件中指定的位置，列數爲可選。若是文件名中包含:，那麼該參數爲必須。
-n或--new-window	打開一個新的VS Code窗口
-r或--reuse-window	使用當前VS Code窗口打開文件或文件夾
file	指定須要打開文件的名稱。若是文件不存在，將自動被建立。該命令也能夠指定多個文件。
folder	指定須要打開文件夾的名稱，能夠指定多個文件夾。

對於文件或是文件夾，均可以使用絕對或相對路徑。相對路徑指的是相對於你運行命令code的地方。

若是你在命令行指定多個文件或文件夾，VS Code將只開啓一個實例。

打開Project

VS Code並不區分你打開的是文件夾仍是project。不管你打開的文件夾裏包含了什麼文件，VS Code都會讀取它們並在狀態欄標記project狀態。而若是文件夾中包含了多個project，你也能夠從狀態欄方便地切換project。（譯者注：對於VS Code來講，project其實至關於文件夾的一個子集，能夠把project看做是一種特殊的文件夾）

要打開project所在的文件夾c:\src\WebApp：

code c:\src\webapp

換言之，要打開一個包含project的文件夾其實就是要打開這個project：

窗口管理

VS Code有一些選項能夠控制窗口是須要被新建仍是複用。

window.openInNewWindow可讓VS Code在打開文件時新建窗口，而不是繼續使用已有的窗口。默認地，VS Code會新建窗口（當你雙擊一個外部文件或者從命令行打開一個文件時）。設置這個屬性爲false的話，打開文件將使用當前已有的窗口。

設置window.reopenFolders將告訴VS Code該如何啓動。默認地，VS Code將打開上次的project（值：one）。設置爲never後，VS Code啓動時則會打開一個空的project。設置爲all後，VS Code將開啓你上次工做過的全部project窗口。

常見問題

問：能夠全局檢索並替換嗎？

答：這個功能目前尚未實現，不過你能夠期待它的出現。（譯者注：全文檢索VS Code是支持的，可是不能在同時替換）

問：文本換行該如何設置？

答：使用設置中的editor.wrappingColumn(默認值300)來控制每一行的長度，超過即換行，設置爲0則不換行。

使用Alt+Z能夠控制文本換行的開啓或關閉狀態，重啓VS Code將讀取已保存的editor.wrappingColumn的值。

問：我該如何使得OPEN EDITORS區域顯示更多的文件？

答：經過explorer.openEditors.visible能夠設置顯示條目的最大數量，explorer.openEditors.dynamicHeight能夠設置其爲自動高度。