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