VScode編輯器vue環境搭建及所遇問題解決方案

前言

爲什麼選擇VScode？

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

VScode的優勢

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

vue常用(或非常用)插件介紹

1. vetur：用於vue語法高亮
   
2. prettier：格式化代碼
   
3. ESLint：代碼檢查
   
4. Beautify：代碼美化插件，格式化html
   
   目前這幾款插件就夠用了！後續在補充其他插件

配置插件常見問題彙總

1. iview的標籤報錯 x-invalid-end-tag

{
	“vetur.validation.template”: false
}

2. 格式化代碼的時候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
	    }
	}
}

3. 保存自動格式化不生效

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