vscode使用教程

一、什麼是vscode？

VSCode是一款免費開源的現代化輕量級程式碼編輯器，支援幾乎所有主流的開發語言的語法高亮、智慧程式碼補全、自定義熱鍵、括號匹配、程式碼片段、程式碼對比 Diff、GIT 等特性，支援外掛擴充套件，並針對網頁開發和雲端應用開發做了優化。軟體跨平臺支援 Win、Mac 以及 Linux。

二、基本使用

1、直接拖入專案資料夾進入軟體

方式一： 拖入工作區（這樣的話，會保留當前以及開啟的專案資料夾）

方式二： 拖入工作區右邊的視窗，這樣的話會讓拖入的視窗覆蓋掉原本以及開啟的視窗

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就可以使用。