ToB企服应用市场:ToB评测及商务社交产业平台

标题: Vscode好用的前端自界说代码 [打印本页]
作者: 东湖之滨    时间: 2024-12-13 00:22
标题: 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企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4