詳解VScode編輯器vue環(huán)境搭建所遇問題解決方案
前言
為什么選擇VScode？
在之前我用過sublime、webstorm、atom、Brackets、eclipse、HBuilder、notepad++等等。應(yīng)該還有一些用過幾次的編輯器，記不起來的，這些編輯器的作用不外乎一點——為了開發(fā)迅速?；径紩詭Тa提示插件。隨著項目越來越大，出了一系列問題，而這些問題會大量浪費我們的時間（我們只想簡單的編程），故而編輯器插件的數(shù)量和支持程度成為了我們選擇編輯器的重要條件，這就是為什么選擇VScode，它擁有大量的插件，可以幫助我們完成我們沒必要浪費時間去做的一些事情，比如代碼縮緊，追加分號等等。
VScode的優(yōu)勢
- 擁有大量的插件供我們選擇
- 跨平臺可用，支持mac和windows
- 簡單配置，json語法，開發(fā)通用
- 主題換膚，隨心所欲
- vue常用(或非常用)插件介紹
vetur：用于vue語法高亮
prettier：格式化代碼
ESLint：代碼檢查
Beautify：代碼美化插件，格式化html
目前這幾款插件就夠用了！后續(xù)在補(bǔ)充其他插件
配置插件常見問題匯總
iview的標(biāo)簽報錯 x-invalid-end-tag
{
“vetur.validation.template”: false
}
格式化代碼的時候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
}
}
}
保存自動格式化不生效
{
// 需要自動保存的必須配置autoFix
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
}
],
// 保存自動修復(fù)
"eslint.autoFixOnSave": true,
}
以上所述是小編給大家介紹的了VScode編輯器vue環(huán)境搭建所遇問題解決方案詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
本篇和大家分享的是學(xué)習(xí)Vuejs的總結(jié)和調(diào)用webapi的一個小示例；具有一定的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要給大家介紹了關(guān)于Vue實例掛載的過程,文中通過實例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-03-03
這篇文章主要給大家介紹了關(guān)于Vue項目引發(fā)的「過濾器」使用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要介紹了Vue使用自定義指令實現(xiàn)拖拽行為,結(jié)合實例形式分析了Vue使用自定義指令實現(xiàn)拖拽行為具體步驟、原理與操作注意事項,需要的朋友可以參考下2020-06-06
vue子組件設(shè)計provide和inject理解使用
這篇文章主要為大家介紹了vue子組件設(shè)計provide和inject理解及使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
基于vue+face-api.js實現(xiàn)前端人臉識別功能
基于face-api.js要實現(xiàn)人臉識別功能,首先要將自己需要的模型文件下載保存在靜態(tài)目錄下,可以通過cdn的方式在index.html中引入face-api.js,本文給大家介紹vue+face-api.js實現(xiàn)前端人臉識別功能,感興趣的朋友一起看看吧2023-12-12
vue3?element-plus?實現(xiàn)表格數(shù)據(jù)更改功能詳細(xì)步驟
這篇文章主要介紹了vue3 element-plus實現(xiàn)表格數(shù)據(jù)更改功能,本文分步驟結(jié)合實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
Vuex?是一個專為?Vue.js?應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化，這篇文章主要介紹了Vue?中?store?基本用法,需要的朋友可以參考下2023-01-01
vue+Element-ui的el-table的多級內(nèi)容渲染問題
這篇文章主要介紹了vue+Element-ui的el-table的多級內(nèi)容渲染問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue列表單項展開收縮功能之this.$refs的詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05