vscode怎么使用? vscode基礎使用教程

visual studio code簡稱叫做vscode,在程序開發中使用到,既可以寫html、js的代碼,也可以寫后臺代碼。那么,visual studio code如何使用,以及自定義設置呢?

打開visual studio code之后,界面如圖所示。最上方的是菜單欄,左側的是快捷工具欄,設置按鈕就在左側的最下方文章源自四五設計網-http://www.133122.cn/37138.html

vscode怎么使用? vscode基礎使用教程-1文章源自四五設計網-http://www.133122.cn/37138.html

首先看頂部的菜單欄,File是對文件操作的菜單,如打開文件、文件夾等。Edit是編輯過程中的相關菜單,比如撤銷等。View是顯示或者隱藏哪些視圖窗口的菜單。Go是跳轉類的菜單,如轉定義等等。DebUG是調試相關的菜單。Help是幫助菜單文章源自四五設計網-http://www.133122.cn/37138.html

vscode怎么使用? vscode基礎使用教程-2文章源自四五設計網-http://www.133122.cn/37138.html

接著看左側的快捷工具欄,從上到下依次是,Explorer:當前打開的文件或者文件夾的列表窗口。Search:查找和替換窗口。Source Control:源碼管理的窗口,比如配合svn、git等源碼管理工具。Debug:調試窗口。Extensions:擴展插件窗口文章源自四五設計網-http://www.133122.cn/37138.html

vscode怎么使用? vscode基礎使用教程-3文章源自四五設計網-http://www.133122.cn/37138.html

在左側快捷工具欄的最下方,是設置按鈕,點擊之后,會出現一個彈出菜單,選擇Settings,就能在右側出現各種明細的設置選項。點開設置頁面后,首先看到的是間隔多少毫秒自動保存的設置項,接著是字號、字體的設置文章源自四五設計網-http://www.133122.cn/37138.html

vscode怎么使用? vscode基礎使用教程-4文章源自四五設計網-http://www.133122.cn/37138.html

接下來,演示如何創建一個html頁面。首先點擊左上角的【File】菜單,選擇【New File】就會出現一個空白的標簽頁,這樣的標簽頁還沒有存儲任何內容,也沒有存儲成物理文件,所以,書寫代碼的時候,沒有智能提示文章源自四五設計網-http://www.133122.cn/37138.html

vscode怎么使用? vscode基礎使用教程-5文章源自四五設計網-http://www.133122.cn/37138.html

這個時候,可以使用【Ctrl + S】組合鍵,或者,點擊【File】菜單下面的【Save】選項,保存文件到電腦的磁盤。在彈出的保存到磁盤位置的界面中,默認的文件類型是txt文本文件,注意要修改為.html結尾的文件,才是html網頁文件

vscode怎么使用? vscode基礎使用教程-6

vscode怎么使用? vscode基礎使用教程-7

當保存為html結尾的網頁格式文件之后,在文件的開始處,輸入一個感嘆號,再按一下 Tab 鍵,就能自動生成符合H5規范的html頁面框架內容了

vscode怎么使用? vscode基礎使用教程-8

vscode怎么使用? vscode基礎使用教程-9

以上就是vscode新手入門教程,希望大家喜歡。

繼續閱讀
我的微信
微信掃一掃
weinxin
我的微信
惠生活福利社
微信掃一掃
weinxin
我的公眾號
 
  • 本文由 四五設計網小助手 發表于 2023年12月5日09:59:44
  • 轉載請務必保留本文鏈接:http://www.133122.cn/37138.html

發表評論

匿名網友
:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

拖動滑塊以完成驗證