手记

VS Code 自定义快捷输入

位置

  • 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>",             "    ",             "</style>"         ],         "description": "Vue templet"     }



作者:小贤笔记
链接:https://www.jianshu.com/p/a5094650e194


0人推荐
随时随地看视频
慕课网APP