建站
咨詢
售后
建站咨詢
新聞中心
本文翻譯自：https://learnvue.co/2021/01/the-7-best-vs-code-extensions-for-vue-developers/
在Visual Studio中添加合適的VS Code擴展可以使得我們的開發(fā)生活變得更輕松。
這些VS Code擴展有助于格式化、可擴展性、實施最佳實踐，從而讓開發(fā)過程中許多容易遺漏的任務可以自動化完成。它們也可以錦上添花，使我們的代碼看起來更漂亮/更容易編寫。
作為Vue愛好者，我一直在為Vue開發(fā)人員尋覓最好的VS Code擴展。這7個就是我總結的最佳VS Code擴展。
還不趕快來看一下！
1.Vetur
圖片
如果你從這7個VS Code擴展中只選擇了一個下載，那一定是Vetur。
VS Code的Vue工具包提供了Vue特定的語法高亮、常見代碼段，以及每個Vue開發(fā)人員都需要的更多內容。
Vetur維護得很好，它甚至自帶Vue3 TypeScript支持。
關于Vetur最后只說一句話，有它，絕對能讓你的開發(fā)進程更順利。
2.ESLint Plugin VueJS
圖片
大多數(shù)開發(fā)人員都知道ESLint——最流行的linter工具之一，可幫助代碼與最佳實踐保持一致并在大型代碼庫中具有可讀性。
VueJS有它自己的ESLint插件來檢查單文件組件的語法。我認為它是編寫可維護和可擴展代碼的最佳工具之一。
沒有什么比查看一些舊代碼，然后甚至不知道從哪里開始調試更糟糕的了。
然而，不用慌！
因為有ESLint，它不但可以幫助保持組織化，而且隨著不斷增加的Vue3支持，你將可以編寫可擴展的Vue項目。
3.Vue VSCode Snippets
圖片
Sarah Drasner的這個VSCode擴展將為你節(jié)省大量的開發(fā)時間。
它能為常用的Vue用例提供自動填充的代碼片段。用它自己的話來說……
Vue VSCode Snippets從Vue的實際使用角度關注開發(fā)人員的人體工程學。包括我個人討厭打字的部分，還有樣板文件。
它非常適合編寫快速SFC、Vue指令等內容，并且訪問生命周期鉤子真的非?？?。
4.Bookmarks
圖片
許多Vue開發(fā)人員的VSCode擴展在進入大型項目之前并沒有真正展現(xiàn)出它們的全部潛力。
這正是Bookmarks的工作方式。此擴展允許你在代碼中標記和命名位置。然后，你可以在這些不同的bookmarks之間跳轉，來提高開發(fā)速度。
現(xiàn)在你已經(jīng)不再需要仔細上下滾動文件以找到放置某個特性的位置了。哦也！
5.Bracket Pair Colorizer
圖片
Bracket Pair Colorizer正如其名，接受匹配的括號并為它們提供獨特的匹配顏色。
雖然這只是一個小細節(jié)，但它確實可以在你需要修復嵌套錯誤時提供幫助，并且在linter不工作時依然能提供幫助哦。
我也非常喜歡它的視覺效果——讓我的代碼色彩繽紛但又不會讓人分心。
絕對值得一試。
6.Auto Rename Tag
圖片
Auto Rename Tag這個VSCode擴展有助于防止模板代碼中的錯誤。
每當你更改HTML括號對中的其中一個標簽（開始或者結束標簽）時，Auto Rename Tag會——你猜對了——自動重命名另一個。
這種小的優(yōu)化可以幫助防止出現(xiàn)很多錯誤，尤其是在處理大型模板時。
7.NPM Intellisense
圖片
每當你用JavaScript編寫導入語句時，NPM Intellisense都會自動完成npm模塊。
這樣你就不需要再花費時間去記住npm模塊的確切名稱。我在許多項目中用過NPM Intellisense，真的很好用哦。
總結
總的來說，有很多VS Code擴展面向Vue開發(fā)人員。
雖然你可能會覺得這7個擴展乍一看似乎沒什么新花樣，但這些小的改變確確實實可以節(jié)省開發(fā)時間。所以建議你至少嘗試一下，搞不好你會成為其中一個的擁躉哦。
當前題目：Vue開發(fā)者不可不知的七個VSCode擴展
標題鏈接：http://www.5511xx.com/article/dhegepi.html
