首页 计算机 Editors

# 位置

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

# 参数说明

  • 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"
}

参考链接：

VS code 自定义快捷输入_小贤笔记 - CSDN 博客_vscode 快捷输入