vscode 代码片段

    在vscode中使用 ctrl+shift+p 打开一个选项窗口，然后找到配置用户代码片段，点击进去，输入vue.json找到对应的配置文件点击进去，然后粘贴下面配置替换即可。

    image.png
    image.png

    1. {
    2.     // Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and 
    3.     // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
    4.     // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
    5.     // same ids are connected.
    6.     // Example:
    7.     // "Print to console": {
    8.     //     "prefix": "log",
    9.     //     "body": [
    10.     //         "console.log('$1');",
    11.     //         "$2"
    12.     //     ],
    13.     //     "description": "Log output to console"
    14.     // }
    15.     "vue2-typescript模板": {
    16.         "prefix": "vue2-typescript",
    17.         "body": [
    18.             "<template>",
    19.             "  <div class=\"demo\"></div>",
    20.             "</template>",
    21.             "<script lang=\"ts\">",
    22.             "import { Component, Vue } from 'vue-property-decorator'",
    23.             "@Component",
    24.             "export default class Demo extends Vue {}",
    25.             "</script>",
    26.              "<style lang=\"scss\" scoped>",
    27.             ".demo {",
    28.             "  width: 100%;",
    29.             "}",
    30.             "</style>",
    31.             ""
    32.         ],
    33.         "description": "vue-typescript模板"
    34.     },
    35.   "vue3-typescript模板": {
    36.         "prefix": "vue3-typescript",
    37.         "body": [
    38.             "<template>",
    39.           "<div class=\"demo\"> </div>",
    40.             "</template>",
    41.             "<script lang=\"ts\">",
    42.           "import { defineComponent } from 'vue'",
    43.           "export default defineComponent({",
    44.         "name: \"Demo\",",
    45.         "setup(props, context) {",
    46.           "// 业务代码写这里...",
    48.       "return {",
    49.        " // 需要给template用的数据、函数放这里return出去...",
    50.       "}",
    51.         "}",
    52.           "})",
    53.             "</script>",
    54.             "<style lang=\"scss\" scoped>",
    55.              " .demo {",
    56.           "  width: 100%;",
    57.           " height: 100%;",
    58.           "}",
    59.             "</style>"
    60.         ],
    61.         "description": "vue3的代码模板片段"
    62.     }
    63. }

    具体定制代码段的方法如下。

    进入https://snippet-generator.app/这个网站，然后将你要生成代码块的代码片段丢到左侧位置，右侧会自动生成出对应的vscode的代码段，当然你也可以点击右侧上面的tab栏切换不同编辑器下的代码块，这里以vscode为例，将右侧的代码块复制粘贴到vue.json配置文件中，配置对应的代码前缀名称即可。

    image.png