【vscode】 VsCode 代码片段

fruge365

已于 2023-03-18 20:20:44 修改

阅读量4.2k

点赞数 3

分类专栏： Vscode 文章标签： vscode vue.js javascript

于 2022-06-15 22:13:30 首次发布

本文链接：https://blog.csdn.net/qq_46123200/article/details/125305617

版权

Vscode 专栏收录该内容

6 篇文章 2 订阅

订阅专栏

本文介绍了如何在Visual Studio Code中创建用户代码片段，提供React和Vue的模板，帮助开发者快速编写HTML、JS和Vue组件。通过预设代码片段，输入相应的前缀即可自动生成完整的项目结构。

摘要由CSDN通过智能技术生成

1.打开Vscode: 文件->首选项->用户片段（或用快捷键ctrl+shift+p输入snip）
在这里插入图片描述
2.点击用户片段，选择html.json或者新建全局代码片段文件

3.随后会打开一个json文件设置，可直接将以下代码粘贴复制到自己的文件中(步骤：ctrl+A->ctrl+C->ctrl+V),代码写在最下面了，可直接复制

4.代码

// react
  "react": {
    "prefix": "react",
    "body": [
      "<!DOCTYPE html>",
      "<html lang=\"en\">",
      "<head>",
      "<title>amoureux555</title>",
      "<meta charset=\"UTF-8\">",
      "</head>",
      "<body>",
      "<div id=\"app\">",
      "</div>",
      "<script crossorigin src=\"./react.js\"></script>",
      "<script crossorigin src=\"./reactdom.js\"></script>",
      "<script crossorigin src=\"./babel.js\"></script>",
      "<script type=\"text/babel\">",
      "//1.定义组件",
      "",
      "//2.渲染数据",
      "ReactDOM.render(<组件名/>, document.querySelector('#app'))",
      "</script>",
      "</body>",
      "</html>"
    ],
    "description": ""
  },
  // vue
  "vue": {
    "prefix": "vue",
    "body": [
      "<div id=\"root\">",
      "</div>",
      "<script src=\"http://unpkg.zhimg.com/vue\"></script>",
      "<script>",
      "const vm = new Vue({",
      "    el: \"#root\",",
      "    data: {",
      "    },",
      "    methods: {",
      "    },",
      "})",
      "</script>"
    ],
    "description": ""
  },
  // vue2
  "vue2": {
    "prefix": "vue2",
    "body": [
      "<template>",
      "<div>hello!</div>",
      "</template>",
      "<script>",
      "export default {",
      "    ",
      "}",
      "</script>",
      "<style lang=\"scss\" scoped>",
      "    ",
      "</style>"
    ],
    "description": ""
  }

5.新建一个html文件，输入vue或者react就会有代码提示，回车就可以快速生成代码
在这里插入图片描述