一、什麼是vscode**
Visual Studio Code (簡稱 VS Code / VSC) 是一款免費開源的現代化輕量級代碼編輯器，支持幾乎所有主流的開發語言的語法高亮、智能代碼補全、自定義熱鍵、括號匹配、代碼片段、代碼對比 Diff、GIT 等特性，支持插件擴展，並針對網頁開發和雲端應用開發做了優化。軟件跨平臺支持 Win、Mac 以及 Linux。
vscode 官網： https://code.visualstudio.com/
二、Vscode版本
當前最新版本 1.27 2018年8月
版本列表：https://code.visualstudio.com/updates/v1_27
三、Vscode下載
下載地址：https://code.visualstudio.com/Download
可下載.zip解壓版，下載解壓後即可使用。【其是用electron打包的】
也可下載安裝版可執行程序，安裝後很多東西都不需要你自己配置了。
四、漢化vscode
按f1 搜索 Configore Display Language 設置 zh-cn 關閉軟件重啓。
注意：
如果重啓後還是英文的，那麼在商店查看已安裝的插件，把中文插件Chinese(simplified) 重新安裝一遍，然後重啓軟件即可。
漢化成功：
五、幾個常用命令說明
注意
1.Ctrl+shift+F 在文件中查找，可以同時替換。還可以指定在什麼文件中，同時指定要排除什麼文件等。
2. 通過快捷鍵Ctrl+`後可以將命令窗口打開在vscode中，使用起來就比較方便了。
3.我們安裝vscode後，可以直接在任意一個項目目錄下，鼠標右鍵然後將這個項目在服務器上打開。（如果你已經有打開了一個窗口，那麼他會打開一個新窗口）
六、左邊圖標說明
七、基本使用
1.直接拖入項目文件夾進入軟件
方式一： 拖入工作區（這樣的話，會保留當前以及打開的項目文件夾）
方式二： 拖入工作區右邊的窗口，這樣的話會讓拖入的窗口覆蓋掉原本以及打開的窗口
（這時vscode會問你是否保存一個文件，用來保存原本工作區信息，以便下次打開此文件）
備註：對於左側的文件夾可以直接使用快捷鍵複製粘貼等。
2.在vscode裏面創建項目文件夾
3.格式化代碼
在代碼裏面右鍵菜單，會彈出相應的格式化等功能選項，也有定義引用查找等菜單。
4.在瀏覽器中打開網頁
1.以file文件協議形式打開文件
安裝插件：Open HTML in Default Browser
特點
- 用默認瀏覽器打開 HTML 文件
- 在資源管理器中，HTML 文件右鍵顯示 在瀏覽器中打開 菜單
- 在編輯器中，HTML 文件右鍵顯示
- 在瀏覽器中打開 菜單 可以同時打開多個頁面
我們在工作區項目上右鍵菜單就能看到在資源管理器中打開文件的選項
2.以服務器形式打開文件
方式一：
安裝live server 插件，點擊重新加載或者重啓vscode，然後鼠標右鍵就可以在服務器上打開，
這種模式打開會自動刷新頁面。
方式二：
1.按下快捷鍵：Ctrl+` 打開命令行終端，執行cnpm install live-server -g
2.安裝好後每次要運行只需要打開終端後執行一下live-server即可
3.使用live-server是把整個網站打開到服務器上的。不管你當前定位到哪一個目錄，他打開的都是默認的首頁文件，如：index.html
4.如果你根目錄下全是文件夾，或者沒有index.html等默認首頁文件，那麼服務器就會顯示一些文件夾讓你選擇。
如：
5.如果要關閉live-server那麼只需要在控制檯執行以下ctrl+c，然後輸入y確認下即可關閉。
6.Live-server可以在任意項目根目錄下，打開終端窗口，然後輸入live-server即可讓當前項目在服務器上打開執行
7.在以服務器打開的模式下，我們更改了文件內容後只要保存下，瀏覽器就會自動的刷新，而不需要我們顯式的在瀏覽器裏面刷新。
方式三：
也可以安裝http server插件，安裝完成後按下f1,然後輸入http會看到下面兩個選項，選擇with current file那個能夠創建一個服務器運行當前文件。另外一個會找當前目錄下的index.html,然後打開它。
選擇一個後，會再讓你選擇在瀏覽器裏面打開還是vscode裏面打開。
其他
你也可以全局安裝此模塊【cnpm install http-server -g 】
安裝到全局後：在終端裏面輸入hs就可以使用。
八、插件安裝
安裝與卸載
- 安裝： 在左邊最下面是哪個圖標點擊搜索插件進行安裝即可。
- 卸載： 同樣的地方找到插件，然後進行卸載即可。
如果安裝了某個插件後無法看到效果，那麼請重啓下vscode，或者重新加載
常用插件：
-
HTML Boilerplate
通過使用 HTML 模版插件，你就擺脫了爲 HTML 新文件重新編寫頭部和正文標籤的苦惱。你只需在空文件中輸入 html，選中html:5即可生成一個新的網頁文件，也可以輸入一個感嘆號 -
browser-plus
在編輯器內預覽HTML
通過開啓端口(10086)監聽當前打開項目的根目錄，在編輯器內預覽網站，省去了頻繁切換瀏覽器、編輯器看頁面效果，修改代碼後自動刷新頁面。
使用方法
Window Ctrl+F1 ，默認10086端口預覽網頁 -
CSS Peek
使用此插件，你可以追蹤至樣式表中 CSS 類和 ids 定義的地方。當你在 HTML 文件中右鍵單擊選擇器時，選擇“ Go to Definition 和 Peek definition ”選項，它便會給你發送樣式設置的 CSS 代碼。 -
Color Info
這個便捷的插件，將爲你提供你在 CSS 中使用顏色的相關信息。你只需在顏色上懸停光標，就可以預覽色塊中色彩模型的（HEX、 RGB、HSL 和 CMYK）相關信息了。 -
Auto Close Tag
自動閉合HTML/XML標籤 -
Auto Rename Tag
自動完成另一側標籤的同步修改 -
HTML Snippets
智能提示HTML標籤，以及標籤含義JavaScript(ES6) code snippetsES6語法智能提示，以及快速輸入，不僅僅支持.js，還支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各種包含js代碼文件的時間 -
Path Intellisense
自動提示文件路徑，支持各種快速引入文 -
jQuery Code Snippets
jQuery代碼智能提示 -
Icon Fonts
這是一個能夠在項目中添加圖標字體的插件。該插件支持超過 20 個熱門的圖標集，包括了 Font Awesome、Ionicons、Glyphicons 和 Material Design Icons。
自動編譯less文件爲css文件：
安裝插件 Easy LESS，保存自動編譯，不需要配置（默認編譯到當前目錄下）
如果需要編譯爲不同文件名的css文件，那麼在less文件的最上面加上一行註釋即可：// out: new-file.css