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

創(chuàng)新互聯(lián)主要從事網(wǎng)站設(shè)計(jì)制作、成都做網(wǎng)站、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)射洪,10年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):13518219792

前言

為什么選擇VScode？

在之前我用過sublime、webstorm、atom、Brackets、eclipse、HBuilder、notepad++等等。應(yīng)該還有一些用過幾次的編輯器，記不起來的，這些編輯器的作用不外乎一點(diǎn)——為了開發(fā)迅速?；径紩?huì)自帶代碼提示插件。隨著項(xiàng)目越來越大，出了一系列問題，而這些問題會(huì)大量浪費(fèi)我們的時(shí)間（我們只想簡單的編程），故而編輯器插件的數(shù)量和支持程度成為了我們選擇編輯器的重要條件，這就是為什么選擇VScode，它擁有大量的插件，可以幫助我們完成我們沒必要浪費(fèi)時(shí)間去做的一些事情，比如代碼縮緊，追加分號(hào)等等。

VScode的優(yōu)勢(shì)

1. 擁有大量的插件供我們選擇

2. 跨平臺(tái)可用，支持mac和windows

3. 簡單配置，json語法，開發(fā)通用

4. 主題換膚，隨心所欲

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

vetur：用于vue語法高亮

prettier：格式化代碼

ESLint：代碼檢查

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

目前這幾款插件就夠用了！后續(xù)在補(bǔ)充其他插件

配置插件常見問題匯總

iview的標(biāo)簽報(bào)錯(cuò) x-invalid-end-tag

{
	“vetur.validation.template”: false
}

 格式化代碼的時(shí)候template里的標(biāo)簽屬性也換行（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
	  }
	}
}

保存自動(dòng)格式化不生效

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

以上是“VScode編輯器vue環(huán)境搭建的案例”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁題目：VScode編輯器vue環(huán)境搭建的案例-創(chuàng)新互聯(lián)
瀏覽路徑：http://weahome.cn/article/dhhpej.html