[[394551]]

在 VS Code 中添加好用的插件可以提高我們的開發效率。這些可以幫助我們格式化，擴充性，執行最佳實踐的代碼方式，自動完成一些瑣碎的事情。好了，費話不多說，那我們開始吧!

Vetur

Vetur 支持.vue文件的語法高亮顯示，除了支持template模板以外，還支持大多數主流的前端開發腳本和插件，比如 Sass 和 TypeScript，完整的支持高亮的語法如下所示：

Vetur 維護得很好，它甚至還提供了對Vue3 Typescript的支持。

關于Vetur沒有太多要說的了-還沒使用的，快快下手吧。

ESLint Plugin VueJS

大多數開發人員都熟悉 ESLint，這是最流行的linter工具之一，它可以幫助我們保持代碼與最佳實踐一致，并在大型代碼庫中具有可讀性。

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

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

不用擔心!

ESLint可以幫助你保持組織性，并且隨著對Vue3的支持的增加，你可以編寫可擴展的Vue項目。

Vue VSCode Snippets

這個插件基于最新的Vue官方語法高亮文件添加了語法高亮，并且依據Vue 2的API添加了代碼片段。

它非常適合編寫快速SFC，Vue指令和快速訪問生命周期掛鉤之類的東西。

Bookmarks

許多VSCode插件只有在大型項目時才真正展現出其全部潛力。

Bookmarks 可以讓我們在代碼中標記和命名位置。然后，可以在這些不同的書簽之間跳轉來提高我們的開發速度。

為了找到某個特性，我們需要小心翼翼地上下滾動我們的文件，這樣的日子一去不復返了。

Bracket Pair Colorizer

Bracket Pair Colorizer 為代碼中的括號添上一抹亮色。我也非常喜歡這種視覺效果–讓代碼豐富多彩，而又不會讓人分心。

Auto Rename Tag

自動關閉標簽，在開始標記的結束括號中鍵入后，將自動插入結束標記。

每當我們要更改HTML括號對中的一個標簽(開始或結束標簽)時，Auto Rename Tag會自動重命名另一個標簽。

這個小的優化可以幫助防止很多錯誤，特別是在處理大型模板時.

NPM Intellisense

在導入包時，NPM Intellisense都會自動完成我們的npm模塊。

這樣可以節省我們記住npm模塊確切名稱的時間，這也是我必備的插件之一。

~完，我是刷碗智，我們下期見!

作者：Ahmad shaded 譯者：前端小智 來源：sitepoint原文：https://learnvue.co/2021/01/the-7-vs-code-extensions-for-vue-developers/