1. 程式人生 > 程式設計 >淺談Vue開發人員的7個最好的VSCode擴充套件

淺談Vue開發人員的7個最好的VSCode擴充套件

在Visual Studio中新增正確的VS Code擴充套件可以讓你作為開發者的生活變得更加輕鬆。
它們可以幫助格式化、可伸縮性、強制執行最佳實踐,從而自動化開發過程中許多容易忘記的任務。它們也可以只是有趣的擴充套件,使我們的程式碼看起來更漂亮/更容易編寫。
作為一個Vue愛好者,我花了很多時間為Vue開發人員尋找最好的VS Code擴充套件。這裡有一些讓我的生活變得如此簡單的方法。
準備好了嗎?

讓我們直接切入正題。

Vetur

如果你從這篇文章中下載了一個VS Code擴充套件,它一定是Vetur。
一個針對VS Code的Vue工具包——它提供了Vue特定的語法高亮顯示、通用程式碼段的程式碼段,以及所有Vue開發人員都需要的更多內容。

Vetur維護得很好——它甚至還提供了對Vue3 Typescript的支援。
關於Vetur,真的沒有太多別的好說的了——明白了吧。這會讓你的發展更好。

ESLint Plugin VueJS

大多數開發人員都很熟悉ESLint——這是最流行的linter工具之一,它可以幫助你保持程式碼與最佳實踐一致,並在大型程式碼庫中具有可讀性。
VueJS有自己的ESLint外掛來檢查單個檔案元件的語法。我認為它是編寫可維護和可伸縮程式碼的最佳工具之一。
沒有什麼比檢視一些舊程式碼,甚至不知道從哪裡開始除錯它更糟糕的了。
ESLint可以幫助你保持組織性,並且隨著對Vue3支援的增加,你將會編寫可擴充套件的Vue專案。

Vue VSCode Snippets

Sarah Drasner的VSCode擴充套件將為你節省很多開發時間。它為常用的Vue用例提供了自動填充的程式碼片段。用她自己的話來說……
從真實世界使用的Vue的角度關注開發者的人機工程學。其中包括我個人厭倦了打字的部分,以及有助於快速刪除的樣板檔案。
它非常適合編寫快速sfc、Vue指令和快速訪問生命週期鉤子。

Bookmarks

許多Vue開發人員的VSCode擴充套件直到進入大型專案時才真正展現出其全部潛力。
這就是Bookmarks的工作原理。這個擴充套件可以讓你在程式碼中標記和命名位置。然後,你可以在這些不同的“Bookmarks”之間切換以提高開發速度。

為了找到某個特性,你需要小心翼翼地上下滾動你的檔案,這樣的日子一去不復返了。

Bracket Pair Colorizer

Bracket Pair Colorizer確實做到了它說的-它需要匹配括號,並給他們獨特的匹配顏色。
雖然這看起來像是一個小細節,但它確實可以幫助你修復討厭的巢狀錯誤,也可以幫助你。
我也很享受這樣做的視覺效果——讓我的程式碼色彩豐富,又不會讓它太分散注意力。
絕對值得一看。

Auto Rename Tag

Auto Rename Tag是一個有用的VSCode擴充套件,將有助於防止錯誤出現在你的模板程式碼。
每當你去改變一個標籤的HTML括號對(無論是開始或結束標籤),Auto Rename Tag將自動重新命名另一個。
這個小的優化可以幫助防止如此多的錯誤,特別是在處理大型模板時。

NPM Intellisense

當你在Javascript中編寫import語句時,NPM Intellisense會自動完成你的NPM模組。
這可以節省你記住一個npm模組的確切名稱的時間。
我已經在我的很多專案中使用了它,而且它絕對是我已經變得非常習慣的東西。

結論

總之,有很多VS Code擴充套件可供Vue開發人員使用。
雖然這個列表中的許多修改在一開始可能看起來微不足道,但這些小的修改可以為你節省大量的開發時間。我強烈建議至少嘗試所有的方法。
誰知道呢——你可能會愛上其中的一些。
如果你認為還有其他的VS Code擴充套件值得在這個列表上——請告訴我!

到此這篇關於淺談Vue開發人員的7個最好的VSCode擴充套件的文章就介紹到這了,更多相關Vue VSCode擴充套件內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!