VS code 自定义快捷输入

作者: 小贤笔记 | 来源:发表于2018-05-14 19:35 被阅读95次

位置

  • ctrl+shift+p
  • 搜索: snippets
  • 输入类型: 比如html、javascript

参数说明

  • prefix:使用代码段的快捷入口
  • body:需要设置的代码放在这里,字符串间换行的话使用\r\n换行符隔开.如果值里包含特殊字符需要进行转义,多行代码以","分隔(在引号后面写逗号)
  • $0:定义最终光标位置
  • $1:定义第一次光标位置,按tab键可进行快速切换,还可以有$2,$3,$4,$5...
  • description:代码段描述,在使用智能感知时的描述

HTML

//自定义
    "phone": {
        "prefix": "ph",
        "body": [
            "<!DOCTYPE html>",
            "<html lang='en'>",
            "<head>",
            "    <meta charset='UTF-8'>",
            "    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>",
            "    <meta name='viewport' content='width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0'/>",
            "    <title>Titile</title>",
            "</head>",
            "<body>",
            "<script type='text/javascript'>",
            "    $('html').css({fontSize:$(window).width()/375*100 + 'px'});",
            "    $('body').css({minHeight:$(window).height()});",
            "</script>",
            "</body>",
            "</html>"
        ],
        "description": "script"
    },
    "script": {
        "prefix": "sc",
        "body": [
            "<script type='text/javascript' src='$1'></script>"
        ],
        "description": "script"
    }

JavaScript

//自定义
"function": {
    "prefix": "fn",
    "body": [
        "function$1($2) {\r\n\t$3\r\n}"
    ],
    "description": "function(){}"
},
"console.log": {
    "prefix": "co",
    "body": [
        "console.log ($1);"
    ],
    "description": "console.log()"
},
"alert": {
    "prefix": "al",
    "body": [
        "alert ($1);"
    ],
    "description": "alert()"
},
"class": {
    "prefix": "cl",
    "body": [
        "$('.$1')"
    ],
    "description": "class"
},
"id": {
    "prefix": "id",
    "body": [
        "$('#$1')"
    ],
    "description": "id"
},
"on": {
    "prefix": "on",
    "body": [
        "on ('click',function () {\r\n\t$1\r\n})"
    ],
    "description": "on"
},
"ajax": {
    "prefix": "aj",
    "body": [
        //"$.ajax({\r\n\turl:$1,\r\n\tdata:{\r\n\t\t$2\r\n\t},\r\n\ttype:'post',\r\n\tdataType:'JSON',\r\n\tsuccess:function (res) {\r\n\t\t$3\r\n\t}\r\n})"
        "$.ajax({",
        "    url: $1,",
        "    data:{",
        "        $2",
        "    },",
        "    type: 'post',",
        "    dataType: 'JSON',",
        "    success:function (res) {",
        "        $3",
        "    }",
        "})"
    ],
    "description": "ajax"
},
"for": {
    "prefix": "fo",
    "body": [
        "for (let i=0; i<$1; i++) {\r\n\t$2\r\n}"
    ],
    "description": "for"
},
"axios": {
    "prefix": "ax",
    "body": [
        "axios.$1(__PROJECTPATH__ + `$2`, {",
        "   $3",
        "})",
        ".then(function (response) {",
        "   console.log(response);",
        "})",
        ".catch(function (error) {",
        "   console.log(error);",
        "});",
    ],
    "description": "axios"
}

vue

//自定义(移动端)
"vue": {
    "prefix": "vu",
    "body": [
        "<!-- $1 -->",
        "<template>",
        "    <div>",
        "        $2",
        "    </div>",
        "</template>",
        "",
        "<script>",
        "    export default {",
        "        name: '',",
        "        data () {",
        "            return {",
        "                ",
        "            }",
        "        },",
        "        components: {",
        "            ",
        "        },",
        "        computed: {",
        "            ",
        "        },",
        "        methods: {",
        "            ",
        "        }",
        "        created() {",
        "            ",
        "        }",
        "    }",
        "</script>",
        "",
        "<style scoped lang='less'>",
        "    ",
        "</style>"
    ],
    "description": "Vue templet"
}

相关文章

  • VS code 自定义快捷输入

    位置 ctrl+shift+p 搜索: snippets 输入类型: 比如html、javascript 参数说明...

  • vscode新建flutter项目

    1:启动 VS Code 2:使用快捷键新建flutter项目:command + shift + p 3:输入 ...

  • VS Code使用知识点

    VS Code 官网:https://code.visualstudio.com VS Code 快捷键 1. c...

  • Coder:进击的服务器Web版VSCode

    自从用上 VS Code 之后,断断续续写过几篇文章。比如: VS Code 使用初体验 VS Code 常用快捷...

  • vs code 修改快捷键(提示快捷键)

    vs code 提示快捷键 ctrl+space 基本上被输入法快捷键占用文件->首选项->键盘快捷方式(ctrl...

  • Mac 使用命令行打开 VS Code

    打开 VS Code 打开控制面板(快捷键 ⇧⌘P),输入 ‘shell command’ 在提示里看到 Shel...

  • vs code 快捷键

    VS Code 的常用快捷键和插件一、vs code 的常用快捷键1、注释: a) 单行注释:[ctrl+k,ct...

  • VS Code 快捷键

    VS Code 的常用快捷键和插件一、vs code 的常用快捷键1、注释: a) 单行注释:[ctrl+k,ct...

  • VScode常用快捷键

    VS Code 的常用快捷键和插件一、vs code 的常用快捷键1、注释: a) 单行注释:[ctrl+k,ct...

  • VS CODE 快捷键

    VS Code 快捷键 主命令框 F1 或 Ctrl+Shift+P: 打开命令面板。在打开的输入框内,可以输入任...

网友评论

本文标题:VS code 自定义快捷输入

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