vscode使用教程, 使用vscode的教程是什么?不知道小伙伴們今天來看看邊肖的分享吧!
1.什么是vscode?
VSCode是一款免費(fèi)開源的現(xiàn)代輕量級代碼編輯器,支持語法高亮、智能代碼完成、自定義熱鍵、括號匹配、代碼片段、代碼比較Diff、GIT等功能。幾乎所有主流開發(fā)語言,并支持插件擴(kuò)展。
并針對web開發(fā)和云應(yīng)用程序開發(fā)進(jìn)行了優(yōu)化。該軟件支持跨平臺的Win、Mac和Linux。
二、基本用途
1.直接拖動(dòng)到項(xiàng)目文件夾中進(jìn)入軟件。
方法1:拖動(dòng)到工作區(qū)中(在這種情況下,當(dāng)前和打開的項(xiàng)目文件夾將被保留)。
方法二:拖入工作區(qū)右側(cè)的窗口,這樣拖動(dòng)的窗口會(huì)覆蓋原來打開的窗口。
2.在vscode中創(chuàng)建一個(gè)項(xiàng)目文件夾。
3.格式化代碼
在代碼中右擊菜單,會(huì)彈出格式化等相應(yīng)的功能選項(xiàng),以及定義引用搜索等菜單。
4.在瀏覽器中打開網(wǎng)頁。
1.以文件協(xié)議的形式打開文件。
Install the plug-in: Open HTML in the default browser
特點(diǎn):
用默認(rèn)瀏覽器打開HTML文件。
在資源管理器中,右鍵單擊HTML文件以顯示在瀏覽器中打開的菜單。
在編輯器中,右鍵單擊會(huì)顯示HTML文件。
在瀏覽器中打開菜單可以同時(shí)打開多個(gè)頁面。
右鍵單擊工作區(qū)項(xiàng)目,查看在資源管理器中打開文件的選項(xiàng)。
2.作為服務(wù)器打開文件。
模式1:
安裝live server插件,單擊Reload或Restart vscode,然后右鍵單擊在服務(wù)器上打開它。
打開此模式將自動(dòng)刷新頁面。
模式2:
1.按快捷鍵:Ctrl打開命令行終端,執(zhí)行cnpm install live-server -g g。
2.安裝后,您只需要打開終端,并在每次想要運(yùn)行時(shí)執(zhí)行l(wèi)ive-server。
3.使用live-server就是將整個(gè)網(wǎng)站向服務(wù)器開放。不管你當(dāng)前在哪個(gè)目錄,他打開默認(rèn)的主頁文件,比如index.html。
4.如果你的根目錄滿是文件夾,或者沒有默認(rèn)的主頁文件如index.html,那么服務(wù)器會(huì)顯示一些文件夾供你選擇。
5.如果要關(guān)閉live-server,只需要在控制臺上執(zhí)行下面的ctrl c,然后輸入Y確認(rèn)即可。
6.Live-server可以在任何項(xiàng)目根目錄下打開一個(gè)終端窗口,然后進(jìn)入live-server使當(dāng)前項(xiàng)目在服務(wù)器上打開并執(zhí)行。
7.在服務(wù)器打開的模式下,我們只要保存文件內(nèi)容,瀏覽器就會(huì)在我們更改文件內(nèi)容后自動(dòng)刷新,不需要在瀏覽器中顯式刷新。
模式3:
您還可以安裝http服務(wù)器插件。安裝完成后,按f1,然后輸入http。您將看到以下兩個(gè)選項(xiàng)。選擇“使用當(dāng)前文件”以創(chuàng)建運(yùn)行當(dāng)前文件的服務(wù)器。
另一個(gè)將在當(dāng)前目錄中找到index.html并打開它。
選擇一個(gè)之后,將要求您選擇是在瀏覽器中還是在vscode中打開它。
其他:
也可以全局安裝這個(gè)模塊[cnpm install http-server -g]。
安裝到全局后,您可以在終端中輸入hs來使用它。
vscode使用教程,以上就是本文為您收集整理的vscode使用教程最新內(nèi)容,希望能幫到您!更多相關(guān)內(nèi)容歡迎關(guān)注。