前端常用的Vscode插件🔖
文章目錄
- 前端常用的Vscode插件🔖
- 1. Chinese (Simplified) (簡體中文) Language Pack for Visual Studio Code -- Vscode中文插件
- 2. Code Runner -- 快速運?調試代碼
- 3. Live Server -- 實時重新加載本地開發服務器
- 4. Image preview -- 圖片圖像預覽
- 5. Color Highlight -- 顏色設置明顯
- 6. Turbo Console Log -- 快速Log工具
- 7. Console Ninja -- Log顯示在Vscode頁面中
- 8. Highlight Matching Tag -- 顯示標簽作用范圍
- 9. Auto Close Tag -- 自動閉合雙向改變標簽
- 10. any-rule -- 正則庫
- 11. DotENV --.env文件高亮
- 12. Git History -- Git相關
1. Chinese (Simplified) (簡體中文) Language Pack for Visual Studio Code – Vscode中文插件
Vscode中文插件，這個一般都會裝，這里不敘述。
2. Code Runner – 快速運?調試代碼
Code Runner插件主要就是可以快速運?調試代碼，?需配置繁雜的環境，直接通過此插件就可以直接運行對應語言的代碼，非常適合學習或測試各種開發語言。
3. Live Server – 實時重新加載本地開發服務器
Live Server能夠啟動一個具有靜態和動態頁面實時重新加載功能的本地開發服務器
4. Image preview – 圖片圖像預覽
Image preview可以在引入圖片左側導航條顯示圖像預覽
5. Color Highlight – 顏色設置明顯
Color Highlight可以讓設置顏色直接顯示在color位置，更加明顯，方便開發。
6. Turbo Console Log – 快速Log工具
Turbo Console Log這個插件對于經常要log的調試的可以說是十分好用的。
選中變量之后，使用快捷鍵：ctrl + alt + L 就可以直接log這個變量。
其他快捷鍵：shift + alt + c 注釋
? shift + alt + d 刪除Turbo Console Log
? shift + alt + u 取消注釋
注意這些快捷鍵是對當前代碼頁面所有Turbo Console Log起效果，也就是說在你開發完當前頁面后，就可以shift + alt + d直接刪除當前頁所有Turbo Console Log。
7. Console Ninja – Log顯示在Vscode頁面中
Console Ninja插件，先說結論很好用的一個插件，可以直接在Vscode內部就看到log的東西，配合上面Turbo Console Log 簡直是完美的搭配。但是有一點不好的就是，很多時候都會失效，這個具體原因也不是很清楚。下面的Gif圖為官方配圖，我目前使用看來，一部分項目能使用，一部分就是用不了。
8. Highlight Matching Tag – 顯示標簽作用范圍
Highlight Matching Tag插件主要作用是給標簽前后設置下劃線好區分作用范圍。這個在寫界面的時候，更加方便了去找到對應的范圍。
9. Auto Close Tag – 自動閉合雙向改變標簽
Auto Close Tag編寫 HTML 或者 JSX 代碼過程中，如果我們有這樣的需求：輸入<div> 時自動補全為<div></div>；將<div>修改為<section>，與之匹配的標簽名稱也隨之更改,最終成為<section></section>。雖然 H5 中對未閉合的標簽在有些時候可以顯示，但還是鼓勵所有標簽都能主動閉合。Auto Close Tag能幫我們在編碼過程快速實現這兩個訴求。
10. any-rule – 正則庫
any-rule一個正則庫，大部分正則都可以從這里面找到。
11. DotENV --.env文件高亮
DotENV在編輯.env文件時添加了便捷的語法高亮顯示功能
12. Git History – Git相關
Git History查看git日志，文件歷史，比較分支或提交
)
