zoukankan      html  css  js  c++  java
  • VS code 自定义快捷输入

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

    位置

    • ctrl+shift+p
    • 搜索: snippets
    • 输入类型: 比如 htmljavascript

    参数说明

    • prefix:使用代码段的快捷入口
    • body:需要设置的代码放在这里,字符串间换行的话使用 换行符隔开.如果值里包含特殊字符需要进行转义,多行代码以","分隔(在引号后面写逗号)
    • $0:定义最终光标位置
    • $1:定义第一次光标位置,按tab键可进行快速切换, 还可以有 $2, $3, $4, $5 ...
    • description:代码段描述,在使用智能感知时的描述

    常用字符说明

    • \ 反斜杠
    • a 警告
    •  退格符
    • f 换页符
    • 换行符
    • 回车符
    • Tab 符
    • v 垂直 Tab 符
    • u 使用数字指定的Unicode 字符, 如 u2000
    • x 使用十六进制数指定的Unicode 字符, 如 xc8
    • 空值

    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) {
    	$3
    }"
            ],
            "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 () {
    	$1
    })"
            ],
            "description": "on"
        },
        "for": {
            "prefix": "fo",
            "body": [
                "for (let i=0; i<$1; i++) {
    	$2
    }"
            ],
            "description": "for"
        },
        "if": {
            "prefix": "ifif",
            "body": [
                "if ($1) {
    	$2
    }"
            ],
            "description": "if"
        },
        "ifElse": {
            "prefix": "ifel",
            "body": [
                "if ($1) {
    	$2
    } else {
    	$3
    }"
            ],
            "description": "ifElse"
        },
        "ajax": {
            "prefix": "aj",
            "body": [
                // "$.ajax({
    	url:$1,
    	data:{
    		$2
    	},
    	type:'post',
    	dataType:'JSON',
    	success:function (res) {
    		$3
    	}
    })"
                "$.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"
    	}
    
  • 相关阅读:
    SQL注入详解
    Nginx跨域及Https配置
    GET请求和POST请求的request和response的中文乱码问题
    创建Maven工程
    Maven环境变量配置
    Cookie&Session会话技术
    Maven库站
    20191002思维导图工具MindManager 000 033
    20190930-02 Redis持久化方式一:RDB及修改RDB的默认持久化策略 000 032
    Tomcat配置HTTPS方式生成安全证书
  • 原文地址:https://www.cnblogs.com/shenxianhui/p/9361957.html
Copyright © 2011-2022 走看看