[[394551]]

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

Vetur

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

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

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

ESLint Plugin VueJS

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

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

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

不用擔(dān)心!

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

Vue VSCode Snippets

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

它非常適合編寫(xiě)快速SFC，Vue指令和快速訪問(wèn)生命周期掛鉤之類(lèi)的東西。

Bookmarks

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

Bookmarks 可以讓我們?cè)诖a中標(biāo)記和命名位置。然后，可以在這些不同的書(shū)簽之間跳轉(zhuǎn)來(lái)提高我們的開(kāi)發(fā)速度。

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

Bracket Pair Colorizer

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

Auto Rename Tag

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

每當(dāng)我們要更改HTML括號(hào)對(duì)中的一個(gè)標(biāo)簽(開(kāi)始或結(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模塊確切名稱(chēng)的時(shí)間，這也是我必備的插件之一。

~完，我是刷碗智，我們下期見(jiàn)!

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