VS Code 自定义快捷输入
位置 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" }
