美文网首页
VSCode设置快捷创建常用代码段

VSCode设置快捷创建常用代码段

作者: lazy_tomato | 来源:发表于2020-04-14 09:41 被阅读0次

VSCode设置快捷创建常用代码段

1.前言

由于最近一直写一些关于vue的简单的demo,所以一直频繁的敲一些重复性的代码,刚好发现了VSCode的这个功能(其他编辑器同样也有),所以写一个简单的教程,非常方便,好了话不多说,直接来。

2. VSCode设置

  1. 打开VSCode

  2. 文件

  3. 首选项

  4. 用户代码段

  5. 新建一个全局代码段(根据个人需求选择)

  6. 取名 自定义.json

  7. 配置一下代码

    // vue模板
     {
         "doc for vue": {
             "prefix": "vue",
             "body": [
                 "<!DOCTYPE html>",
                 "<html>",
                 "",
                 "<head>",
                 "    <meta charset=\"UTF-8\">",
                 "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">",
                 "    <title>${1:Document}</title>",
                 "    <script src=${2:\"./lib/Vue2.6.11.js\"}></script>",
                 "</head>",
                 "",
                 "<body>",
                 "    <div id='app'>",
                 "     ${3}",
                 "    </div>",
                 "    <script>",
                 "        var vm = new Vue({",
                 "            el: '#app',",
                 "            data: {",
                 "                ${4} ",
                 "            },  ",
                 "            methods: {",
                 "                ${5} ",
                 "            }",
                 "        })",
                 "    </script>",
                 "</body>",
                 "",
                 "</html>"
             ],
             "description": "快速生成vue"
         }
     }
    
    
  • prefix 设置你快捷输入的指令(例如我们之前敲!就会出html基本模板)
  • body 你要快捷生成的代码(根据自身需求区设置)
  • description文件说明
  • 注意一下文件缩进

相关文章

  • VSCode设置快捷创建常用代码段

    VSCode设置快捷创建常用代码段 1.前言 由于最近一直写一些关于vue的简单的demo,所以一直频繁的敲一些重...

  • 创建VScode代码段

    本文只描述在VC Code中创建自己的代码片段,其他编辑器,请自行查阅。 打开VS Code,按F1 打开命令窗口...

  • Linux常用指令

    Linux常用指令 常用快捷键 创建快捷方式 上传文件rz/sz 设置软连接(创建快捷方式) 重启服务 检查网卡地...

  • iOS十种常用代码片

    把常用代码写入代码块, 输入快捷单词就能弹出对应的代码段 1. 设置 UI setupUI 2. 四种类型的懒加载...

  • 常用vue代码片段

    vue单页面开发中,经常有些公共的代码需要重复写,可以通过设置代码片段,在创建页面是,通过快捷键自动生成常用的公共...

  • Intellij IDEA使用总结

    最近学Java用到这款IDE,总结一下备忘 常用快捷键 查询快捷键 自动代码 编辑快捷键 常用配置 设置JDK 显...

  • vscode代码注释插件

    推荐一个很好用的vscode代码注释插件koroFileHeader,具体使用参考下面博客 常用快捷键 windo...

  • vscode使用技巧

    一、创建新建文件模板: 1.打开vscode,找到用户代码片段 2.在当前工作空间下创建代码片段,也可设置全局代码...

  • VScode 快捷键大全

    VScode 快捷键大全 [TOC] 最最常用的 vscode 快捷键 快捷键功能F2重命名符号Ctrl + L选...

  • ios 设置快捷代码段

    在开发过程中编写常用的代码段我们可以设置快捷的方式来快速编写从而提高开发效率, 自定义的code snippet配...

网友评论

      本文标题:VSCode设置快捷创建常用代码段

      本文链接:https://www.haomeiwen.com/subject/cstzmhtx.html