下載與安裝Visual Studi Code

VSCode的官方網址：https://code.visualstudio.com/

選擇與自己電腦系統對應的即可

下載完成之後就安裝（只需要注意選擇安裝路徑即可）

VSCode的常用設定

使用Ctrl+滑鼠滑輪改變字型大小

在搜尋欄上輸入mouse再選擇Text Editor

自動儲存編輯（與Idea不同，強烈建議設定 ）

在Idea裡面我們編輯過後工具都是會自動幫我們儲存編輯內容，但在VSCode裡面我們編輯過後的內容是不會自動幫我們儲存的，我們需要手動儲存或者Ctrl+s快捷鍵

下面就是設定在VSCode裡面自動儲存編輯內容的配置步驟。

一般選擇afterDelay

第四步的1000就是在編輯後1000毫秒自動儲存我們的內容。

自動儲存的其他模式：

OnFocusChange： 編輯器是去焦點時自動儲存檔案，比如說你打開了多個檔案，你編輯好了A，然後切換到B檔案，那麼此時A檔案會自動儲存。

OnWindowChange：視窗失去焦點時會自動儲存檔案。也就是說你從VSCode切換到其他軟體時會自動儲存檔案。

新增瀏覽器外掛

直接點選install安裝即可

然後我們在html編輯頁面右鍵

一般選擇第一個Open In Default Browser

第一次開啟的時候選讓我們選擇預設的瀏覽器，之後就不用選擇了。會預設開打我們選擇的瀏覽器

Open In Other Browsers

也可以直接Atl+B檢視檢視效果

格式化程式碼的快捷鍵的設定

然後在輸入欄輸入format document

這裡我選擇用和Ideal中一樣的快捷鍵Atl+Ctrl+L

我們就把滑鼠放到Command中的一個 在最前面有個修改圖示，點選修改，然後選擇我們自己的想設定的快捷鍵，最後回車就行了。

修改註釋快捷鍵

第一步一樣，選擇keyboard Shortcuts

然後輸入comment

選擇我們的行註釋 Toggle Line Comment修改即可

“新建”專案

VSCode這裡和我們的IDEA不一樣，不能直接建立新的HTML檔案，只能通過我們在工具內開啟資料夾的形式來讀取HTML檔案。

在左上角點選File再點選Open Folder選擇們已建立好的專案匯入即可。

常用VSCode外掛推薦

Auto Rename Tag

　自動完成另一側標籤的同步修改

Bracket Pair Colorizer 2

　　給括號加上不同的顏色，便於區分不同的區塊，使用者可以定義不同括號型別和不同顏色

Debugger for Chrome

對映vscode上的斷點到chrome上，方便除錯

HTML CSS Support

智慧提示CSS類名以及id

JavaScript(ES6) code snippets

　ES6語法智慧提示，以及快速輸入，不僅僅支援.js，還支援.ts，.jsx，.tsx，.html，.vue，省去了配置其支援各種包含js程式碼檔案的時間