0%

自定义vscode代码片段

有一句话说的好:“工欲善其事必先利其器

每次新建一个 vue 文件都要自己复制一份项目模板过来,太麻烦了。我在网上搜了一下资料,自定义了代码片段。

  1. 新建一个文件,如 test.vue
  2. 左下角设置中,选择用户代码片段 - vue.json
  3. test.vue 中写好你想要的代码片段模板,如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
<div></div>
</template>

<script>
export default {
name: '',
components: {},
props: [],
data() {
return {};
},
computed: {},
watch: {},
beforeMount() {},
mounted() {},
methods: {},
};
</script>
<style lang="scss" scoped></style>
  1. ctrl+f 打开 vscode 的搜索,点击选上 .*,(正则搜索),输入 (.*)
  2. 替换中输入 "$0",
  3. 全部替换,复制搜索内容,等会要用。
  4. 切换到 vue.json 文件,贴上下面的代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
{
"Print to console": {
"prefix": "vue",
"body": [
"<template>",
" <div />",
"</template>",
"",
"<script>",
"export default {",
" name: '$0',",
" components: {},",
" props: [],",
" data () {",
" return {}",
" },",
" computed: {},",
" watch: {},",
" beforeMount () {},",
" mounted () {},",
" methods: {}",
"}",
"</script>",
"<style lang='scss' scoped>",
"</style>"
],
"description": "Log output to console"
}
}

没错,代码片段在 body 字段里,是个数组,如果你不想一行一行的去加双引号和逗号,用 4-7 步骤可以快速完成。成功偷懒。

  1. 在 vue 文件里直接输入 vue,是不是看到自己刚刚写的代码片段了。