目錄
一、前言
二、工具推薦
1.《Chinese (Simplified) (簡體中文) Language》
2.《ESLint》
3.《Git History》
4.vscode-icons?
5.Path Intellisense
6.《Vetur》
7.《GitLens — Git supercharged》
8.《Image preview》
9.Debugger for Chrome
10.Prettier
11.AnyRule?
13.Vue Language Features (Volar)
14.Vite
15.Code Spell Checker
16.Error Lens
17.Angular Language Service。
18.Angular Files
19.《小霸王》
一、前言
VSCode 是我們前端開發(fā)的一個強大的IDE，因此選擇趁手好用的插件能事半功倍，也能能更好地編碼以及獲得更絲滑的開發(fā)體驗。然后剩下的時間用來摸魚是很有必要滴。
二、工具推薦
1.《Chinese (Simplified) (簡體中文) Language》
首先呢，我先推薦的就是最基礎的語言包，沒辦法，英語水平太撈了哈哈哈，弄起來后就舒服多了，漢語yyds~。
2.《ESLint》
這個其實真的是又愛又恨，有時候一些寫法自己覺得很舒服，他就給你提示不規(guī)范，看個人開發(fā)習慣吧哈哈哈。
3.《Git History》
查看git的分支管理、提交記錄等。
4.vscode-icons?
該插件會基于文件擴展名在 the tree view 中的文件名旁添加圖標，讓你更容易地識別文件。
效果圖如下：
?5.Path Intellisense
該擴展可以自動補全代碼中的路徑和文件名。例如前端的靜態(tài)文件引入路徑填寫修改。
?
?效果圖如下：
6.《Vetur》
這個vue開發(fā)者必備的擴展就不多做解釋了，代碼高亮，補齊等等。
7.《GitLens — Git supercharged》
git團隊項目管理工具。
這個工具可以清楚的看見哪些bug是誰寫的，還有很多功能，也是團隊開發(fā)中必安的插件。
效果如下：
8.《Image preview》
圖片是否正確引入的顯示工具，在圖片連接上按住ctrl，鼠標懸浮即可看見是否正確找到路徑下的圖片文件，非常有用！
效果如下：
9.Debugger for Chrome
映射vscode上的斷點到chrome上，方便調(diào)試。
10.Prettier
Prettier 是目前 Web 開發(fā)中最受歡迎的代碼格式化程序。安裝了這個插件，它就能夠自動應用Prettier，并將整個 JS 和 CSS 文檔快速格式化為統(tǒng)一的代碼樣式。如果你還想使用 ESLint，那么還有個 Prettier – Eslint 插件，你可不要錯過咯。
11.AnyRule?
這是一個用來快速檢索常用正則表達式的插件，希望能給大家在繁忙的開發(fā)過程中帶來一丁點的效率提升。
?
?效果圖如下：
13.Vue Language Features (Volar)
相信使用 VSCode 開發(fā) Vue2 的同學一定對 Vetur 插件不會陌生，作為 Vue2 配套的 VSCode 插件，它的主要作用是對 Vue 單文件組件提供高亮、語法支持以及語法檢測。
而隨著 Vue3 正式版發(fā)布，Vue 團隊官方推薦 Volar 插件來代替 Vetur 插件，不僅支持 Vue3 語言高亮、語法檢測，還支持 TypeScript 和基于 vue-tsc 的類型檢查功能。
14.Vite
Vite 插件可以讓我們打開項目后，就能自動啟動開發(fā)服務器，允許開發(fā)者無需離開編輯器即可預覽和調(diào)試應用。支持一鍵啟動、構建和重啟項目。
15.Code Spell Checker
Code Spell Checker 是在VSCode中的一款插件，能夠幫助我們檢查單詞拼寫是否出現(xiàn)錯誤，檢查的規(guī)則遵循 camelCase （駝峰拼寫法）。
16.Error Lens
可以將代碼中不符合規(guī)范或者邏輯不通順的錯誤提示信息展示在代碼行內(nèi)?。
?
?效果圖如下：
17.Angular Language Service。
超好用的從模板 html F12一鍵定位變量定義位置.。
18.Angular Files
使用angular框架開發(fā)項目的同學，可以安裝一鍵生成angular需要的文件。
19.《小霸王》
在線支持幾十款游戲，實乃上班娛樂摸魚的必備插件?。。。。?/p>
上有超級瑪麗下有坦克大戰(zhàn) 開箱即用 點開即玩 可放大放小 娛樂無窮?。。?！
就先介紹這幾款常用的插件，讓大家更好地編碼和獲得更絲滑的開發(fā)體驗。也歡迎各位朋友補充推薦哈。
如果文章對你有所幫助，??關注+點贊??鼓勵一下！博主會持續(xù)更新。。。。
來源于：程序員摸魚導航
往期回顧
?前端vscode格式化配置文章來源：http://www.zghlxwxcb.cn/news/detail-407814.html
?前端vscode必備插件(強烈推薦)文章來源地址http://www.zghlxwxcb.cn/news/detail-407814.html
到了這里，關于前端vscode必備插件推薦的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
