好多小夥伴正在踏入前端的學習路程， 這裡分享下小外掛或者小技巧~

聽說，視訊跟筆記一起看更搭配哦~~~

VSCode軟體常用的外掛

VSCode常用的快捷鍵

前端其他常用技巧/軟體

本篇文章先介紹下常見的外掛~~~~

一、VSCode常用的外掛

vscode之所以被稱為宇宙第一神器，其中豐富的外掛功不可沒，安裝起來超級簡單，給我們開發帶來了極大的便捷。注意，新手學習期間，不建議安裝形形色色的外掛，用到啥就安裝啥。因為有些外掛會到vue學習的時候引起衝突，所以這裡pink老師介紹幾個常用的外掛。

Chinese (Simplified) 漢化

Auto Rename Tag

One Dark Pro 顏色主題

格式化程式碼（vscode系統自帶）

open in browser 瀏覽器預覽頁面

Live Server 實時預覽（推薦）

vscode-icons 設定檔案圖示主題

Easy LESS 編譯less檔案

會了吧 學習單詞外掛 （可以使用）

1.Chinese (Simplified)

vscode下載完畢是英文版的，先安裝這個外掛，改為中文版，所以是我們第一個安裝的外掛。

中文外掛chinese

2.Auto Rename Tag

修改開始標籤，結束標籤跟著自動變化，比較好用。

autorenametag
3.One Dark Pro 顏色主題

我比較喜歡的一個顏色主題

頁面的效果：

4.格式化程式碼（vscode系統自帶）

現在格式化程式碼的外掛非常多，比如Prettier等等。

剛開始學，不太建議安裝外掛，先自己手寫規範的語法格式

但是html標籤巢狀比較多，可能需要自動格式化比較好，所以我們可以利用vscode自動的功能格式化程式碼，暫且不用格式化外掛，自動儲存照樣能格式化程式碼。

（1）點選管理按鈕---選擇裡面的設定命令

vscode 管理--設定
（2）選擇使用者 ---> 文字編輯器 ---> 正在格式化 ---> 勾選如下圖的2個按鈕

vscode自動格式化程式碼
這樣，我們不用安裝外掛，就可以自動儲存自動格式化程式碼了。

4.open in browser 瀏覽器預覽頁面

編寫完程式碼，需要瀏覽器預覽，可以安裝這個外掛

瀏覽器預覽頁面

vscode瀏覽器開啟頁面
6.Live Server 實時預覽（推薦）

剛才的外掛是可以預覽我們的頁面，但是改完程式碼，瀏覽器必須要重新重新整理，比較麻煩，因此推薦各位小夥伴安裝liveserver這個外掛，修改完程式碼，自動更新瀏覽器，爽歪歪~~~

liveserver自動更新頁面

小技巧：

剛開始學習前端，基本頁面很少，可以左邊編輯器，右邊瀏覽器，這樣編寫完畢程式碼，儲存完畢後，瀏覽器自動更新了。

小技巧

注意點：

使用liveserver各位小夥伴要注意，先用vscode開啟檔案所在的目錄資料夾哦。

7.vscode-icons 設定檔案圖示主題

可以很清楚看到檔案對用的圖示。

只是為了看檔案更加直觀哈

8.Easy LESS 編譯less檔案

我們寫的less不能直接引入到html檔案中，通過這個外掛可以自動幫我們生成css檔案

8.會了吧

是的，你沒看錯，這個外掛的名字就是 <會了吧>

你是不是還在為英文單詞不認識而發愁，是不是認識不會讀而煩心，這個外掛你值得擁有。

裡面會有單詞介紹，點選還會有發音，喜歡吧。

會了吧外掛

好的，這篇文章，先介紹到這裡，學到vue的同學肯定就安裝vetru、eslint等外掛了，但是本章節先介紹pink老師視訊裡面推薦各位同學使用的外掛。

本文來自學習小花，作者：aixuexi666888，轉載請註明原文連結：https://www.cnblogs.com/aixuexi666888/p/15585839.html