[学习交流] 【广州前端】- 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';"
    }
}

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

点击有惊喜

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 【广州前端】- VSCode使用（二）之 用户代码片段详解

0 个回复

[学习交流] 【广州前端】- VSCode使用（二）之用户代码片段详解