您现在的位置是：首页 > 文章详情

VS Code 自定义快捷输入

日期：2018-05-13点击：371收藏

位置

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

原文链接：https://yq.aliyun.com/articles/634951

关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有，本站原创内容转载请注明来源。