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

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

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

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

還不趕快來看一下！

1.Vetur

圖片

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

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

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

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

2.ESLint Plugin VueJS

圖片

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

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

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

然而，不用慌！

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

3.Vue VSCode Snippets

圖片

Sarah Drasner的這個VSCode擴展將為你節省大量的開發時間。

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

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

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

4.Bookmarks

圖片

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

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

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

5.Bracket Pair Colorizer

圖片

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

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

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

絕對值得一試。

6.Auto Rename Tag

圖片

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

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

這種小的優化可以幫助防止出現很多錯誤，尤其是在處理大型模板時。

7.NPM Intellisense

圖片

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

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

總結

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

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