詳解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)文章
本篇和大家分享的是學(xué)習(xí)Vuejs的總結(jié)和調(diào)用webapi的一個(gè)小示例；具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
這篇文章主要給大家介紹了關(guān)于Vue實(shí)例掛載的過(guò)程,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-03-03
Vue項(xiàng)目引發(fā)的「過(guò)濾器」使用教程
這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目引發(fā)的「過(guò)濾器」使用的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
Vue使用自定義指令實(shí)現(xiàn)拖拽行為實(shí)例分析
這篇文章主要介紹了Vue使用自定義指令實(shí)現(xiàn)拖拽行為,結(jié)合實(shí)例形式分析了Vue使用自定義指令實(shí)現(xiàn)拖拽行為具體步驟、原理與操作注意事項(xiàng),需要的朋友可以參考下2020-06-06
vue子組件設(shè)計(jì)provide和inject理解使用
這篇文章主要為大家介紹了vue子組件設(shè)計(jì)provide和inject理解及使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
基于vue+face-api.js實(shí)現(xiàn)前端人臉識(shí)別功能
基于face-api.js要實(shí)現(xiàn)人臉識(shí)別功能,首先要將自己需要的模型文件下載保存在靜態(tài)目錄下,可以通過(guò)cdn的方式在index.html中引入face-api.js,本文給大家介紹vue+face-api.js實(shí)現(xiàn)前端人臉識(shí)別功能,感興趣的朋友一起看看吧2023-12-12
vue3?element-plus?實(shí)現(xiàn)表格數(shù)據(jù)更改功能詳細(xì)步驟
這篇文章主要介紹了vue3 element-plus實(shí)現(xiàn)表格數(shù)據(jù)更改功能,本文分步驟結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-07-07
Vuex?是一個(gè)專(zhuān)為?Vue.js?應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化，這篇文章主要介紹了Vue?中?store?基本用法,需要的朋友可以參考下2023-01-01
vue+Element-ui的el-table的多級(jí)內(nèi)容渲染問(wèn)題
這篇文章主要介紹了vue+Element-ui的el-table的多級(jí)內(nèi)容渲染問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue列表單項(xiàng)展開(kāi)收縮功能之this.$refs的詳解
這篇文章主要介紹了vue列表單項(xiàng)展開(kāi)收縮功能之this.$refs的詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05