簡介

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

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

爲何選擇VS Code開發工程

做爲前端開發的我，以前的開發過程當中一直用的是Atom這一款IDE，再配上了好看的主題插件很nice，Atom的界面是真心好看，可是插件裝多了大家真的不以爲卡嗎，VS Code比Atom更加的流暢，比webstorm更輕量級。一次偶然換的工做後，項目組要求統一IDE，讓我瞭解到了VS Code，這邊簡單介紹下VS Code平常開發的需求。html

VS Code精選主題

主題插件安裝流程

首先先簡單介紹些主題插件的安裝流程：前端

第一步，點擊擴展商店搜索你要找的插件名稱如Atom One Dark Theme，點擊安裝；java

第二部，安裝好了以後只是證實你本地的VS Code上面有這個插件了，還須要將當前使用的主題插件切換成你想要的才行；node

①點擊左下角的設置按鈕，進入命令面板；react

②搜索顏色主題關鍵字；git

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

一個編輯器界面的好看與否，真心挺重要的，以前對atom一直依依不捨，徹底就是由於它的主題界面太優雅了。下圖是筆者配置好的VS Code界面截圖，下面推薦幾款好看的主題：npm

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

簡介