建站
咨詢
售后
建站咨詢
新聞中心
本文翻譯自：https://learnvue.co/2021/01/the-7-best-vs-code-extensions-for-vue-developers/
在Visual Studio中添加合適的VS Code擴(kuò)展可以使得我們的開(kāi)發(fā)生活變得更輕松。
這些VS Code擴(kuò)展有助于格式化、可擴(kuò)展性、實(shí)施最佳實(shí)踐，從而讓開(kāi)發(fā)過(guò)程中許多容易遺漏的任務(wù)可以自動(dòng)化完成。它們也可以錦上添花，使我們的代碼看起來(lái)更漂亮/更容易編寫(xiě)。
作為Vue愛(ài)好者，我一直在為Vue開(kāi)發(fā)人員尋覓最好的VS Code擴(kuò)展。這7個(gè)就是我總結(jié)的最佳VS Code擴(kuò)展。
還不趕快來(lái)看一下！
1.Vetur
圖片
如果你從這7個(gè)VS Code擴(kuò)展中只選擇了一個(gè)下載，那一定是Vetur。
VS Code的Vue工具包提供了Vue特定的語(yǔ)法高亮、常見(jiàn)代碼段，以及每個(gè)Vue開(kāi)發(fā)人員都需要的更多內(nèi)容。
Vetur維護(hù)得很好，它甚至自帶Vue3 TypeScript支持。
關(guān)于Vetur最后只說(shuō)一句話，有它，絕對(duì)能讓你的開(kāi)發(fā)進(jìn)程更順利。
2.ESLint Plugin VueJS
圖片
大多數(shù)開(kāi)發(fā)人員都知道ESLint——最流行的linter工具之一，可幫助代碼與最佳實(shí)踐保持一致并在大型代碼庫(kù)中具有可讀性。
VueJS有它自己的ESLint插件來(lái)檢查單文件組件的語(yǔ)法。我認(rèn)為它是編寫(xiě)可維護(hù)和可擴(kuò)展代碼的最佳工具之一。
沒(méi)有什么比查看一些舊代碼，然后甚至不知道從哪里開(kāi)始調(diào)試更糟糕的了。
然而，不用慌！
因?yàn)橛蠩SLint，它不但可以幫助保持組織化，而且隨著不斷增加的Vue3支持，你將可以編寫(xiě)可擴(kuò)展的Vue項(xiàng)目。
3.Vue VSCode Snippets
圖片
Sarah Drasner的這個(gè)VSCode擴(kuò)展將為你節(jié)省大量的開(kāi)發(fā)時(shí)間。
它能為常用的Vue用例提供自動(dòng)填充的代碼片段。用它自己的話來(lái)說(shuō)……
Vue VSCode Snippets從Vue的實(shí)際使用角度關(guān)注開(kāi)發(fā)人員的人體工程學(xué)。包括我個(gè)人討厭打字的部分，還有樣板文件。
它非常適合編寫(xiě)快速SFC、Vue指令等內(nèi)容，并且訪問(wèn)生命周期鉤子真的非?？?。
4.Bookmarks
圖片
許多Vue開(kāi)發(fā)人員的VSCode擴(kuò)展在進(jìn)入大型項(xiàng)目之前并沒(méi)有真正展現(xiàn)出它們的全部潛力。
這正是Bookmarks的工作方式。此擴(kuò)展允許你在代碼中標(biāo)記和命名位置。然后，你可以在這些不同的bookmarks之間跳轉(zhuǎn)，來(lái)提高開(kāi)發(fā)速度。
現(xiàn)在你已經(jīng)不再需要仔細(xì)上下滾動(dòng)文件以找到放置某個(gè)特性的位置了。哦也！
5.Bracket Pair Colorizer
圖片
Bracket Pair Colorizer正如其名，接受匹配的括號(hào)并為它們提供獨(dú)特的匹配顏色。
雖然這只是一個(gè)小細(xì)節(jié)，但它確實(shí)可以在你需要修復(fù)嵌套錯(cuò)誤時(shí)提供幫助，并且在linter不工作時(shí)依然能提供幫助哦。
我也非常喜歡它的視覺(jué)效果——讓我的代碼色彩繽紛但又不會(huì)讓人分心。
絕對(duì)值得一試。
6.Auto Rename Tag
圖片
Auto Rename Tag這個(gè)VSCode擴(kuò)展有助于防止模板代碼中的錯(cuò)誤。
每當(dāng)你更改HTML括號(hào)對(duì)中的其中一個(gè)標(biāo)簽（開(kāi)始或者結(jié)束標(biāo)簽）時(shí)，Auto Rename Tag會(huì)——你猜對(duì)了——自動(dòng)重命名另一個(gè)。
這種小的優(yōu)化可以幫助防止出現(xiàn)很多錯(cuò)誤，尤其是在處理大型模板時(shí)。
7.NPM Intellisense
圖片
每當(dāng)你用JavaScript編寫(xiě)導(dǎo)入語(yǔ)句時(shí)，NPM Intellisense都會(huì)自動(dòng)完成npm模塊。
這樣你就不需要再花費(fèi)時(shí)間去記住npm模塊的確切名稱。我在許多項(xiàng)目中用過(guò)NPM Intellisense，真的很好用哦。
總結(jié)
總的來(lái)說(shuō)，有很多VS Code擴(kuò)展面向Vue開(kāi)發(fā)人員。
雖然你可能會(huì)覺(jué)得這7個(gè)擴(kuò)展乍一看似乎沒(méi)什么新花樣，但這些小的改變確確實(shí)實(shí)可以節(jié)省開(kāi)發(fā)時(shí)間。所以建議你至少嘗試一下，搞不好你會(huì)成為其中一個(gè)的擁躉哦。
新聞標(biāo)題：Vue開(kāi)發(fā)者不可不知的七個(gè)VSCode擴(kuò)展
本文來(lái)源：http://www.dlmjj.cn/article/dhegepi.html
