背景
每次新建一个vue文件!都要重行敲打一遍template。script。style。神烦!有没有和别的编辑器一样!设置自己默认的模板!
解决
有的!前提VSCode安装了vetur
- 先安装
Vetur
扩展 让 VSCode 支持.vue
的扩展名 - 然后 菜单栏 -文件 - 首选项 - 用户代码片段
- 输入vue点击进行设置
-把下面的代码片段放入里面
// 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>",
"</template>",
"<script>",
"export default {",
" name: \"${1:component_name}\",",
" data () {",
" return {",
" };",
" }",
"}",
"</script>",
"<style lang=\"${2:scss}\" scoped>",
"</style>"
],
"description": "Create vue template"
}
- 保存后!新建
.vue
文件后!在里面输入vue就会看见代码提示!这里输入的提示符是按上面配置里面的prefix
属性设定!自己可以随便写!
- 原理相同!自己想设置不同文件代码片段只需要改设置就可以!随便你是react、angular还是html!
VSCode版本号:1.16.1
系统:windows10
网友评论