vscode - 配置快捷生成vue模板的代码片段
在vscode中如何配置快捷生成vue模板的代码片段 和删除新增的代码片段
·
在vscode中如何配置快捷生成vue模板的代码片段 和删除新增的代码片段
1,在设置中找到 【配置用户代码片段】
2,点击【新建全局代码片段文件】
然后取一个名字 我这里用的是 vue 然后点击enter键
3,然后把下列代码粘贴进去即可
{
"vue-template": {
"prefix": "vue",
"body": [
"<template>",
" <div class=\"$1\">$2</div>",
"</template>",
"",
"<script>",
"export default {",
" name: '$3',",
" mixins: [],",
" components: {},",
" props: {},",
" data () {",
" return {",
" }",
" },",
" computed: {},",
" watch: {},",
" created () {},",
" mounted () {},",
" methods: {}",
"}",
"</script>",
"",
"<style scoped lang=\"scss\"></style>",
""
],
"description": "my vue template"
}
}
4,开始使用
在新的vue文件中 直接输入新增代码片段的名称,然后会提示此快捷片段,点击enter键自动生成成功
生成如下代码:
<template>
<div class=""></div>
</template>
<script>
export default {
name: '',
mixins: [],
components: {},
props: {},
data () {
return {
}
},
computed: {},
watch: {},
created () {},
mounted () {},
methods: {}
}
</script>
<style scoped lang="scss"></style>
5,介绍删除新增的代码片段
还是从设置里面点击【新建全局代码片段文件】,然后再点击不想要的这个代码片段 会自动打开此code-snippets文件
然后右键点击 【再文件资源管理器中显示】找到这个文件 删除即可。
更多推荐
已为社区贡献9条内容
所有评论(0)