VS新建vue文件的自定義模板
在使用vscode
開發的時候,新建vue文件是不可或缺的,但是VSCode
并沒有vue
文件的初始化模板,這個需要自定義模板。
我們可以使用vscode
的snippets
在新建.vue
?文件后輕松獲得一套模板。
具體步驟
- 打開VSCode?-> “文件(mac機選Code)” -> “首選項” -> "用戶代碼片段”,然后會打開一個彈框。
- 在彈框中選擇"新建代碼片段"新建一個全局代碼片段文件,自定義名稱保存后,VS編輯器就會打開這個文件。
- 然后復制以下內容覆蓋文件內容。
{// Place your snippets for vue 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, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the// same ids are connected.// Example:// "Print to console": {// "prefix": "log",// "body": [// "console.log('$1');",// "$2"// ],// "description": "Log output to console"// }"Create vue template": {"prefix": "vue","body": ["<template>"," <div></div>","</template>","<script>","export default {"," name: \"${1:component_name}\","," data () {"," return {}"," },"," methods:{}","}","</script>","<style lang=\"${2:scss}\" scoped>","</style>"],"description": "Create vue template"}
}
prefix?表示對應生成代碼塊的命令(我設置的是vue
)
然后將文件保存關閉。
- 然后新建一個
.vue
文件
在新建的.vue
的文件中輸入vue
,回車,然后就會生成初始化代碼塊。 - 生成初始化模板如圖:
具體參數可以根據實際修改,此處我是用的是scss
預處理語言
步驟二還有一個方法(方法二: 在彈框中搜索vue
,選中vue.json
,在vue.json中編輯自定義模板)
- 新建全局代碼片段的好處就是,在非
vue
文件中輸入vue命令
都能新建出vue初始化代碼模板。 - 如果是
vue.json
文件中定義初始化代碼模板的話,就只能在.vue
文件中vue命令才會有效。