詳解VScode編輯器vue環(huán)境搭建所遇問題解決方案
前言
為什么選擇VScode?
在之前我用過sublime、webstorm、atom、Brackets、eclipse、HBuilder、notepad++等等。應該還有一些用過幾次的編輯器,記不起來的,這些編輯器的作用不外乎一點——為了開發(fā)迅速?;径紩詭Тa提示插件。隨著項目越來越大,出了一系列問題,而這些問題會大量浪費我們的時間(我們只想簡單的編程),故而編輯器插件的數(shù)量和支持程度成為了我們選擇編輯器的重要條件,這就是為什么選擇VScode,它擁有大量的插件,可以幫助我們完成我們沒必要浪費時間去做的一些事情,比如代碼縮緊,追加分號等等。
VScode的優(yōu)勢
- 擁有大量的插件供我們選擇
- 跨平臺可用,支持mac和windows
- 簡單配置,json語法,開發(fā)通用
- 主題換膚,隨心所欲
- vue常用(或非常用)插件介紹
vetur:用于vue語法高亮

prettier:格式化代碼

ESLint:代碼檢查

Beautify:代碼美化插件,格式化html

目前這幾款插件就夠用了!后續(xù)在補充其他插件
配置插件常見問題匯總
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環(huán)境搭建所遇問題解決方案詳解整合,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關文章
vue2?自定義?el-radio-button?的樣式并設置默認值的方法
這篇文章主要介紹了vue2?自定義?el-radio-button?的樣式并設置默認值的操作方法,代碼分為html部分和css修改樣式代碼,代碼簡單易懂,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-10-10
詳解Vue.js之視圖和數(shù)據(jù)的雙向綁定(v-model)
本篇文章主要介紹了Vue.js之視圖和數(shù)據(jù)的雙向綁定(v-model),使用v-model指令,使得視圖和數(shù)據(jù)實現(xiàn)雙向綁定,有興趣的可以了解一下2017-06-06

