7 個使 Vue 開發如虎添翼的 VS Code 擴展
來自公衆號：前端先鋒
作爲一個 Vue 搬磚工，我一直在爲 Vue 開發尋找合適的 VS Code 擴展。以下是一些好用的擴展，可以讓我們在搬磚時更加輕鬆。
Vetur
鏈接：https://marketplace.visualstudio.com/items?itemName=octref.vetur
如果只裝一個 VS Code 擴展的話，那必須是 Vetur。
這是一個 VS Code 的 Vue 工具包——它提供了 Vue 特定的語法突出顯示、常見代碼段以及每個寫 Vue 的人都需要的很多功能。
Vetur 維護得很好，它甚至有 Vue3 Typescript 支持。
關於 Vetur 真的沒有太多要說的，懂的人自然懂
ESLint Plugin VueJS
鏈接：https://eslint.vuejs.org/
大家對 eslint 已經很熟悉了，這是最受歡迎的 Linter 工具。
Vuejs 有自己的 eslint 插件，可以檢查單個文件組件的語法。這是編寫可維護和可擴展代碼的最好用的工具之一。
大家都不喜歡去維護祖傳代碼，甚至都不知道該從什麼地方開始調試。不用擔心，ESLint 可以幫你把一切都保持的井井有條，隨着對 Vue3 支持的增加，還能編寫可擴展的 Vue 項目。
Vue VSCode Snippets
鏈接：https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets
這個 vscode 擴展可以幫你節省大量的開發時間。它能幫你自動填充常用的 Vue 代碼片段。用作者自己的話說：
[Vue VSCode Snippets] focuses on developer ergonomics from the point of Vue of real world use. Included are the pieces I personally get sick of typing, and boilerplate that is helpful to stub out quickly.
來源：https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets)
大意是從實用的角度關注 vue 開發人員的身心健康。因爲作者很討厭打字。
它非很適合編寫快速 SFC、Vue 指令和快速訪問生命週期鉤子等。
推薦一篇文章，點擊觀看
Bookmarks
鏈接：https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks
Bookmarks 可以讓你在自己代碼中標記並命名位置。然後你就可以在這些不同的 “書籤” 之間跳轉，提高開發速度。
以後你再也不用在長長的代碼中尋找特定函數的位置了，它一下子就能幫你搞定。
Bracket Pair Colorizer
鏈接：https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer
Bracket Pair Colorizer 用來匹配括號併爲它們提供獨特的匹配顏色。
雖然這是一個很小的細節，但它可以在你修復討厭的嵌套錯誤時幫上大忙，並且在你的 linter 無法正常工作時也可以爲提供幫助。
它的視覺效果也很讓人喜歡，即讓代碼豐富多彩又不會讓人分心。絕對值得一試。
Auto Rename Tag
鏈接：https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
Auto Rename Tag 是一個非常有用的 VSCode 擴展，能夠幫你防止在模板代碼產生錯誤。
每當你要修改 HTML 中的一個標籤名（開始或結束標籤）時，Auto Rename Tag 會幫你自動重命名另一個。
這種小優化可以幫助防止產生錯誤，尤其是當你在處理大型模板的時候。
NPM Intellisense
鏈接：https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense
當你在 Javascript 中編寫導入語句時，NPM Intellisense 都會自動完成你需要的 npm 模塊名稱。
這可以讓你不用再記住 npm 模塊的確切名稱，從而幫你節省大量的時間，我把它用在了自己的很多項目中。
如果還你知道更多好用的 vue 擴展，請留言告訴大家～
本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/fVMoEXEjZRvFNz-NWSh1lw