本文翻譯自：https://learnvue.co/2021/01/the-7-best-vs-code-extensions-for-vue-developers/

在Visual Studio中添加合適的VS Code擴展可以使得我們的開發(fā)生活變得更輕松。

這些VS Code擴展有助于格式化、可擴展性、實施最佳實踐，從而讓開發(fā)過程中許多容易遺漏的任務可以自動化完成。它們也可以錦上添花，使我們的代碼看起來更漂亮/更容易編寫。

作為Vue愛好者，我一直在為Vue開發(fā)人員尋覓最好的VS Code擴展。這7個就是我總結的最佳VS Code擴展。

還不趕快來看一下！

1.Vetur

圖片

如果你從這7個VS Code擴展中只選擇了一個下載，那一定是Vetur。

VS Code的Vue工具包提供了Vue特定的語法高亮、常見代碼段，以及每個Vue開發(fā)人員都需要的更多內(nèi)容。

Vetur維護得很好，它甚至自帶Vue3 TypeScript支持。

關于Vetur最后只說一句話，有它，絕對能讓你的開發(fā)進程更順利。

2.ESLint Plugin VueJS

圖片

大多數(shù)開發(fā)人員都知道ESLint——最流行的linter工具之一，可幫助代碼與最佳實踐保持一致并在大型代碼庫中具有可讀性。

VueJS有它自己的ESLint插件來檢查單文件組件的語法。我認為它是編寫可維護和可擴展代碼的最佳工具之一。

沒有什么比查看一些舊代碼，然后甚至不知道從哪里開始調(diào)試更糟糕的了。

然而，不用慌！

因為有ESLint，它不但可以幫助保持組織化，而且隨著不斷增加的Vue3支持，你將可以編寫可擴展的Vue項目。

3.Vue VSCode Snippets

圖片

Sarah Drasner的這個VSCode擴展將為你節(jié)省大量的開發(fā)時間。

它能為常用的Vue用例提供自動填充的代碼片段。用它自己的話來說……

Vue VSCode Snippets從Vue的實際使用角度關注開發(fā)人員的人體工程學。包括我個人討厭打字的部分，還有樣板文件。

它非常適合編寫快速SFC、Vue指令等內(nèi)容，并且訪問生命周期鉤子真的非常快。

4.Bookmarks

圖片

許多Vue開發(fā)人員的VSCode擴展在進入大型項目之前并沒有真正展現(xiàn)出它們的全部潛力。

這正是Bookmarks的工作方式。此擴展允許你在代碼中標記和命名位置。然后，你可以在這些不同的bookmarks之間跳轉(zhuǎn)，來提高開發(fā)速度。

現(xiàn)在你已經(jīng)不再需要仔細上下滾動文件以找到放置某個特性的位置了。哦也！

5.Bracket Pair Colorizer

圖片

Bracket Pair Colorizer正如其名，接受匹配的括號并為它們提供獨特的匹配顏色。

雖然這只是一個小細節(jié)，但它確實可以在你需要修復嵌套錯誤時提供幫助，并且在linter不工作時依然能提供幫助哦。

我也非常喜歡它的視覺效果——讓我的代碼色彩繽紛但又不會讓人分心。

絕對值得一試。

6.Auto Rename Tag

圖片

Auto Rename Tag這個VSCode擴展有助于防止模板代碼中的錯誤。

每當你更改HTML括號對中的其中一個標簽（開始或者結束標簽）時，Auto Rename Tag會——你猜對了——自動重命名另一個。

這種小的優(yōu)化可以幫助防止出現(xiàn)很多錯誤，尤其是在處理大型模板時。

7.NPM Intellisense

圖片

每當你用JavaScript編寫導入語句時，NPM Intellisense都會自動完成npm模塊。

這樣你就不需要再花費時間去記住npm模塊的確切名稱。我在許多項目中用過NPM Intellisense，真的很好用哦。

總結

總的來說，有很多VS Code擴展面向Vue開發(fā)人員。

雖然你可能會覺得這7個擴展乍一看似乎沒什么新花樣，但這些小的改變確確實實可以節(jié)省開發(fā)時間。所以建議你至少嘗試一下，搞不好你會成為其中一個的擁躉哦。