簡介

在 Build 2015 大會上，微軟除了釋出了 Microsoft Edge 瀏覽器和新的 Windows 10 系統外，最大的驚喜莫過於宣佈推出免費跨平臺的 Visual Studio Code 編輯器了！

Visual Studio Code (簡稱 VS Code / VSC) 是一款免費開源的現代化輕量級程式碼編輯器，支援幾乎所有主流的開發語言的語法高亮、智慧程式碼補全、自定義快捷鍵、括號匹配和顏色區分、程式碼片段、程式碼對比 Diff、GIT命令等特性，支援外掛擴充套件，並針對網頁開發和雲端應用開發做了優化。軟體跨平臺支援 Win、Mac 以及 Linux，執行流暢，可謂是微軟的良心之作......

為什麼選擇VS Code開發工程

作為前端開發的我，之前的開發過程中一直用的是Atom這一款IDE，再配上了好看的主題外掛很nice，Atom的介面是真心好看，但是外掛裝多了你們真的不覺得卡嗎，VS Code比Atom更加的流暢，比webstorm更輕量級。一次偶然換的工作後，專案組要求統一IDE，讓我瞭解到了VS Code，這邊簡單介紹下VS Code日常開發的需求。

VS Code精選主題

主題外掛安裝流程

首先先簡單介紹些主題外掛的安裝流程：

第一步，點選擴充套件商店搜尋你要找的外掛名稱如Atom One Dark Theme，點選安裝；

第二部，安裝好了之後只是證明你本地的VS Code上面有這個外掛了，還需要將當前使用的主題外掛切換成你想要的才行；

①點選左下角的設定按鈕，進入命令皮膚；

②搜尋顏色主題關鍵字；

③點選想要的主題完成切換。

一個編輯器介面的好看與否，真心挺重要的，之前對atom一直戀戀不捨，完全就是因為它的主題介面太優雅了。下圖是筆者配置好的VS Code介面截圖，下面推薦幾款好看的主題：

VS Code 主題外掛列表(推薦)

1. One Dark Pro

One Dark Pro的主題介面效果如下（推薦指數5星） One Dark Pro

2. Atom One Dark Theme

Atom One Dark Theme的主題介面效果如下（推薦指數5星） Atom One Dark Theme

3. Eva Theme

Eva Theme的主題介面效果如下（推薦指數5星） Eva Theme

4. Material Palenight Theme

Material Palenight Theme的主題介面效果如下（推薦指數5星） Material Palenight Theme

更多Visual Studio Code 主題外掛請參考VS Code Downloads

VS Code精選外掛

VS Code所有的外掛都可以在VS Code Downloads外掛庫中找到，如下圖：

Auto Close Tag

Auto Close Tag：匹配標籤，關閉對應的標籤。對於HTML/XML很實用。

Auto Rename Tag

Auto Rename Tag：改變標籤的時候同時改動開閉合標籤；對於HTML/XML很實用。

HTML CSS Support

HTML CSS Support : 這個也是HTML必備外掛之一。

CSS Peek

CSS Peek ： html和css中關聯css的跳轉

Code Runner

Code Runner : 程式碼編譯執行看結果，支援眾多語言

Git History

Git History : 檢視git分支提交日誌的外掛

Git History Diff

Git History Diff : 尋找每一個git分支上面提交過的節點，並可以對比差異性。

Path Autocomplete

Path Autocomplete : 路徑智慧補全外掛。

Path Intellisense

Path Intellisense ：路徑智慧提示外掛。

beautify

beautify ：良好的擴充性，可以格式化JSON|JS|HTML|CSS|SCSS,比內建格式化好用；但是react工程的jsx檔案用beautify外掛格式化會亂掉，建議不要用

Prettier - Code formatter

Prettier - Code formatter ：程式碼格式化外掛，主要針對工程中的JavaScript / TypeScript / CSS

Prettier Now

Prettier Now ：支援語言比較全面的程式碼格式化外掛，主要是支援jsx /tsx ，還有sass / less等(問的react工程基本上就是用這2個Prettier外掛格式化程式碼)

Terminal

Terminal ： vs code 內建的命令列外掛，也比較實用。

Bookmarks

Bookmarks ：這個外掛支援在檔案特定的行做標記，更好的提高開發效率。

Bracket Pair Colorizer

Bracket Pair Colorizer ：很多括號的情況下，這個外掛可以做一個顏色的區分，程式碼一目瞭然。

Chinese (Simplified) Language Pack for Visual Studio Code

Chinese (Simplified) Language Pack for Visual Studio Code ：適用於 VS Code 的中文（簡體）語言包。

filesize

filesize ：編輯器底部顯示當前檔案的大小。

Markdown Preview Enhanced

Markdown Preview Enhanced ：本地Markdown文件預覽外掛。

vscode-icons

vscode-icons ：一套vs code的圖示外掛。

npm

npm ：不多說npm。

open-in-browser

open-in-browser ：一鍵在瀏覽器中開啟

Live Server

Live Server ：一鍵開啟本地服務。

fileheader

fileheader ：感覺用得上 新建檔案作者註釋

在自定義設定頁面(comd+,)，可以設定一些作者資訊,然後開啟命令皮膚(comd+shift+P),輸入fileheader回車即可

