开发者社区> 小贤笔记> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

VS Code 自定义快捷输入

简介: 位置 ctrl+shift+p 搜索: snippets 输入类型: 比如 html、javascript 参数说明 prefix:使用代码段的快捷入口 body:需要设置的代码放在这里,字符串间换行的话使用\r\n换行符隔开.
+关注继续查看

位置

  • ctrl+shift+p
  • 搜索: snippets
  • 输入类型: 比如 htmljavascript

参数说明

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

常用字符说明

  • \\ 反斜杠
  • \a 警告
  • \b 退格符
  • \f 换页符
  • \n 换行符
  • \r 回车符
  • \t Tab 符
  • \v 垂直 Tab 符
  • \u 使用数字指定的Unicode 字符, 如 \u2000
  • \x 使用十六进制数指定的Unicode 字符, 如 \xc8
  • \0 空值

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"
    },
    "for": {
        "prefix": "fo",
        "body": [
            "for (let i = 0; i < $1; i++) {\r\n\t$2\r\n}"
        ],
        "description": "for"
    },
    "if": {
        "prefix": "ifif",
        "body": [
            "if ($1) {\r\n\t$2\r\n}"
        ],
        "description": "if"
    },
    "ifElse": {
        "prefix": "ifel",
        "body": [
            "if ($1) {\r\n\t$2\r\n} else {\r\n\t$3\r\n}"
        ],
        "description": "ifElse"
    },
    "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"
    },
    "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 风格指南

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Vue中 实现右键自定义菜单
Vue中 实现右键自定义菜单
18 0
自定义消息转换器|学习笔记
快速学习自定义消息转换器
15 0
自定义日志配置文件|学习笔记
快速学习自定义日志配置文件
15 0
【laravel】@5 自定义路由文件
【laravel】@5 自定义路由文件
46 0
访问日志格式的自定义
在第一小节中经过几步一个访问日志组件已成型,但为了增加用户自定义能力我们还是要继续做点事,对于用户自定义的实现最经典的做法就是引入变量表示,例如定义%a表示远程主机IP、%A表示本机IP等等,然后在写入之前用相应逻辑把变量替换成相应的值写入日志。
720 0
自定义 标签
    usertag.tld 1.0 2.0 baoyou /usertag userinfo com.baoyou.test.autotag.
829 0
+关注
小贤笔记
越努力, 越幸运
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载