布局：左側是用于展示所要編輯的所有文件和文件夾的文件管理器，依次是`資源管理器`，`搜索`，`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 或者 http://www.49028c.com/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的背景圖

常用快捷鍵

　?。ㄔ诳旖萱I部分， ⌘ 指 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，回車第二個或者第三個即可。