VSCode是微軟推出的一款輕量編輯器，採取了和VS相同的UI界面，搭配合適的插件可以優化前端開發的體驗，這裏爲大家介紹一下vscode的技巧,需要的朋友可以參考下
佈局：左側是用於展示所要編輯的所有文件和文件夾的文件管理器，依次是資源管理器，搜索，GIT，調試，插件，右側是打開文件的編輯區域，最多可同時打開三個編輯區域到側邊。
底欄：依次是Git Branch，error&warning，編碼格式等
html文檔中
1、按tab鍵快速生成文檔頭以及閉合標籤，類似sublime text 所安裝的插件，快速編輯，提高效率
2、js代碼也有自動補全功能
快捷鍵命令
ctrl+shift+p 控制面板
ctrl+k、ctrl+o 打開資源管理器選擇文件夾或文件
光標選擇指定的文件夾，然後ctrl+shift+b 打開瀏覽器
安裝
VSCode是微軟推出的一款輕量編輯器，採取了和VS相同的UI界面，搭配合適的插件可以優化前端開發的體驗。
HTML Snippets：增強了zen-coding，增加了H5的自動補全，安裝後每次打開自動啓用（可能與其他插件衝突）。
下載地址：https://code.visualstudio.com/Download 或者 https://www.jb51.net/softs/606746.html
配置
Ctrl + Shift + P 或 F1 打開命令面板（也可以使用 查看-》命令面板打開）；
輸入 user set 後按回車打開用戶配置；
使用 “editor.fontFamily”：“Consolas， ‘Courier New’， monospace” 選擇字體樣式，默認爲“Consolas， ‘Courier New’， monospace”；使用 editor.fontSize“：14 控制字體大小，默認爲14；使用 ”editor.wrappingColumn“：0使文本自動換行，默認爲300；在左側的默認配置中會有詳細的中文描述，配置文件是json格式的文本文檔。
插件
Ctrl + Shift + P 或 F1 打開擴展面板，輸入 install 後按回車打開擴展安裝面板；或點擊側邊欄的最後一個按鈕；或使用ctrl + shift + x命令打開；或使用 查看-》擴展打開擴展面板。
在對話框中輸入［string ］@sort:installs可以根據下載量排序查看，選擇所需插件，單擊安裝即可。
@sort:installs：根據下載量排序查看所有插件，asc 升序排列，desc 降序排列。
@sort:raTIng ：分級查看，asc 升序排列，desc 降序排列。
string可以爲空
推薦插件
C/C++：添加C/C++支持，包括但不限於自動補全
Python：自動縮進，補全，查錯，debug，代碼格式化等等
beauTIfy：格式化html，css，js
vscode-icons：一款很火的圖標主題
HTML Snippets：可以在不輸入 《 的情況下提示
View In Browser：在瀏覽器中打開 HTML 文件
Crane - PHP Intellisense：PHP代碼的自動補全插件
jQuery Code Snippets：一款jQuery重度患者的插件
Debugger for Chrome ：調試JavaScript
Git History：顯示git log和line history
Git 的使用
需要本機已經安裝 Git
無需安裝插件，單機側邊欄的第三個圖標即可進行 add、commit、push、pull。（或者使用ctrl+shift+g打開，或使用 查看-》Git 打開Git）
主題更換
圖標主題：Ctrl+shift +p 打開命令面板，輸入 icon theme 後回車，選擇一個即可。
顏色主題：Ctrl+shift +p 打開命令面板，輸入 color theme 後回車，選擇一個即可。
跳轉
跳轉到文件：Ctrl+P。
跳轉到符號：Ctrl+shift+o，可以跳轉到文件中的方括號、大括號等等。
跳轉到行：Ctrl+G，可以跳轉到指定行。
Debug
使用ctrl+d 打開debug面板。
可以根據需要配置launch.json
常用功能
Emmet：使用 Tab 自動補全HTML標籤
Markdown Preview：使用 Ctrl + shift + v預覽markdown文件
使用shift + alt + up/down可以向上/下複製選中內容或者當前行
常用插件
View In Browser
- 預覽頁面（ctrl+F1）
vscode-icons
- 側欄的圖標，對於一個有視覺強迫症的人是必須要的
HTML Snippets
- 支持HTML5的標籤提示
HTML CSS support
- css自動補齊
JS-CSS-HTML Formatter
格式化
jQuery Code Snippets
jquery 自動提示
Path Autocomplete
- 路徑自動補齊
Npm Intellisense
- npm包代碼提示
ESLint
- 檢測JS必備
Debugger for Chrome
- 方便調試
Auto Rename Tag
- 自動同步修改標籤
Bootstrap 3 Snippets
- bootstrap必備
Vue 2 Snippets
- vue必備
background
- 一個萌萌的插件，可以自己設置vsc的背景圖
常用快捷鍵
（在快捷鍵部分， ⌘ 指 Command 鍵，⇧ 指 Shift 鍵，⌃ 指 Control 鍵，⌥ 指 OpTIon/Alt 鍵。）
這裏主要就是實驗F1上的快捷鍵，一些我認爲沒用的我就不列出來了。
向上（下）複製行 shift + alt + top（down）
向上（下）移動行* alt + top（down）*
新建一個窗口 ctrl + shift + N
行增加縮進： ctrl + ［
行減少縮進 * ctrl + ］**
裁剪尾隨空格（去掉一行的末尾那些沒用的空格）： ctrl + shift + x
強烈建議把這個啓用，這樣保存的時候就會自動刪掉那些沒用的空格，在很多公司的代碼規範裏都是不允許存在這些空格的。
顯示隱藏側邊欄：ctrl + B
拆分編輯器（最多拆分成三塊）：ctrl + /按ctrl + 1（2，3）就可以在拆分後的編輯器裏切換
方法縮小ctrl +（-）
關閉編輯器 ctrl + W（F4）
切換編輯器 ctrl + shift + left（right）
也可以用 ctrl+1（2，3）
顯示和隱藏側邊欄 ctrl + B
切換全屏 F11
切換自動換行 alt + Z
顯示Git ctrl + shift + G
前提是你的項目必須是一個git項目
這個還是很有用的，有時候我們的屏幕不夠大，可是代碼沒有自動換行，所以被遮住的代碼就會看不到，但是你用這個快捷鍵就可以換行看到了。這個我是在用戶設置裏面設置成自動換行的。
修改用戶設置
把默認的用戶設置成適合我們自己的還是很重要的。
也很簡單，文件 – 首選項 – 用戶設置，然後出來左邊的默認設置是不能改的，需要在右邊setTIngs.json中覆蓋。
修改快捷鍵
文件 – 首選項 – 鍵盤快捷方式，和修改用戶設置的時候一樣，找到你要修改的快捷鍵名字，右邊覆蓋就可以了，一些還沒有綁定快捷鍵的功能可以在左邊的最下面看到，然後快捷鍵的名字就是這個。
新建文件
右鍵 – 新建文件，文件後綴名自己加上，自動識別。
新建.html文件後，空白頁，沒有頁面默認代碼結構，此時在編輯區輸入html，回車第二個或者第三個即可。