Local History

Local History ：個人感覺很有用 原生程式碼的一個儲存日誌，在沒有git,svn，或者很長時間沒有提交過程式碼的情況下，感覺挺實用，再也不怕程式碼回滾。

GitLens -- Git supercharged

GitLens -- Git supercharged ： GitLens能增強Visual Studio程式碼中內建的Git功能。它幫助您通過Git blame註解和程式碼鏡頭直觀地顯示程式碼作者，無縫地導航和探索Git儲存庫，通過強大的比較命令獲得有價值的見解。

VS Code常用快捷鍵

VS Code的快捷鍵有很多，需要具體的請仔細參考 VS Code => 左下角設定按鈕 => 鍵盤快捷方式

我們也可以自定義快捷鍵，在keybindings.json裡面設定覆蓋即可

快捷鍵完全是個人操作習慣，這裡不多介紹，我常用的有這幾個：

開啟命令皮膚    cmd + shift + p / F1
開啟設定頁面    cmd + ,
刪除一行        cmd + E(自定義)
新增書籤        cmd + option + k
程式碼格式化      control + opiton + B
複製程式碼

VS Code git程式碼管理實戰

git現在是很常見的程式碼管理工具，VS Code 也有內建的git外掛，當然，要是你覺得不完美，可以安裝一些常用的git外掛等，簡單介紹下VS Code 下git的提交步驟。

這裡我以GitHub上面新建的一個倉庫為例，倉庫新建後預設分支是master，這裡我在GitHub上新建了2個遠端分支develop01和develop02，當你在VS Code中點選切換到某一個遠端分支的時候，VS Code會自動給你建立一個和當前遠端分支對應的本地分支，如origin/develop02 對應develop02，如origin/master 對應master,如上圖所示。

現在我們在master分支上面提交程式碼，

第一步，先暫存要提交的檔案
第二步，填下提交日誌
第三步，點選對勾按鈕完成提交

提交好了之後還需要拉取git遠端分支的程式碼才能推送。

第四步，拉取遠端程式碼，解決衝突
第五步，推送到遠端分支上

然後就沒有然後了?，提交完成。

假如你因為工作需求的原因，需要在不同的分支上面提交不同的程式碼，那就涉及到分支的切換了。首先第一步，切換分支之前先提交程式碼，不然老是有報錯日誌，切換了分支後，本地的程式碼也會對應分支改變。

如上圖，master切換成develo01之後，master分支上剛提交的程式碼成了develo01上對應的程式碼。

git提交程式碼這部分，還可以使用相關git程式碼管理工具實現呢，如SourceTree、Tower等工具都很好用，這邊也整理了一篇文章，歡迎收藏

你問我答

1.VS Code 怎麼更改預設的設定？

筆者使用的是mac，使用快捷鍵 Com + , 開啟使用者預設設定介面，左邊是預設設定，右邊是自定義設定，根據個人工作場景而定吧，就像我這邊就統一格式化程式碼縮排4格等,還可以設定忽略一些資料夾等。

{
    "explorer.confirmDelete": false,
    // 主題
    "workbench.iconTheme": "vscode-icons",
    // 小地圖
    "editor.minimap.enabled": true,
    // 主題風格One Dark Pro
    "workbench.colorTheme": "One Dark Pro",
    "window.zoomLevel": 1,
    "extensions.autoUpdate": false,
    // 字型大小
    "editor.fontSize": 13,
    "editor.snippetSuggestions": "top",
    "diffEditor.ignoreTrimWhitespace": true,
    // 設定格式化縮排4格
    "prettier.tabWidth": 4,
    "vetur.format.defaultFormatter.html": "prettier",
    "gitlens.advanced.messages": {
        "suppressShowKeyBindingsNotice": true
    },
    "gitlens.historyExplorer.enabled": true,
    "atomKeymap.promptV3Features": true,
    "editor.multiCursorModifier": "ctrlCmd",
    //貼上自動格式化
    "editor.formatOnPaste": false,
    //儲存自動格式化
    "editor.formatOnSave": false,
    // 用來忽略工程開啟的資料夾
    "files.exclude": {
        "**/.vscode": true,
        "**/.DS_Store": true,
        "**/.history":true,
        "**/nbproject":true
    },
    // 用來忽略搜尋的資料夾
    "search.exclude": {
        "**/node_modules/**": true,
        "**/bower_components/**": true,
        "**/image/**": true,
        "**/*.xml": true,
        "**/.history/**":true,
        "**/nbproject/**":true,
        "**/vscode/**":true

    },
    // 建立和更新程式碼的頭部資訊作者
    "fileheader.Author": "Baldwin",
    "fileheader.LastModifiedBy": "Baldwin",
}
複製程式碼

2.假如我幾天沒有提交程式碼了（git），今天突然發現程式碼youbug，需要還原到昨天版本，VS Code能做到嗎？

能。參考上面的 VS Code外掛 Local History

基本上就介紹到這裡（有好的外掛或者主題歡迎留言，一定給update上去），希望對你使用VS Code有幫助，有問題歡迎留言，一定積極回覆 ???

強大的 VS Code

簡介