前言

本文主要給大家介紹的是關于vscode編寫vue簡單配置的相關內容，分享出來供大家參考學習，下面來一起看看詳細的介紹：

PS:現在推薦使用vetur插件

win10崩潰，重裝win7，結果sublime text插件無法安裝，各種心塞，于是決定轉戰vscode。

與sublime text相比，vscode有不少優點：

但是st插件更豐富，vscode插件相對較少，vue相關插件vscode更是只有一個，而且使用起來有不少問題，并且作者已經很久沒有更新了，折騰了一下午，最終可以用來編寫vue項目了。

vscode關于vue插件現在只有vscode-vue一個，安裝完成代碼提示并沒有生效，這是因為vue文件的語言模式默認為html，需要在setting.json中設置：

"files.associations": {  "*.vue": "vue" }

但是此時編寫樣式emmet插件不能正確識別，所以我后來也放棄了這種方式。

仔細思考，編寫vue項目主要需要：

其中2、3、4點，在html中都是可以做到的，而vue的代碼補全與代碼片段只需要自己編寫就可以了，于是我將vue文件的語言模式還原為默認的html，在用戶代碼片段中加入vue文件需要的代碼片段（文件-首選項-用戶代碼片段-html），最終效果還可以。

添加的代碼片段（持續更新）：

{ // Place your snippets for HTML here. Each snippet is defined under a snippet name and has a prefix, body and  // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are: // $1, $2 for tab stops, ${id} and ${id:label} and ${1:label} for variables. Variables with the same id are connected. // Example: "Print to console": {  "prefix": "log",  "body": [   "console.log('$1');",   "$2"  ],  "description": "Log output to console" }, "Create vue template": {  "prefix": "vuec",  "body": [   "<template>",   "</template>",   "<script>",   "export default {",   " name: /"${1:component_name}/",",   " data () {",   " return {",   " };",   " }",   "}",   "</script>",   "<style lang=/"${2:css}/" scoped>",   "</style>"  ],  "description": "Create vue template" }}

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對錯新站長站的支持。