本篇文章先介紹下常見的插件~~~~

VSCode常用的插件

vscode之所以被稱為宇宙第一神器，其中豐富的插件功不可沒，安裝起來超級簡單，給我們開發(fā)帶來了極大的便捷。 注意，新手學(xué)習(xí)期間，不建議安裝形形色色的插件，用到啥就安裝啥。因?yàn)橛行┎寮絭ue學(xué)習(xí)的時(shí)候引起沖突，所以這里介紹幾個(gè)常用的插件。

• Chinese (Simplified) 漢化

• Auto Rename Tag

• One Dark Pro 顏色主題

• 格式化代碼（vscode系統(tǒng)自帶）

• open in browser 瀏覽器預(yù)覽頁面

• Live Server 實(shí)時(shí)預(yù)覽（推薦）

• vscode-icons 設(shè)置文件圖標(biāo)主題

• Easy LESS 編譯less文件

• 會了吧 學(xué)習(xí)單詞插件 （可以使用）

1. Chinese (Simplified)

vscode下載完畢是英文版的，先安裝這個(gè)插件，改為中文版，所以是我們第一個(gè)安裝的插件。
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-beJjilzn-1664096496987)(https://cdn.jsdelivr.net/gh/lefengpiaoling/piclefeng/img/vscode-chinese.png)]

2. Auto Rename Tag

修改開始標(biāo)簽，結(jié)束標(biāo)簽跟著自動(dòng)變化，比較好用。

3. One Dark Pro 顏色主題

我比較喜歡的一個(gè)顏色主題

頁面的效果：
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-jmM3IWOo-1664096496996)(https://cdn.jsdelivr.net/gh/lefengpiaoling/piclefeng/img/one-effect.png)]

4. 格式化代碼（vscode系統(tǒng)自帶）

現(xiàn)在格式化代碼的插件非常多，比如Prettier等等。

剛開始學(xué)，不太建議安裝插件，先自己手寫規(guī)范的語法格式

但是html標(biāo)簽嵌套比較多，可能需要自動(dòng)格式化比較好，所以我們可以利用vscode自動(dòng)的功能格式化代碼，暫且不用格式化插件，自動(dòng)保存照樣能格式化代碼。>

（1） 點(diǎn)擊管理按鈕—選擇里面的設(shè)置命令

vscode 管理–設(shè)置
（2）選擇用戶 —> 文本編輯器 —> 正在格式化 —> 勾選如下圖的2個(gè)按鈕

這樣，我們不用安裝插件，就可以自動(dòng)保存自動(dòng)格式化代碼了。

5. open in browser 瀏覽器預(yù)覽頁面

編寫完代碼，需要瀏覽器預(yù)覽，可以安裝這個(gè)插件

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-Np0DiTzD-1664096497002)(https://cdn.jsdelivr.net/gh/lefengpiaoling/piclefeng/img/vscode-open2.png)]

vscode 瀏覽器打開頁面

6. Live Server 實(shí)時(shí)預(yù)覽（推薦）

剛才的插件是可以預(yù)覽我們的頁面，但是改完代碼，瀏覽器必須要重新刷新，比較麻煩，因此推薦各位小伙伴安裝 live server 這個(gè)插件，修改完代碼，自動(dòng)更新瀏覽器，爽歪歪~~~

live server 自動(dòng)更新頁面
小技巧：

剛開始學(xué)習(xí)前端，基本頁面很少，可以左邊編輯器，右邊瀏覽器，這樣編寫完畢代碼，保存完畢后，瀏覽器自動(dòng)更新了。
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-t55U8wyG-1664096497003)(https://cdn.jsdelivr.net/gh/lefengpiaoling/piclefeng/img/live2.png)]
小技巧
注意點(diǎn)：

使用live server 各位小伙伴要注意， 先用vscode 打開 文件所在的目錄文件夾哦。

7. vscode-icons 設(shè)置文件圖標(biāo)主題

可以很清楚看到文件對用的圖標(biāo)。

只是為了看文件更加直觀哈

8. Easy LESS 編譯less文件

我們寫的less不能直接引入到html文件中， 通過這個(gè)插件可以自動(dòng)幫我們生成 css文件

9. 會了吧

是的，你沒看錯(cuò)，這個(gè)插件的名字就是 《會了吧》

你是不是還在為英文單詞不認(rèn)識而發(fā)愁，是不是認(rèn)識不會讀而煩心， 這個(gè)插件你值得擁有。

里面會有單詞介紹，點(diǎn)擊還會有發(fā)音，喜歡吧。

會了吧插件
好的，這篇文章，先介紹到這里， 學(xué)到vue的同學(xué)肯定就安裝vetur、eslint 等插件了，下章節(jié)將講解vscode快捷鍵的使用。

總結(jié)

以上是生活随笔為你收集整理的前端VSCode常用插件安装和使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。