詳解VScode編輯器vue環(huán)境搭建所遇問(wèn)題解決方案
前言
為什么選擇VScode？
在之前我用過(guò)sublime、webstorm、atom、Brackets、eclipse、HBuilder、notepad++等等。應(yīng)該還有一些用過(guò)幾次的編輯器，記不起來(lái)的，這些編輯器的作用不外乎一點(diǎn)——為了開(kāi)發(fā)迅速?；径紩?huì)自帶代碼提示插件。隨著項(xiàng)目越來(lái)越大，出了一系列問(wèn)題，而這些問(wèn)題會(huì)大量浪費(fèi)我們的時(shí)間（我們只想簡(jiǎn)單的編程），故而編輯器插件的數(shù)量和支持程度成為了我們選擇編輯器的重要條件，這就是為什么選擇VScode，它擁有大量的插件，可以幫助我們完成我們沒(méi)必要浪費(fèi)時(shí)間去做的一些事情，比如代碼縮緊，追加分號(hào)等等。
VScode的優(yōu)勢(shì)
- 擁有大量的插件供我們選擇
- 跨平臺(tái)可用，支持mac和windows
- 簡(jiǎn)單配置，json語(yǔ)法，開(kāi)發(fā)通用
- 主題換膚，隨心所欲
- vue常用(或非常用)插件介紹
vetur：用于vue語(yǔ)法高亮
prettier：格式化代碼
ESLint：代碼檢查
Beautify：代碼美化插件，格式化html
目前這幾款插件就夠用了！后續(xù)在補(bǔ)充其他插件
配置插件常見(jiàn)問(wèn)題匯總
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)境搭建所遇問(wèn)題解決方案詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
插槽就是子組件中的提供給父組件使用的一個(gè)占位符，用<slot></slot> 表示，父組件可以在這個(gè)占位符中填充任何模板代碼，如 HTML、組件等，填充的內(nèi)容會(huì)替換子組件的<slot></slot>標(biāo)簽，這篇文章主要介紹了Vue插槽的理解和使用,需要的朋友可以參考下2023-03-03
Vue提供了豐富的API和組件，可以幫助開(kāi)發(fā)者快速地構(gòu)建現(xiàn)代化的Web應(yīng)用程序，本文介紹了Vue如何實(shí)現(xiàn)分頁(yè)功能，包括數(shù)據(jù)的獲取、分頁(yè)器的實(shí)現(xiàn)和頁(yè)面的渲染2023-09-09
VueX如何實(shí)現(xiàn)數(shù)據(jù)共享
這篇文章主要介紹了VueX如何實(shí)現(xiàn)數(shù)據(jù)共享問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了搭建vue開(kāi)發(fā)環(huán)境的方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-07-07
vue2?自定義?el-radio-button?的樣式并設(shè)置默認(rèn)值的方法
這篇文章主要介紹了vue2?自定義?el-radio-button?的樣式并設(shè)置默認(rèn)值的操作方法，代碼分為html部分和css修改樣式代碼，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了Vue中如何設(shè)置全局的cookie對(duì)象，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue3自定義確認(rèn)密碼匹配驗(yàn)證規(guī)則的操作代碼
這篇文章主要介紹了vue3自定義確認(rèn)密碼匹配驗(yàn)證規(guī)則的操作代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
多個(gè)vue項(xiàng)目復(fù)用一個(gè)node_modules的問(wèn)題
這篇文章主要介紹了多個(gè)vue項(xiàng)目復(fù)用一個(gè)node_modules的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue中實(shí)現(xiàn)權(quán)限控制的方法示例
這篇文章主要介紹了Vue中實(shí)現(xiàn)權(quán)限控制的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-06-06
詳解Vue.js之視圖和數(shù)據(jù)的雙向綁定(v-model)
本篇文章主要介紹了Vue.js之視圖和數(shù)據(jù)的雙向綁定(v-model)，使用v-model指令,使得視圖和數(shù)據(jù)實(shí)現(xiàn)雙向綁定，有興趣的可以了解一下2017-06-06