06.27 強大的 VS Code及其精選插件

在 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 ：一鍵開啟本地服務。

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上對應的代碼。

你問我答

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

作者：baldwin 原文鏈接：https://juejin.im/post/5b123ace6fb9a01e6f560a4b