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