Visual Studio Code前端Vue開發工具VS Code與調試

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開發與調試工具--開發工具篇

http://www.javashuo.com/article/p-neomouon-gn.html  Vuejs之開發環境搭建

http://www.javashuo.com/article/p-vbglsetq-dz.html   插件列表

https://blog.csdn.net/chuxuan0215/article/details/90664529  解決 VScode 在打開新文件是覆蓋上一個窗口的問題(親測可用)