VSCode的使用設定以及VSCode外掛的安裝教學詳解

2020-08-29 15:47:06

設定篇

開啟設定介面

許多設定都需要在設定介面進行，所以想要設定第一步就應該是開啟設定介面。
1> 滑鼠操作開啟。File --> Preferences --> Settings

2> 介面左下角的設定圖示

開啟設定有的是程式碼檢視，有的不是，可以通過設定右上角的三個點進行切換。

tab鍵的縮排控制

VSCode預設的tab鍵是縮排4個空格，但是有很多時候我們需要修改這個縮排，如vue用ES6的時候縮排4個空格會報錯，這裡我們就可以修改這個設定。
首先就是開啟設定直接搜尋 tabSize 將後面的4改成2即可，

外掛篇

外掛安裝

安裝的外掛非常簡單，我是直接點右側的Extensions進行安裝的，安裝過程需要聯網。

開啟外掛管理頁面後，具體如下：

點選install就可以安裝了，安裝了之後 install就會變成下面這樣：

外掛列表：

SVN—(不解釋)
Vetur—— 語法高亮、智慧感知、Emmet等
包含格式化功能， Alt+Shift+F （格式化全文），Ctrl+K Ctrl+F（格式化選中程式碼，兩個Ctrl需要同時按著）
EsLint —— 語法糾錯
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 智慧提示當前專案所支援的樣式
vue

總結

到此這篇關於VSCode的使用設定以及VSCode外掛的安裝教學詳解的文章就介紹到這了,更多相關VSCode的使用設定及外掛安裝內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！