Vscode

vscode 中快速生成console.log()

文件 - 首选项 - 用户代码片段

选择javascript

可以看到有一段被注释的代码,我们将代码解除注释

{
  // Place your snippets for javascript 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": "c",
    "body": [
      "console.log($1, '打印');",
      "$2"
    ],
    "description": "Log output to console"
  }
}
<!-- prefix:代码快捷键入口,这里设置cl,当我们在开发中输入cl后就会进入到这里的设置,配合tab健就可以生成console.log( , '打印')

body表示代码的主体,需要设置的代码放在这里

$1表示生成代码后光标首次所在位置

$2写在这个位置,表示在生成console.log()后,代码后面会空出一行,并且表再次按tab键时,光标会转到$2的位置 -->

vue文件中输入自定义指令，快速生成vue3模板

首先在vscode编辑器中

文件–>首选项–>用户代码片段–>点击新建代码片段–取名vue.json 确定

2.把代码放进去。。。

{
    "Print to console": {
      "prefix": "vue3",
      "body": [
        "<!-- $0 -->",
        "<template>",
        "  <div></div>",
        "</template>",
        "",
        "<script lang='ts'>",
        "import { reactive,toRefs,onBeforeMount,onMounted} from 'vue'",
        "interface DataProps {}",

        "export default {",
        "    name: '',",
        "      setup() {",
        "          console.log('1-开始创建组件-setup')",
        "          const data: DataProps = reactive({",
        ""            ,
        "          })",
        "          onBeforeMount(() => {",
        "              console.log('2.组件挂载页面之前执行----onBeforeMount')",
        "          })",
        "          onMounted(() => {",
        "              console.log('3.-组件挂载到页面之后执行-------onMounted')",
        "          })",
        "          const refData = toRefs(data);",
        "          return {",
        "              ...refData,",
        "          }",
        ""  ,
        "      }",
        "  };",
        "</script>",
        "<style scoped>",
        "</style>",
    ],
      "description": "Log output to console"
    }
  }

3.成功啦。新建.vue结尾的文件试试.

输入vue3 按键盘的tab就行