本文是从简书复制的, markdown语法可能有些出入, 想看"正版"和更多内容请关注 简书: 小贤笔记

位置

  • 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 自定义快捷输入的更多相关文章

  1. Idea 自定义快捷代码输入 如syso => System.out.println()

    前言 之前一直用的Eclipse System.out.println()的快捷代码输入 是 syso,但是在Idea 不好使用了,后来搜索了一番才知道,在Idea中的快捷输入是 sout,这里我就想 ...

  2. 135_Power Query M语言快捷输入之输入法设置自定义短语

    博客:www.jiaopengzi.com 焦棚子的文章目录 请点击下载附件 一.背景 因为工作原因,把电脑重装了下,当敲M的时候总感觉那里不对.原来是我的M自定义短语没有同步.由于我的自定义短语还是 ...

  3. js快捷输入日期

    点击这里查看效果http://keleyi.com/keleyi/phtml/jstexiao/10.htm 以下式代码: <!DOCTYPE html> <html> < ...

  4. Eclipse 快捷键 快捷输入

    快捷键: 1. ctrl+shift+r:打开资源 这可能是所有快捷键组合中最省时间的了.这组快捷键可以让你打开你的工作区中任何一个文件,而你只需要按下文件名或mask名中的前几个字母,比如appli ...

  5. Mac Oracle SqlDeveloper 快捷输入

    用惯了 plsql 的快捷输入,换了 Mac Oracle SqlDeveloper反倒是找不到了,翻出去找了几次终于找到 SqlDeveloper -- preferences -- 数据库(dat ...

  6. PL/SQL语句快捷输入设置

    设置PL/SQL语句快捷输入的方法,让你成为高效率的人. 1.打开PL/SQL,输入用户并登录 2.并打开Tools->Preferences->Editor->AutoReplac ...

  7. 教你一招：在PowerPoint中自定义可输入文本的占位符

    日常生活中,当我们设计多媒体课件时,默认的版式其实已经够用了.但是,很多时候,我们需要更加个性一点,所以,我们需要自定义很多东西.本文介绍在PowerPoint中自定义可输入文本的占位符. 一.占位符 ...

  8. VSCode中快捷输入HTML代码

    VSCode中有一些快捷编辑HTML的方法,能大大提高工作效率,在这记录一些. 1.输入html:5,然后按tab键或enter键,效果如下: <!-- 输入html或者html:5生成页面模板 ...

  9. Settings > Editor > Live Templates 中自定义快速输入

    Settings > Editor > Live Templates 中自定义快速输入

随机推荐

  1. C#-WinForm-★★★★★跨窗体 构造函数传值 及应用—登录式窗口传值、如何关闭主页面时关闭应用程序、如何打开唯一窗口★★★★★

    构造函数可以传任意类型的值,并可以同时传多个值 结构函数传值的初步应用——简单的登陆式界面 现在我有两个窗体Form3和Form4,如下,如何点击Form3中的按钮后,打开Form4并将Form3中的 ...

  2. 1093 字符串A+B (20 分)

    #include <iostream> using namespace std; int main() { int n; string s1, s2; getline(cin,s1); g ...

  3. 启用mysql日志记录执行过的sql

    在mysql命令行或者客户端管理工具中执行:SHOW VARIABLES LIKE "general_log%"; 结果: general_log OFF general_log_ ...

  4. 最近总想着写一个模拟alert和confirm插件，代替原生的

    msgbox-confirm github:  https://github.com/tong-mikasa/msgbox-confirm 主要js代码,scss代码 (function($) { $ ...

  5. 问题诊断神器arthas

    https://github.com/alibaba/arthas 镜像地址 https://gitee.com/arthas/arthas OGNL https://commons.apache.o ...

  6. Removable Storage Devices文件夹删除方法

    Windows10的桌面上出现了名为“Removable Storage Devices”的文件夹删除方法 比较莫名奇妙,突然桌面上出现了名为“Removable Storage Devices”的文 ...

  7. grunt 实例构建（四）

    相关插件的引用: grunt-usemin  对页面的操作 grunt-contrib-cssmin  压缩css load-grunt-tasks 瘦身gruntfile grunt-rev给md5 ...

  8. Python+Selenium之常用模块

    要用webdriver:from selenium import webdriver eg: driver = webdriver.Chrome()      driver.maximize_wind ...

  9. Spring异常：Annotation-specified bean name.. for bean class ...

    Spring重命名问题.对照项目中的注解,查找@Service是否重重名.由于Spring是在注解下按配置扫描的方式去创建对象的,那么两个重名的注解也就不成立了. 备注,特别注意test包下有没有通过 ...

  10. db2 monitor event

    1.创建事件监控器至少需要哪些权限? DBADM authority SQLADM authority 2.事件监控器的种类有哪些? 3. db2 flush event monitor eventm ...