簡介
在 Build 2015 大會上,微軟除了釋出了 Microsoft Edge 瀏覽器和新的 Windows 10 系統外,最大的驚喜莫過於宣佈推出免費跨平臺的 Visual Studio Code 編輯器了!
Visual Studio Code (簡稱 VS Code / VSC) 是一款免費開源的現代化輕量級程式碼編輯器,支援幾乎所有主流的開發語言的語法高亮、智慧程式碼補全、自定義快捷鍵、括號匹配和顏色區分、程式碼片段、程式碼對比 Diff、GIT命令 等特性,支援外掛擴充套件,並針對網頁開發和雲端應用開發做了優化。軟體跨平臺支援 Win、Mac 以及 Linux,執行流暢,可謂是微軟的良心之作......
為什麼選擇VS Code開發工程
![強大的 VS Code](https://i.iter01.com/images/0b9118474ced1cc88f0b6dd510562a606aebd170522fed89b8c4e2e965a83a0e.jpg)
作為前端開發的我,之前的開發過程中一直用的是Atom
這一款IDE,再配上了好看的主題外掛很nice,Atom的介面是真心好看,但是外掛裝多了你們真的不覺得卡嗎,VS Code
比Atom
更加的流暢,比webstorm
更輕量級。一次偶然換的工作後,專案組要求統一IDE,讓我瞭解到了VS Code
,這邊簡單介紹下VS Code
日常開發的需求。
VS Code精選主題
![強大的 VS Code](https://i.iter01.com/images/218a3fc571098411e53f27d698fcdda537957835b465e413996d67fe737a0396.jpg)
主題外掛安裝流程
首先先簡單介紹些主題外掛的安裝流程:
第一步,點選擴充套件商店搜尋你要找的外掛名稱如
Atom One Dark Theme
,點選安裝;
![強大的 VS Code](https://i.iter01.com/images/f8dbab043b08b8ebc7ddd1cc495d9b378697cf963f82430722f69f9c3e0018a7.jpg)
第二部,安裝好了之後只是證明你本地的VS Code上面有這個外掛了,還需要將當前使用的主題外掛切換成你想要的才行;
①點選左下角的設定按鈕,進入命令皮膚;
②搜尋顏色主題
關鍵字;
![強大的 VS Code](https://i.iter01.com/images/a3505dc25d53fabddab9cccd23f8ccb0ce01b87ab8a8ca284a21bbdacbe944aa.jpg)
③點選想要的主題完成切換。
![強大的 VS Code](https://i.iter01.com/images/df9359a27b1335471c8b57ffc3b37c37cd6a800dc5aaed4aea5fcc3c125541c0.jpg)
一個編輯器介面的好看與否,真心挺重要的,之前對atom一直戀戀不捨,完全就是因為它的主題介面太優雅了。下圖是筆者配置好的VS Code介面截圖,下面推薦幾款好看的主題:
![強大的 VS Code](https://i.iter01.com/images/577882f49049400eb988ffe84205c0f628855fb9ebc8d0d5311f1d567b5f38e2.jpg)
VS Code 主題外掛列表(推薦)
1. One Dark Pro
One Dark Pro的主題介面效果如下(推薦指數5星) One Dark Pro
![強大的 VS Code](https://i.iter01.com/images/c71c6ccf9feb516ceb6f1b8fbc2a2fddf1d86a0f54760cb36dafbd83a2c79b81.png)
2. Atom One Dark Theme
Atom One Dark Theme的主題介面效果如下(推薦指數5星) Atom One Dark Theme
![強大的 VS Code](https://i.iter01.com/images/99e2eb4a80d5427a41a0d44d564c3368952990a8ff9f640444cc82fb43adf468.png)
3. Eva Theme
Eva Theme的主題介面效果如下(推薦指數5星) Eva Theme
![強大的 VS Code](https://i.iter01.com/images/2d4b193c9146f3ef9b39d09498f7309bd94346bf841e68a364375f51fb14ac29.png)
4. Material Palenight Theme
Material Palenight Theme的主題介面效果如下(推薦指數5星) Material Palenight Theme
![強大的 VS Code](https://i.iter01.com/images/7bc2016021ff5b5bddeb9ee80b5ea321cd32a02a764d4670faa0c954d7823bef.jpg)
更多Visual Studio Code 主題外掛請參考VS Code Downloads
VS Code精選外掛
VS Code所有的外掛都可以在VS Code Downloads外掛庫中找到,如下圖:
![強大的 VS Code](https://i.iter01.com/images/6879ab0e523d914833ba563dfd401c0a4baa0bc8c91651dc28a2318602728dd4.jpg)
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 : 這個外掛支援在檔案特定的行做標記,更好的提高開發效率。
![強大的 VS Code](https://i.iter01.com/images/609c520fca24ecfe7101143054f83b2545a766ad38c11fe6814ec3162b41d179.jpg)
Bracket Pair Colorizer
Bracket Pair Colorizer :很多括號的情況下,這個外掛可以做一個顏色的區分,程式碼一目瞭然。
![強大的 VS Code](https://i.iter01.com/images/52b36218e4474855261125e6fb3d6c061dfd04185500cb99269c688f0d0002f8.jpg)
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 :感覺用得上 新建檔案作者註釋
![強大的 VS Code](https://i.iter01.com/images/c1a1b749aa865b07c6b9ffa2804a8464622f4e307ef64e2e24521642adc1d37f.jpg)
comd+,
),可以設定一些作者資訊,然後開啟命令皮膚(comd+shift+P
),輸入fileheader
回車即可
![強大的 VS Code](https://i.iter01.com/images/9b3300d96b42edf4e3a2dde4647729b556815a48b519a797bf5e748ba956ddad.jpg)
![強大的 VS Code](https://i.iter01.com/images/05eaa0fd286d7576ecf2fb305ba66494e2ad730b909d715768f3e8f4f4a024b2.jpg)
Local History
Local History :個人感覺很有用 原生程式碼的一個儲存日誌,在沒有git,svn,或者很長時間沒有提交過程式碼的情況下,感覺挺實用,再也不怕程式碼回滾。
![強大的 VS Code](https://i.iter01.com/images/eb4f768b00b77d6dcbc79fe1bfe6e55f9c46ba7b9490fcd6ddbfae515c1e5f3c.jpg)
GitLens -- Git supercharged
GitLens -- Git supercharged : GitLens能增強Visual Studio程式碼中內建的Git功能。它幫助您通過Git blame註解和程式碼鏡頭直觀地顯示程式碼作者,無縫地導航和探索Git儲存庫,通過強大的比較命令獲得有價值的見解。
![強大的 VS Code](https://i.iter01.com/images/7cdee73e48a3c9c552afd374c78a0fc0248a6e6263958bfaa3e4fd330032c4bd.jpg)
![強大的 VS Code](https://i.iter01.com/images/267e3f0f8f10705cf91532047bc808e1a56a5c9cb7bb0ea8b8adc0f68461490a.jpg)
VS Code常用快捷鍵
VS Code的快捷鍵有很多,需要具體的請仔細參考 VS Code
=> 左下角設定按鈕
=> 鍵盤快捷方式
![強大的 VS Code](https://i.iter01.com/images/5882eb00050ac5e06bee9de7644c52e5e712c2d821bf97d33176b17ed1780d64.jpg)
我們也可以自定義快捷鍵,在keybindings.json裡面設定覆蓋即可
![強大的 VS Code](https://i.iter01.com/images/436db6b50428b435f6e24a08ac37fe5c940785772026d2c58fa32779cccce66c.jpg)
快捷鍵完全是個人操作習慣,這裡不多介紹,我常用的有這幾個:
開啟命令皮膚 cmd + shift + p / F1
開啟設定頁面 cmd + ,
刪除一行 cmd + E(自定義)
新增書籤 cmd + option + k
程式碼格式化 control + opiton + B
複製程式碼
VS Code git程式碼管理實戰
git現在是很常見的程式碼管理工具,VS Code 也有內建的git外掛,當然,要是你覺得不完美,可以安裝一些常用的git外掛等,簡單介紹下VS Code 下git的提交步驟。
![強大的 VS Code](https://i.iter01.com/images/cc18912a687acc5af249d1c467b0edc277b1894459dfaffa8924fa9616b8f3e8.jpg)
這裡我以GitHub上面新建的一個倉庫為例,倉庫新建後預設分支是master,這裡我在GitHub上新建了2個遠端分支develop01
和develop02
,當你在VS Code中點選切換到某一個遠端分支的時候,VS Code會自動給你建立一個和當前遠端分支對應的本地分支,如origin/develop02
對應develop02
,如origin/master
對應master
,如上圖所示。
現在我們在master分支上面提交程式碼,
![強大的 VS Code](https://i.iter01.com/images/7f70f90f88ce49f2a2acf956893707d8ec7663349c6000ed04d6aec35b010541.jpg)
- 第一步,先暫存要提交的檔案
- 第二步,填下提交日誌
- 第三步,點選
對勾按鈕
完成提交
提交好了之後還需要拉取git遠端分支的程式碼才能推送。
![強大的 VS Code](https://i.iter01.com/images/5034ccb21abe5b4719bd1ecfb1f7b3aa51a38480238d7cddf3709b67f828a241.jpg)
- 第四步,拉取遠端程式碼,解決衝突
- 第五步,推送到遠端分支上
然後就沒有然後了?,提交完成。
假如你因為工作需求的原因,需要在不同的分支上面提交不同的程式碼,那就涉及到分支的切換了。首先第一步,切換分支之前先提交程式碼,不然老是有報錯日誌,切換了分支後,本地的程式碼也會對應分支改變。
![強大的 VS Code](https://i.iter01.com/images/7f0b4ddf5f8b5d54c88dbdeeab04fccf3cfd0005c5c6b1ea4143c649887e72e9.jpg)
如上圖,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](https://i.iter01.com/images/6a5cdddb08e51186efa836250186222b19cf913ef35c5a8c5fc84a41ed902078.png)