新手如何搭建VSCode網頁開發環境

VScode是微軟開發的一款輕量級,開源代碼編輯器,可以使用其進行各項前端程序的開發和調試。本文主要面向編程新手提供編程環境搭建的幫助和建議。

1.下載和安裝VSCode

下載

VSCode下載地址:https://code.visualstudio.com/,點擊Download按鈕,選擇適合你計算機操作系統的類型的安裝包下載即可。新購置的計算機大部分都是64位的操作系統,建議下載64位安裝包,部分win7系統是32位的建議下載32位的安裝包。

安裝

VSCode的安裝非常簡單,只要根據軟件安裝提示,點擊“下一步”和完成即可。

2.VSCode漢化

VSCode這款軟件對中文使用這非常友好,我們可以通過安裝中文插件的方式實現軟件的漢化。

在這裏插入圖片描述

在輸入框中輸入“ Chinese (Simplified) Language ”; 回車搜索漢化插件; 找到之後點擊“install” 按鈕安裝即可。我的機器上是已經安裝好了,因此沒有install按鈕。

在這裏插入圖片描述

**【注意】**安裝完成之後,關閉VSCode軟件,重啓即可。注意,如果不重啓漢化的效果是看不到的。

3.安裝打開默認瀏覽器插件

1)打開VScode插件商城

在這裏插入圖片描述

2)在輸入框中輸入“ Open in Browser ”; 回車搜索打開默認瀏覽器插件; 找到之後點擊“install” 按鈕安裝即可。我的機器上是已經安裝好了,因此沒有install按鈕。
在這裏插入圖片描述

安裝完成之後,重啓VSCode,打開一個HTML文件,右鍵鼠標,彈出的菜單欄中會出現“Open Defualt Browser” 打開默認瀏覽器 和“ Open In Other Browsers”打開其他瀏覽器兩個選項。

在這裏插入圖片描述

3)默認瀏覽器修改位Chrome谷歌瀏覽器。

大部分計算機的默認瀏覽器都是IE或者其他瀏覽器。但在進行網頁或者其他前端程序開發時通常推薦使用的都是谷歌Chrome瀏覽器。

修改默認瀏覽器:選擇文件—首選項—設置,在搜索欄輸入open-in-browser.default,出現以下在編輯框中編輯 ,在編輯框中輸入“Chrome”。重啓VSCode,即可。

在這裏插入圖片描述

4.安裝Live Server插件

Live Server插件是一款特別使用的插件,它可以幫我我們實時刷新瀏覽器。當我們修改完HTML代碼之後,只要保存修改,就可以在瀏覽器裏面實時查看修改的效果。

1)打開插件商城

在這裏插入圖片描述

2)搜索“Live Server”插件,安裝

在這裏插入圖片描述

3)Live Server插件安裝成功之後,重啓VSCode,打開一個HTML文件,右鍵鼠標,彈出的菜單欄中會出現“Open with Live Server” 打開默認瀏覽器 和“ Stop Live Server”打開其他瀏覽器兩個選項。

在這裏插入圖片描述

5.使用VSCode創建項目

1)選定一個磁盤目錄創建一個文件夾或者直接使用已有的文件夾。

2)打開VSCode—>文件—>打開文件夾,找到剛剛創建或者需要使用的文件夾,確定就可以在VSCode的左側導航欄中發現引入的文件夾以及裏面已有的文件。

3)創建HTML文件。選定要添加文件的目錄,右鍵“新建文件”,文件命名時需要添加後綴。比如創建HTML文件,應命名爲” XXXX.html“

6.VSCode常用快捷鍵

1) !+enter : 快速生稱html代碼框架

2) shift+alt+向下的方向鍵: 向下複製當前行

3) shift+alt+向上的方向鍵: 向上複製當前行

4) ctrl+S: 保存

5)shift+alt+F: 格式化代碼

6) ctrl+F: 查找和替換

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章