本文翻譯自：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è)的擁躉哦。