首页 > 其他分享 >【技巧】一个命令让VS code快速生成固定的代码片段

【技巧】一个命令让VS code快速生成固定的代码片段

时间:2024-09-12 11:04:18浏览次数:7  
标签:片段 code app VS 生成 html 代码 vue3app

比如我们经常使用固定的代码格式来生成代码片段。

第一步,编写需要生成代码片段的代码,代码示例如下:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app"></div>

  <template id="my-app">
    <div>{{message}}</div>
  </template>

  <script src="js/[email protected]"></script>
  <script>
    const App = {
      template: '#my-app',
      data: function () {
        return {
          message: 'Hello Vue3!'
        }
      },
      methods: {

      }
    }

    Vue.createApp(App).mount('#app');
  </script>
</body>

</html>

第二步,将需要生成的代码片段复制到链接https://snippet-generator.app/中 的左侧面板中,示例截图如下:

image

取一个模板名称例如叫:“vue3app”。

第三步,在VScode中打开User Snippets,不同的操作系统对应的步骤如下。

  • Windows/Linux:File→Preferences→Configure User Snippets.
  • masOs:Code→Preferences→User Snippets

第四步,打开User Snippets面板后,在输入框中输入“html”,并选择html模板,如图所示:

image

image

选择html模板后,会打开一个名为html.json文件。接下来,我们将刚才在一个在线网站生成的代码片段代码放到html.json文件中的{}中,如下示例代码:

"create vue3 app": {
  "prefix": "vue3app",
  "body": [
    "<!DOCTYPE html>",
    "<html lang=\"en\">",
    "",
    "<head>",
    "  <meta charset=\"UTF-8\">",
    "  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
    "  <title>Document</title>",
    "</head>",
    "",
    "<body>",
    "  <div id=\"app\"></div>",
    "",
    "  <template id=\"my-app\">",
    "    <div>{{message}}</div>",
    "  </template>",
    "",
    "  <script src=\"js/[email protected]\"></script>",
    "  <script>",
    "    const App = {",
    "      template: '#my-app',",
    "      data: function () {",
    "        return {",
    "          message: 'Hello Vue3!'",
    "        }",
    "      },",
    "      methods: {",
    "",
    "      }",
    "    }",
    "",
    "    Vue.createApp(App).mount('#app');",
    "  </script>",
    "</body>",
    "",
    "</html>"
  ],
  "description": "create vue3 app"
}

第五步,使用vue3app快速生成模板代码。

在任意html文件中输入“vue3app”,按enter键就可以快速生成刚才定义的代码片段,如图所示:

image

标签:片段,code,app,VS,生成,html,代码,vue3app
From: https://www.cnblogs.com/moqiutao/p/18409773

相关文章

  • RPC接口返回值之争:基本类型 vs 包装类
    RPC接口返回值之争:基本类型vs包装类在分布式系统中,远程过程调用(RPC)是实现服务间通信的常见方式。当我们设计RPC接口时,一个常见的问题是:返回值应该使用基本类型还是包装类?这个问题看似简单,实则涉及到性能、可读性、错误处理等多个方面。今天,我们就来深入探讨这个话题,帮助......
  • 【有奖征文】华为云 CodeArts,AI 重塑的软件开发生产线!
    华为云软件开发生产线CodeArts是一站式、全流程、安全可信的DevSecOps平台,内置华为三十年研发最佳实践,助力效能倍增和数字化转型,支持Web开发、移动应用开发、微服务开发、CloudNative应用开发等典型研发场景,覆盖需求、开发、测试、部署等软件交付全生命周期环节,为开发......
  • LeetCode Hot100刷题记录-142. 环形链表 II
    给定一个链表的头节点head,返回链表开始入环的第一个节点。如果链表无环,则返回null。如果链表中有某个节点,可以通过连续跟踪next指针再次到达,则链表中存在环。为了表示给定链表中的环,评测系统内部使用整数pos来表示链表尾连接到链表中的位置(索引从0开始)。如果pos是......
  • 2024 年 GitLab Global DevSecOps 报告解读
    近日GitLab正式发布了2024年GitLabGlobalDevSecOps报告,报告主题为What'snextinDevSecOps。在全球有超5000位IT人员参与了该报告的调研,超70%为企业管理者,50%以上的受访者所在企业规模超过500人。该报告深刻揭示了在AI技术的发展推动下,企业在IT投资和软件研......
  • 【重学 MySQL】二十五、等值连接vs非等值连接、自连接vs非自连接
    【重学MySQL】二十五、等值连接vs非等值连接、自连接vs非自连接等值连接(Equijoin)vs非等值连接(Non-equijoin)等值连接(Equijoin)非等值连接(Non-equijoin)自连接(Self-join)vs非自连接(Non-self-join)自连接(Self-join)非自连接(Non-self-join)总结在MySQL中,连接(J......
  • verilog vscode 与AI 插件
    Verilog轻量化开发环境背景笔者常用的开发环境VIAVDO,体积巨大,自带编辑器除了linting能用,编辑器几乎不能用,仿真界面很友好,但是速度比较慢。SublimeText,非常好用的编辑器,各种插件使用verilog非常方便,可以自动补全、生成调用、linting等;VSCODE,SublimeText有的插件,VSC......
  • VS Code下载教程
    VSCode下载教程2024年09月VSCode最新下载/使用教程下载教程:官网下载访问VisualStudioCode(VSCode)的官方网站:https://code.visualstudio.com/点击页面上的“DownloadforWindows”安装下载完成后,双击VSCode的安装包文件(例如VSCodeUserSetup-x64-xxx.ex......
  • leetcode刷题day13|二叉树Part01(递归遍历、迭代遍历、统一迭代、层序遍历)
    递归遍历思路:使用递归的方式比较简单。1、递归函数的传参:因为最后输出一个数组,所以需要传入根节点和一个容器,本来想写数组,但发现长度不能确定,所以选择list。2、终止条件:当访问的节点为空时,return3、递归函数的逻辑:先访问一个节点,递归访问其他节点144.二叉树的前序遍历......
  • leetcode刷题day14|二叉树Part02(以递归方法为主:226.翻转二叉树、101. 对称二叉树、104
    226.翻转二叉树思路:利用先序遍历递归翻转1、终止条件:节点为空,return2、参数:root3、递归函数逻辑:处理中间节点,交换;递归左孩子,递归右孩子代码如下:classSolution{publicTreeNodeinvertTree(TreeNoderoot){if(root==null)returnroot;swapC......
  • Day13 二叉树part03| LeetCode 110.平衡二叉树,二叉树的所有路径,左叶子之和,完全二叉树
    110.平衡二叉树110.平衡二叉树定义:左右子树的高度差的绝对值不超过1深度:从上到下查——>前序遍历(中左右)高度:从下到上查——>后序遍历(左右中)classSolution{publicbooleanisBalanced(TreeNoderoot){if(getHeight(root)==-1)......