溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
本文主要給大家介紹的是關于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"
}
}
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
