vscode安裝
進入vscode官網（https://code.visualstudio.com/Download）
vscode插件
安裝
進入vscode官網插件商店（https://marketplace.visualstudio.com/VSCode）
安裝Vetur插件，點擊install,會啟動vscode
vue相關插件
vetur 語法高亮、智能感知
VueHelper vue代碼碎片
Vue 2 Snippets vue2代碼碎片
wpy-beautify vue頁面美化
快捷鍵
所有快捷鍵設置：文件→首選項→鍵盤快捷方式
在當前行中間換行到下一行：ctrl+enter
當光標點擊到某一行時，默認選中全行，可以直接復制剪切
直接刪除某一行：shift+delete或者ctrl+shift+k 多行光標選擇：alt+鼠標左鍵 自動生成html結構和meta聲明：首先輸入“!”，然后按tab鍵 標簽自動補全：tab鍵 折疊所有代碼：ctrl+k、ctrl+0 拆分編輯器：ctrl+\ 查找框右邊的3個參數分別為：區分大小寫，全字匹配，使用正則 跳轉行號：ctrl+G 添加函數注釋：在函數上方輸入“/**”，然后點擊enter 格式化：alt+shift+f 注釋：ctrl+/ 全部保存：ctrl+k, 然后只按s一個鍵 向上移動一行：alt+↑ 向下移動一行：alt+↓ 向上復制一行：alt+shift+↑ 向下復制一行：alt+shift+↓ 查找：ctrl+F 替換：ctrl+H 文件夾中查找：ctrl+shift+f 可以在打開的文件夾中搜索所有文件內容
文件中替換：ctrl+shift+h 轉到定義：F12 轉到實現：ctrl+F12 打開文件夾：ctrl+k, ctrl+o 關閉文件夾：ctrl+k, 然后單按一個f 選中一段代碼，通過“ctrl+[”可以左移，“ctrl+]”可以右移安裝 vue-devtools 調試工具
vue-devtools是一款基於瀏覽器的vuejs應用的調試工具，支持Chrome、Firefox、Safari瀏覽器，用於調試vue應用，可以極大地提高我們的調試效率。
Vetur —— 語法高亮、智能感知、Emmet等
包含格式化功能， Alt+Shift+F （格式化全文），Ctrl+K Ctrl+F（格式化選中代碼，兩個Ctrl需要同時按着）
EsLint —— 語法糾錯
Debugger for Chrome —— 映射vscode上的斷點到chrome上，方便調試（配置有點麻煩，其實我沒用這個）
Auto Close Tag —— 自動閉合HTML/XML標簽
Auto Rename Tag —— 自動完成另一側標簽的同步修改
JavaScript(ES6) code snippets —— ES6語法智能提示以及快速輸入，除js外還支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各種包含js代碼文件的時間
Path Intellisense —— 自動路勁補全
HTML CSS Support —— 讓 html 標簽上寫class 智能提示當前項目所支持的樣式
VSCode 支持第三方插件下載
Auto Close Tag
Auto Rename Tag
CSS Peek
npm
npm Intellisense
Vetur
Vue 2 Snippets
vue-beautify
Path Intellisense
HTML Snippets
HTML CSS Support
https://www.jianshu.com/p/5408dccf29d6 VSCode 前端常用插件
鏈接：https://www.jianshu.com/p/cab79d188e42 Vue開發與調試工具--開發工具篇