vscode使用教程

vscode使用教程是什么呢？不知道的小伙伴來看看小編今天的分享吧!

一、什么是vscode？

VSCode是一款免費(fèi)開源的現(xiàn)代化輕量級代碼編輯器，支持幾乎所有主流的開發(fā)語言的語法高亮、智能代碼補(bǔ)全、自定義熱鍵、括號匹配、代碼片段、代碼對比 Diff、GIT 等特性，支持插件擴(kuò)展，并針對網(wǎng)頁開發(fā)和云端應(yīng)用開發(fā)做了優(yōu)化。軟件跨平臺支持 Win、Mac 以及 Linux。

二、基本使用

1、直接拖入項(xiàng)目文件夾進(jìn)入軟件

方式一： 拖入工作區(qū)（這樣的話，會(huì)保留當(dāng)前以及打開的項(xiàng)目文件夾）

方式二： 拖入工作區(qū)右邊的窗口，這樣的話會(huì)讓拖入的窗口覆蓋掉原本以及打開的窗口

2、在vscode里面創(chuàng)建項(xiàng)目文件夾

3、格式化代碼

在代碼里面右鍵菜單，會(huì)彈出相應(yīng)的格式化等功能選項(xiàng)，也有定義引用查找等菜單。

4、在瀏覽器中打開網(wǎng)頁

1、以file文件協(xié)議形式打開文件

安裝插件：Open HTML in Default Browser

特點(diǎn)：

用默認(rèn)瀏覽器打開 HTML 文件

在資源管理器中，HTML 文件右鍵顯示 在瀏覽器中打開 菜單

在編輯器中，HTML 文件右鍵顯示

在瀏覽器中打開 菜單 ?可以同時(shí)打開多個(gè)頁面

在工作區(qū)項(xiàng)目上右鍵菜單就能看到在資源管理器中打開文件的選項(xiàng)

2、以服務(wù)器形式打開文件

方式一：

安裝live server 插件，點(diǎn)擊重新加載或者重啟vscode，然后鼠標(biāo)右鍵就可以在服務(wù)器上打開，

這種模式打開會(huì)自動(dòng)刷新頁面。

方式二：

1.按下快捷鍵：Ctrl+` 打開命令行終端，執(zhí)行cnpm install live-server -g

2.安裝好后每次要運(yùn)行只需要打開終端后執(zhí)行一下live-server即可

3.使用live-server是把整個(gè)網(wǎng)站打開到服務(wù)器上的。不管你當(dāng)前定位到哪一個(gè)目錄，他打開的都是默認(rèn)的首頁文件，如：index.html

4.如果你根目錄下全是文件夾，或者沒有index.html等默認(rèn)首頁文件，那么服務(wù)器就會(huì)顯示一些文件夾讓你選擇。

5.如果要關(guān)閉live-server那么只需要在控制臺執(zhí)行以下ctrl+c，然后輸入y確認(rèn)下即可關(guān)閉。

6.Live-server可以在任意項(xiàng)目根目錄下，打開終端窗口，然后輸入live-server即可讓當(dāng)前項(xiàng)目在服務(wù)器上打開執(zhí)行

7.在以服務(wù)器打開的模式下，我們更改了文件內(nèi)容后只要保存下，瀏覽器就會(huì)自動(dòng)的刷新，而不需要我們顯式的在瀏覽器里面刷新。

方式三：

也可以安裝http server插件，安裝完成后按下f1,然后輸入http會(huì)看到下面兩個(gè)選項(xiàng)，選擇with current file那個(gè)能夠創(chuàng)建一個(gè)服務(wù)器運(yùn)行當(dāng)前文件。另外一個(gè)會(huì)找當(dāng)前目錄下的index.html,然后打開它。

選擇一個(gè)后，會(huì)再讓你選擇在瀏覽器里面打開還是vscode里面打開。

其他：

也可以全局安裝此模塊【cnpm install http-server -g 】

安裝到全局后，在終端里面輸入hs就可以使用。

以上就是小編今天的分享了，希望可以幫助到大家。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com