常用snippets

开发时经常使用重复的代码块，这个功能在 vscode 的 snippets 中进行设置。

snippet-generator (opens new window)

Snippets 设置超实用的代码块 (opens new window)

下面是本人常用代码块。

    "Print to console": {
        "prefix": "cls",
        "body": ["console.log($1)"],
        "description": "Log output to console"
    },
    "line": {
        "prefix": "line",
        "body": ["// ---------------------- $1 ---------------------- //"],
        "description": "comment mini vue template"
    },
    "to-await": {
        "prefix": "to-await",
        "body": ["const [err, res] = await $0()", "console.log('$0', err, res)", "if (err) return"],
        "description": "to await api structure"
    },
    "import Vue Component": {
        "prefix": "import-component",
        "body": ["import $1 from './$1.vue'"],
        "description": "import vue template"
    },
    "vue3 template with less ts without wrap": {
        "prefix": "vue3-less-noWrap-ts",
        "body": [
            "<template>",
            "  $1",
            "</template>",
            "<script setup lang=\"ts\">",
            "  ",
            "</script>",
            "<style lang=\"less\" scoped>",
            "  ",
            "</style>"
        ],
        "description": "for vue template"
    },
    "vue3 template with less js without wrap": {
        "prefix": "vue3-less-noWrap-js",
        "body": ["<template>", "  $1", "</template>", "<script setup>", "  ", "</script>", "<style lang=\"less\" scoped>", "  ", "</style>"],
        "description": "for vue template"
    },
    "for vue props": {
        "prefix": "vue3-props",
        "body": ["const props = defineProps({", "    $1: {", "        type: $2,", "        default: $3", "    }", "})"],
        "description": "for vue props"
    },
    "for vue emit": {
        "prefix": "vue3-emit",
        "body": ["const emit = defineEmits(['$0'])"],
        "description": "for vue emit"
    },
    "for vue3 computed": {
        "prefix": "vue3-computed",
        "body": ["const $1 = computed(()=>$2)"],
        "description": "for vue computed"
    }

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

仅在ts中出现的

    "ts api request and response": {
        "prefix": "ts-api",
        "body": [
            "export declare namespace $1 {",
            "   interface Request {",
            "       foo: number // ",
            "   }",
            "   interface Response extends ResponseData2<DataItem[]> {}",
            "   interface DataItem {",
            "       foo: number // ",
            "   }",
            "}"
        ],
        "description": "ts api request and response"
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

上次更新: 2023/06/30, 10:32:37

← vscode 之 snippets 妙用如何在windows下运行bash命令→