VScode編輯器vue環境搭建的案例

小編給大家分享一下VScode編輯器vue環境搭建的案例，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

前言

為什么選擇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環境搭建的案例”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！