使用 Vue 開發的，這 7 個 VS Code 插件萬萬不可錯過！

做者：Ahmad shaded
譯者：前端小智
來源：sitepoint

有夢想，有乾貨，微信搜索 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588... 已收錄，有一線大廠面試完整考點、資料以及個人系列文章。

在 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模塊確切名稱的時間，這也是我必備的插件之一。

~完，我是刷碗智，我要去刷碗了，咱們下期見！

---

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：https://learnvue.co/2021/01/t...

交流

有夢想，有乾貨，微信搜索 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588... 已收錄，有一線大廠面試完整考點、資料以及個人系列文章。