快捷導(dǎo)航

前端Visual?Studio?Code安裝配置教程之下載、漢化、常用組件及基本操作

更新時(shí)間：2025年11月21日 10:36:05 作者：jyan_敬言

Visual Studio Code是微軟推出的一個(gè)強(qiáng)大的代碼編輯器,功能強(qiáng)大,操作簡單便捷,還有著良好的用戶界面,設(shè)計(jì)得很人性化,這篇文章主要介紹了前端Visual?Studio?Code安裝配置教程之下載、漢化、常用組件及基本操作的相關(guān)資料,需要的朋友可以參考下

一、Visual Studio Code下載

下載官網(wǎng)：https://code.visualstudio.com/ 或者點(diǎn)擊這里進(jìn)行下載

進(jìn)入官網(wǎng)后點(diǎn)擊右上角的Download

（可能會比較卡，稍等一會兒）出現(xiàn)以下界面

根據(jù)自己電腦的型號進(jìn)行選擇即可。

查看電腦型號：右鍵點(diǎn)擊“此電腦”，選擇“屬性”

根據(jù)指引進(jìn)行安裝即可（可以改變安裝路徑）

二、漢化

雙擊打開vscode，進(jìn)入以下界面：

找到左側(cè)欄中的插件，點(diǎn)擊進(jìn)入搜索框，輸入“Chinese”，點(diǎn)擊install進(jìn)行安裝。

安裝完成后，會出現(xiàn)重啟選項(xiàng)，Chinese插件要重啟后才能實(shí)行。

重啟完成后，就漢化成功了。

三、常用組件

下面講解中會用到的代碼：

<html>
    <head>
        <title> 這是頁面標(biāo)題 </title>
    </head>
    <body>
        前端指的是用戶在使用網(wǎng)站或應(yīng)用程序時(shí)直接
        
看到和與之交互的部分，也稱為“客戶端”。
        它負(fù)責(zé)將數(shù)據(jù)以視覺化、交互化的方式呈現(xiàn)給用戶，并處理用戶的輸入行為（如點(diǎn)擊、滑動、輸入等）。
        簡單來說，前端就是用戶眼前的一切。
    </body>
</html>

上面進(jìn)行漢化的Chinese組件幫助我們將英語轉(zhuǎn)換為中文，現(xiàn)在再介紹幾組其它的常用組件，方便前端開發(fā)。安裝方法同上。

1、Auto Rename Tag

Auto Rename Tag 插件是一個(gè)高效的前端開發(fā)工具，主要用于：自動同步修改 HTML/XML/JSX 標(biāo)簽的開閉標(biāo)簽，避免因手動修改導(dǎo)致標(biāo)簽不匹配的問題。

核心功能：

標(biāo)簽雙向同步
修改開始標(biāo)簽(如< div>)時(shí)，自動同步更新閉合標(biāo)簽(< /div>)。
修改閉合標(biāo)簽時(shí)，同樣反向同步更新開始標(biāo)簽。
簡單來說：當(dāng)我們想要修改雙標(biāo)簽時(shí)，只用修改該標(biāo)簽的其中一個(gè)，另一個(gè)會自動改變?yōu)閷?yīng)的標(biāo)簽。
多語言支持
支持HTML、XML、JSX/TSX(React)Svelte 等基于標(biāo)簽的語法。
精準(zhǔn)作用域
只在標(biāo)簽內(nèi)部修改時(shí)觸發(fā)，避免誤操作(如字符串中的符號被錯誤修改)。

2、view-in-browser

View in Browser 插件是一個(gè)輕量級的前端開發(fā)工具，主要用于快速在瀏覽器中預(yù)覽 HTML 文件，并支持實(shí)時(shí)刷新功能。在使用其他方法預(yù)覽時(shí)步驟繁瑣，比如手動保存后切換到瀏覽器刷新頁面，這時(shí)，使用該插件就便利很多。
當(dāng)安裝了該插件之后，在程序頁面右擊，會增加兩個(gè)選項(xiàng)：

當(dāng)我想要進(jìn)行預(yù)覽時(shí)，只需點(diǎn)擊“View In Browser”即可。會直接跳轉(zhuǎn)到瀏覽器界面顯示：

3、Live Server

Live Server 是一個(gè)專為前端開發(fā)設(shè)計(jì)的實(shí)時(shí)本地服務(wù)器插件，其核心作用是通過熱更新（Hot Reload） 和 本地服務(wù)器環(huán)境 顯著提升開發(fā)調(diào)試效率。

核心功能：

實(shí)時(shí)熱更新(Live Reload)
保存即刷新:修改 HTML/CSS/JS 文件后，瀏覽器自動刷新(無需手動操作)。
CSS 無刷新注入:修改 CSS 時(shí)僅更新樣式，保持頁面狀態(tài)(如表單輸入內(nèi)容)。
性能優(yōu)化:增量更新資源，避免整頁重載。
本地服務(wù)器環(huán)境
http://協(xié)議支持:通過 http://localhost:5588訪問項(xiàng)目(解決 file://協(xié)議下的跨域限制)。
API模擬開發(fā):可配合Mock.js或JSON Server 實(shí)現(xiàn)前后端并行開發(fā)。
多設(shè)備同步調(diào)試
局域網(wǎng)訪問:同一網(wǎng)絡(luò)下的手機(jī)/平板可通過 |P 地址實(shí)時(shí)訪問(如 http://192.168.1.100:5500)多瀏覽器同步:支持 Chrome、Firefox 等同時(shí)連接，實(shí)時(shí)同步操作。

當(dāng)使用“View In Browser”進(jìn)行預(yù)覽后，又將程序修改了，這時(shí)在使用預(yù)覽，瀏覽器會仍舊停留在上一個(gè)內(nèi)容，需要刷新頁面才可以顯示新內(nèi)容。但有了Live Server 組件后，可以不用手動刷新，直接顯示新的內(nèi)容。
當(dāng)安裝Live Server 組件后，在程序頁面右擊，會增加兩個(gè)選項(xiàng)：