VS Code Vue组件模板配置 Better

目录

• 设置方法
• 模板配置参数 (vue.json)
• 使用

设置方法

文件 -> 首选项 -> 用户片段
在弹出框中输入 vue,
选择 vue,
打开 vue.json 进行编辑

模板配置参数 (vue.json)

{
	// 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": "vue",
      "body": [
          "<template>",
          "  <div class=\"wrapper\">$0</div>",
          "</template>",
          "",
          "<script>",
          "export default {",
          "  name: '',",
          "  components: {},",
          "  props: {},",
          "  data() {",
          "    return {",
          "    };",
          "  },",
          "  watch: {},",
          "  computed: {},",
          "  created() {},",
          "  mounted() {},",
          "  methods: {}",
          "};",
          "</script>",
          "<style lang=\"scss\" scoped>",
          ".wrapper{}",
          "</style>",
          ""
      ],
      "description": "A vue file template"
  }
}

使用

• 新建 .vue 文件
• 输入 vue 按回车，即可自动生成 vue 组件模板