VS code 自定义快捷输入

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

位置

ctrl+shift+p
搜索: snippets
输入类型: 比如 html、javascript

参数说明

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"
	}