黑马程序员技术交流社区

标题: 【广州前端】- VSCode使用(二)之 用户代码片段详解 [打印本页]

作者: AngularBaby    时间: 2017-12-21 17:30
标题: 【广州前端】- VSCode使用(二)之 用户代码片段详解
本帖最后由 AngularBaby 于 2017-12-28 17:28 编辑

1、 打开vscode
2、 点击 ' 文件 - 首选项 - 用户代码片段 '


3、 选择需要配置的语言,如html


4、 进入html.json文件,配置用户代码片段
由于是JSON文件,内部均为键值对的形式,注意键名要加双引号
例:
[AppleScript] 纯文本查看 复制代码

"link": {
        "prefix": "link",
        "body": "<link rel=\"stylesheet\" type=\"text/css\" href=\"$1\"/>",
        "description": "my link tag"
    }


详解:
"link"            ----    键名
"prefix"         ----    前缀(关键字)
"body"          ----    提示的代码片段正文,格式可以是 字符串 或 数组:字符串换行使用"\n",转义使用"\";数组中每一项为一行字符串,索引值即为行数
"discription" ----    提示词的描述

下面是作者常用的代码段,复制到对应语言的json文件中即可使用
html:
[AppleScript] 纯文本查看 复制代码
 
{
"link": {
        "prefix": "link",
        "body": "<link rel=\"stylesheet\" type=\"text/css\" href=\"$1\"/>",
        "description": "my link rth"
    },
    "script tag": {
        "prefix": "scm",
        "body": [
            "<script src='$1'></script>"
        ],
        "description": "my script with src"
    },
    "template": {
        "prefix": "tmp",
        "body": [
            "<script type=\"text/template\" id=\"tmp\">",
            "$1",
            "</script>"
        ],
        "description": "my template"
    },
    "style": {
        "prefix": "stm",
        "body": [
            "<style>",
            "   * {",
            "       margin: 0;",
            "       padding: 0;",
            "   }",
            "   $1",
            "</style>"
        ],
        "description": "my style with p0m0"
    },
    "meta": {
        "prefix": "meta",
        "body": [
            "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no\">"
        ],
        "description": "理想视口"
    },
    "canvas template": {
        "prefix": "cvs",
        "body": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n    <title>Document</title>\n    <style>\n        canvas {\n            border: 1px solid #ccc;\n        }\n    </style>\n</head>\n\n<body>\n    <canvas width=\"800\" height=\"600\"></canvas>\n    <script>\n        var canvas = document.querySelector(\"canvas\");\n        var ctx = canvas.getContext(\"2d\");\n\n        $1\n\n    </script>\n</body>\n\n</html>",
        "description": "canvas模板"
    }
}


javascript
[AppleScript] 纯文本查看 复制代码

{
    "console log": {
        "prefix": "log",
        "body": "console.log('$1');"
    },
    "For loop": {
        "prefix": "forloop",
        "body": "for (var i = 0; i < ${1:array}.length; i++) {\n$2\n}"
    },
    "Function": {
        "prefix": "func",
        "body": "function $1($2) {\n$3\n}"
    },
    "document.querySelector": {
        "prefix": "dq",
        "body": "var $1 = document.querySelector('$1');"
    },
    "document.querySelectorAll": {
        "prefix": "dqa",
        "body": "var $1 = document.querySelectorAll('$1');"
    },
    "use strict": {
        "prefix": "use",
        "body": "'use strict'"
    },
    "const": {
        "prefix": "cst",
        "body": "const $1 = require('$1');"
    },
    "writeHead": {
        "prefix": "rwh",
        "body": "res.writeHead({\n'Content-Type': 'application/json; charset=utf-8',\n'Access-Control-Allow-Origin': '*',\n'Access-Control-Allow-Methods': '*'\n})"
    },
    "import": {
        "prefix": "ipf",
        "body": "import $1 from '$1';"
    }
}


点击查看更多精彩前端资源
点击有惊喜





欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2