VSCode技巧:vue開發套件vetur相關設定 | vs code vue教學
前提情要目前專案選擇vue.js[1]作為前端開發使用Framework,開發工具選擇VsCode的狀況下,筆者搜尋一下相關plugins,發現vetur[2]下載率很高,含基本的syntaxhighlightingSnippetAutoCompletion對筆者來說已足夠,趕緊下載來試用。稍微觀看一下該套件格式化相關設定,對於vuewebpacktemplate開發來說,需要再手動設定。內容若以vue-cli產生之template開發則會以獨立vue檔案的形式開發,vetur在格式化預設設定中不包含html部份,參考https://github.com/vuejs/vetur/blob/master/docs/formatting.md[3]12345678910{"vetur.format.defau...
前提情要目前專案選擇vue.js[1]作為前端開發使用Framework,開發工具選擇VsCode的狀況下,筆者搜尋一下相關plugins,發現vetur[2]下載率很高,含基本的
syntax highlighting Snippet Auto Completion對筆者來說已足夠,趕緊下載來試用。稍微觀看一下該套件格式化相關設定,對於vue webpack template開發來說,需要再手動設定。
內容若以vue-cli產生之template開發則會以獨立vue檔案的形式開發,vetur在格式化預設設定中不包含html部份,參考 https://github.com/vuejs/vetur/blob/master/docs/formatting.md[3]
1
2
3
4
5
6
7
8
9
10
{
"vetur.format.defaultFormatter.html": "none",
"vetur.format.defaultFormatter.css": "prettier",
"vetur.format.defaultFormatter.postcss": "prettier",
"vetur.format.defaultFormatter.scss": "prettier",
"vetur.format.defaultFormatter.less": "prettier",
"vetur.format.defaultFormatter.stylus": "stylus-supremacy",
"vetur.format.defaultFormatter.js": "prettier",
"vetur.format.defaultFormatter.ts": "prettier"
}
因此我們就針對html來做設定,Ctrl+,叫出Vscode的UserSettings,可設定為prettier: