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