【vscode】 VsCode 代码片段

简介: 【vscode】 VsCode 代码片段

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就会有代码提示,回车就可以快速生成代码

目录
相关文章
|
7天前
|
JSON 数据格式
【❤强哥推荐❣】VSCode常用快捷键配置文件表、代码片段,记得收藏
【❤强哥推荐❣】VSCode常用快捷键配置文件表、代码片段,记得收藏
【❤强哥推荐❣】VSCode常用快捷键配置文件表、代码片段,记得收藏
|
7天前
|
JavaScript
设置VSCode快捷键vue生成代码片段
设置VSCode快捷键vue生成代码片段
设置VSCode快捷键vue生成代码片段
|
9月前
VSCode快捷开发必备配置——配置用户代码片段
VSCode快捷开发必备配置——配置用户代码片段
110 0
|
前端开发 C++
VS Code配置snippets代码片段快速生成html模板,提高前端编写效率
VS Code配置snippets代码片段快速生成html模板,提高前端编写效率
169 0
|
JavaScript C++
vscode里怎么添加vue代码片段
vscode里怎么添加vue代码片段
167 0
vscode里怎么添加vue代码片段
|
JSON JavaScript 前端开发
给VSCode定义代码片段,让coding速度快到飞起~
代码片段可以理解为模板,当我们输入指定时,按下【tab】或者【enter】即可出现对应的模板。 只要代码片段写的好,升职加薪少不了~ 代码片段的好处与坏处 coder对代码片段的评价褒贬不一
139 0
VsCode通过snippet generator快速生成自定义代码片段
VsCode通过snippet generator快速生成自定义代码片段
880 0
VsCode通过snippet generator快速生成自定义代码片段
|
JSON JavaScript 前端开发
一起来写 VS Code 插件:为你的团队提供常用代码片段
VS Code 是前端开发者最佳的开发工具,你在开发中是否疲倦了从一个文件拷贝来新建一个文件呢?那么如何发布一个 VS Code 插件?
249 0
|
C++ 计算机视觉 开发者
VS Code项目中通过npm包的方式共享代码片段的方案实现
上周在 “VS Code项目中共享自定义的代码片段方案” 的文章中提到过一个共享代码片段的方案,上周经过调研后并没有发现现成的插件,就抽了点空实现了这个方案,最终产出Share Snippets 这个插件去实现这个设想
VS Code项目中共享自定义的代码片段方案
VS Code项目中共享自定义的代码片段方案