vscode使用說明

簡介

Visual Studio Code（如下簡稱vscode）是一個輕量且強大的代碼編輯器，支持Windows，OS X和Linux。內置JavaScript、TypeScript和Node.js支持，並且擁有豐富的插件生態系統，可經過安裝插件來支持C++、C#、Python、PHP等其餘語言。

界面

配置

vscode配置文件是json形式的，修改配置只須要在 /.vscode/ 文件夾下面生成一份setting.json 文件，裏面配置對應的選項。這種配置方式只針對當前項目，固然還有全局配置的方式。

配置文件不須要本身去生成，vscode有一個配置工做區。

快捷鍵擴展

編輯器與窗口管理

同時打開多個窗口（查看多個項目）

打開一個新窗口： Ctrl+Shift+N
關閉窗口： Ctrl+Shift+W
同時打開多個編輯器（查看多個文件）

新建文件 Ctrl+N
歷史打開文件之間切換 Ctrl+Tab，Alt+Left，Alt+Right
切出一個新的編輯器（最多3個）Ctrl+，也能夠按住Ctrl鼠標點擊Explorer裏的文件名
左中右3個編輯器的快捷鍵Ctrl+1 Ctrl+2 Ctrl+3
3個編輯器之間循環切換 Ctrl+`
編輯器換位置，Ctrl+k而後按Left或Right
代碼編輯

格式調整

代碼行縮進Ctrl+[， Ctrl+]
摺疊打開代碼塊 Ctrl+Shift+[， Ctrl+Shift+]
Ctrl+C Ctrl+V若是不選中，默認複製或剪切一整行
代碼格式化：Shift+Alt+F，或Ctrl+Shift+P後輸入format code
修剪空格Ctrl+Shift+X
上下移動一行： Alt+Up 或 Alt+Down
向上向下複製一行： Shift+Alt+Up或Shift+Alt+Down
在當前行下邊插入一行Ctrl+Enter
在當前行上方插入一行Ctrl+Shift+Enter

光標相關

移動到行首：Home
移動到行尾：End
移動到文件結尾：Ctrl+End
移動到文件開頭：Ctrl+Home
移動到後半個括號 Ctrl+Shift+]
選中當前行Ctrl+i（雙擊）
選擇從光標到行尾Shift+End
選擇從行首到光標處Shift+Home
刪除光標右側的全部字Ctrl+Delete
Shrink/expand selection： Shift+Alt+Left和Shift+Alt+Right
Multi-Cursor：能夠連續選擇多處，而後一塊兒修改，Alt+Click添加cursor或者Ctrl+Alt+Down 或 Ctrl+Alt+Up
同時選中全部匹配的Ctrl+Shift+L
Ctrl+D下一個匹配的也被選中(被我自定義成刪除當前行了，見下邊Ctrl+Shift+K)
回退上一個光標操做Ctrl+U

重構代碼

跳轉到定義處：F12
定義處縮略圖：只看一眼而不跳轉過去Alt+F12
列出全部的引用：Shift+F12
同時修改本文件中全部匹配的：Ctrl+F12
重命名：好比要修改一個方法名，能夠選中後按F2，輸入新的名字，回車，會發現全部的文件都修改過了。
跳轉到下一個Error或Warning：當有多個錯誤時能夠按F8逐個跳轉
查看diff 在explorer裏選擇文件右鍵 Set file to compare，而後須要對比的文件上右鍵選擇Compare with 'file_name_you_chose'.

查找替換

查找 Ctrl+F
查找替換 Ctrl+H
整個文件夾中查找 Ctrl+Shift+F
顯示相關

全屏：F11
zoomIn/zoomOut：Ctrl + =/Ctrl + -
側邊欄顯/隱：Ctrl+B
預覽markdown Ctrl+Shift+V

其餘

自動保存：File -> AutoSave ，或者Ctrl+Shift+P，輸入 auto
這是目前支持的插件

針對各類編輯器轉過來的用戶水土不服現象，vscode很貼心的推出了快捷鍵映射插件
文件 -> 首選項 -> 鍵盤映射擴展

代碼管理

在代碼管理模塊vscode提供了基本的功能包括推送、提交、拉取、對比等。操做起來很方便，可是沒有souretree或者websotrm 那麼強大，git 分支樹須要經過插件來支持，例如 Git History 等。

插件

vscode自己功能並無那麼強大，主要是加上各種插件以後能夠擴展很多功能。
這邊我簡單介紹一些我目前用的插件

1. vscode-icons 圖形化目錄結構

2. ESLint es的語法檢測

3. bebel es6/es7 es的語法支持

4. beautify 語法美化

5. Document This 標註插件

6. Flow Language Support

7. Indenticator 這個難以描述，就是顯示光標所在的塊的範圍

8. One DarkPro 主題配色

9. Path Autocomplete 路徑補全

調試

vscode的調試功能對瀏覽器的調試支持還不是特別好，須要本地架設有服務器，而後指向咱們的工做區。這個就不詳細介紹了，由於我自己用的也很少。不過在調試node方面仍是挺不錯的。