前言

為什么選擇VScode？

在之前我用過sublime、webstorm、atom、Brackets、eclipse、HBuilder、notepad++等等。應該還有一些用過幾次的編輯器，記不起來的，這些編輯器的作用不外乎一點――為了開發迅速。基本都會自帶代碼提示插件。隨著項目越來越大，出了一系列問題，而這些問題會大量浪費我們的時間（我們只想簡單的編程），故而編輯器插件的數量和支持程度成為了我們選擇編輯器的重要條件，這就是為什么選擇VScode，它擁有大量的插件，可以幫助我們完成我們沒必要浪費時間去做的一些事情，比如代碼縮緊，追加分號等等。

VScode的優勢

1. 擁有大量的插件供我們選擇
2. 跨平臺可用，支持mac和windows
3. 簡單配置，json語法，開發通用
4. 主題換膚，隨心所欲
5. vue常用(或非常用)插件介紹

vetur：用于vue語法高亮

prettier：格式化代碼

ESLint：代碼檢查

Beautify：代碼美化插件，格式化html

目前這幾款插件就夠用了！后續在補充其他插件

配置插件常見問題匯總

iview的標簽報錯 x-invalid-end-tag

{	“vetur.validation.template”: false}

 格式化代碼的時候template里的標簽屬性也換行（Ps. 屬性不換行）

{	"vetur.format.defaultFormatter.html": "js-beautify-html",	"vetur.format.defaultFormatterOptions": {	  "js-beautify-html": {	   "wrap_attributes": "auto"	  },	  "prettyhtml": {	   "printWidth": 120,	   "singleQuote": false,	   "wrapAttributes": false,	   "sortAttributes": false	  }	}}

保存自動格式化不生效

{	// 需要自動保存的必須配置autoFix	"eslint.validate": [	  "javascript",	  "javascriptreact",	  {	   "language": "html",	   "autoFix": true	  },	  {	   "language": "vue",	   "autoFix": true	  }	],	// 保存自動修復	"eslint.autoFixOnSave": true,}

以上所述是小編給大家介紹的了VScode編輯器vue環境搭建所遇問題解決方案詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！