[[394551]]

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

Vetur

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

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

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

ESLint Plugin VueJS

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

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

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

不用擔(dān)心!

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

Vue VSCode Snippets

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

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

Bookmarks

許多VSCode插件只有在大型項(xiàng)目時(shí)才真正展現(xiàn)出其全部潛力。

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

為了找到某個(gè)特性，我們需要小心翼翼地上下滾動(dòng)我們的文件，這樣的日子一去不復(fù)返了。

Bracket Pair Colorizer

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

Auto Rename Tag

自動(dòng)關(guān)閉標(biāo)簽，在開始標(biāo)記的結(jié)束括號(hào)中鍵入后，將自動(dòng)插入結(jié)束標(biāo)記。

每當(dāng)我們要更改HTML括號(hào)對中的一個(gè)標(biāo)簽(開始或結(jié)束標(biāo)簽)時(shí)，Auto Rename Tag會(huì)自動(dòng)重命名另一個(gè)標(biāo)簽。

這個(gè)小的優(yōu)化可以幫助防止很多錯(cuò)誤，特別是在處理大型模板時(shí).

NPM Intellisense

在導(dǎo)入包時(shí)，NPM Intellisense都會(huì)自動(dòng)完成我們的npm模塊。

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

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

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