Vscode好用的前端自界说代码

在vscode中用户可以通过自界说代码模板和设置自界说代码快捷键。在前端开发范畴，一些好的自界说代码可以或许加快我们的开发进度，提升开发效率。下面保举一些常用的自界说代码片段。
设置自界说代码文件（snippets）

通过vscode个人设置的Snippets选项选择大概创建一个自界说snippets文件。

snippets的文件格式类似JSON，文件中key的寄义如下：
prefix：设置自界说代码对应的快捷键。
body：自界说代码片段主体，为数组情势，具体可参考后续代码。
description：对该段自界说代码片段的描述。
保举自界说代码片段

let：通过自界说let代码可以更加方便的界说变量。

1. // ${2:key为占位符，默认为key，输入完后按Tab跳转到value处。
2. "let": {
3.                 "prefix": "let", //自定义快捷键
4.                 "body": [
5.                         "let ${2:key} = ${3:value};"
6.                 ],
7.                 "description": "let声明变量"
8. },

复制代码

实际效果：

logs：在实际开发过程中，console.log是常用的调试方法之一，通过自界说代码片段可以或许快速的生成调试代码

1. //$1 $1 为两个同名占位符，触发自定义代码段后两个占位符同时出现光标
2. "logs": {
3.     "prefix": "logs",
4.     "body": [
5.         "console.log('！！！这是$1', $1);"
6.     ],
7.     "description": "控制台打印变量"
8. },

复制代码

实际效果：

logg：大概接纳下列方法，复制想要打印的变量名，随后logg触发自界说代码片段即可。！！！强烈保举

1. //$CLIPBOARD$1能够自动识别剪切板的内容，强烈推荐！！！
2. "paste to log": {
3.                 "prefix": "logg",
4.                 "body": [
5.                         "console.log('！！！这是$CLIPBOARD$1', $CLIPBOARD$1);"
6.                 ],
7.                 "description": "打印出剪切板内容"
8.         },

复制代码

实际效果：

vue3：设置该快捷键可以一键生成vue文件的底子框架

1. "vue3": {
2.                 "prefix": "vue3",
3.                 "body": [
4.                         "<template>",
5.                         "    <div>",
6.                         "$1",
7.                         "    </div>",
8.                         "</template>\n",
9.                         "<script lang="ts" setup>",
10.                         "import { ref } from "vue" ",
11.                         "$2",
12.                         "</script>\n",
13.                         "<style lang="less" scoped>",
14.                         "$3",
15.                         "</style>"
16.                 ],
17.                 "description": "vue3"
18.         },

复制代码

实际效果：

完整代码

为了方便铁铁们的利用和调试，因此贴出完整代码，如下所示（好使的话点个赞和收藏吧，球球了）：

1. {        "vue3": {
2.                 "prefix": "vue3",
3.                 "body": [
4.                         "<template>",
5.                         "    <div>",
6.                         "$1",
7.                         "    </div>",
8.                         "</template>\n",
9.                         "<script lang="ts" setup>",
10.                         "import { ref } from "vue" ",
11.                         "$2",
12.                         "</script>\n",
13.                         "<style lang="less" scoped>",
14.                         "$3",
15.                         "</style>"
16.                 ],
17.                 "description": "vue3"
18.         },        "logs": {                "prefix": "logs",                "body": [                        "console.log('！！！这是$1', $1);"                ],                "description": "控制台打印变量"        },        "let": {                "prefix": "let",                "body": [                        "let ${2:key} = ${3:value};"                ],                "description": "let声明变量"        },        "paste to log": {                "prefix": "logg",                "body": [                        "console.log('！！！这是$CLIPBOARD$1', $CLIPBOARD$1);"                ],                "description": "打印出剪切板内容"        },}

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。