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命令才會有效。

總結

以上是生活随笔為你收集整理的VScode新建自定义模板快捷方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。