通过使用vscode自带的用户代码片段功能提高代码开发效率
使用方法在vscode中点击左下角设置，选择用户代码片段即可新建不同文件类型的用户代码片段
html.json
{ "mask&popup": { "prefix": "popup", // 快速创建蒙版弹窗 "body": [ "<div class=\"popupmask\">", " <div class=\"popup$1\">$2</div>", "</div>" ] } }
css.json
"reset": { "prefix": "reset", // 重置基础样式 "body": [ "/* http://meyerweb.com/eric/tools/css/reset/ ", " v2.0 | 20110126 ", " License: none (public domain) ", "*/ ", "html, body, div, span, applet, object, iframe, ", "h1, h2, h3, h4, h5, h6, p, blockquote, pre, ", "a, abbr, acronym, address, big, cite, code, ", "del, dfn, em, img, ins, kbd, q, s, samp, ", "small, strike, strong, sub, sup, tt, var, ", "b, u, i, center, ", "dl, dt, dd, ol, ul, li, ", "fieldset, form, label, legend, ", "table, caption, tbody, tfoot, thead, tr, th, td, ", "article, aside, canvas, details, embed, ", "figure, figcaption, footer, header, hgroup, ", "menu, nav, output, ruby, section, summary, ", "time, mark, audio, video { ", " margin: 0; ", " padding: 0; ", " border: 0; ", " font-size: 100%; ", " font: inherit; ", " vertical-align: baseline; ", "} ", "/* HTML5 display-role reset for older browsers */ ", "article, aside, details, figcaption, figure, ", "footer, header, hgroup, menu, nav, section { ", " display: block; ", "} ", "body { ", " line-height: 1; ", "} ", "ol, ul { ", " list-style: none; ", "} ", "blockquote, q { ", " quotes: none; ", "} ", "blockquote:before, blockquote:after, ", "q:before, q:after { ", " content: ''; ", " content: none; ", "} ", "table { ", " border-collapse: collapse; ", " border-spacing: 0; ", "} " ] }, { "trancenter": { "prefix": "trancenter", // 用于移动元素位置 "body": [ "transform: translate($1, $2); ", "-ms-transform: translate($1, $2); ", "-moz-transform: translate($1, $2); ", "-webkit-transform: translate($1, $2); ", "-o-transform: translate($1, $2); " ] }, "mask&popup": { "prefix": "popup", // 快速生成蒙版弹窗 "body": [ ".popupmask { ", " z-index: 99; ", " position: fixed; ", " left: 0; ", " top: 0; ", " width: 100%; ", " height: 100%; ", " background-color: rgba(0, 0, 0, 0.5); ", "} ", "", ".popupmask .popup1$1 {", " width: $2; ", " height: $3; ", " position: absolute; ", " left: 50%; ", " top: 50%; ", " transform: translate(-50%, -50%); ", " -ms-transform: translate(-50%, -50%); ", " -moz-transform: translate(-50%, -50%); ", " -webkit-transform: translate(-50%, -50%); ", " -o-transform: translate(-50%, -50%); ", " box-sizing: border-box; ", " background-color: #fff; ", " box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.1); ", "} " ] }, "calc": { "prefix": "calc", // calc兼容设置 "body": [ "calc($1); ", "-webkit-calc($1); ", "-moz-calc($1); " ] }, "pingfang": { "prefix": "pingfang", // 苹方字体 "body": [ "font-family: PingFangSC-Regular, sans-serif; " ] }, "yahei": { "prefix": "yahei", // 雅黑字体 "body": [ "font-family: 'Microsoft YaHei', 微软雅黑; " ] } }
javascript.json
{ "Print to console": { "prefix": "log", // 快速创建控制台输出 "body": [ "console.log('$1');", ] } }
vue.json
{ "Vue template": { "prefix": "!vue", // 快速创建vue模板 "body": [ "<template>", " <div id=\"$0\">", "", " </div>", "</template>", "", "<script>", "export default {", " components: {},", "", " props: {},", "", " watch: {},", "", " computed: {},", "", " methods: {},", "", " created() {},", "", " mounted() {}", "}", "</script>", "", "<style scoped>", "", "</style>", ], "description": "Vue模板" }, "Print to console": { "prefix": "log", // 快速创建控制台输出 "body": [ "console.log('$1');", ] } }
less.json
{ /* 用于水平垂直居中时平移浏览器兼容 */ "trancenter": { "prefix": "trancenter", "body": [ "transform: translate($1, $2); ", "-ms-transform: translate($1, $2); ", "-moz-transform: translate($1, $2); ", "-webkit-transform: translate($1, $2); ", "-o-transform: translate($1, $2); " ] }, /* transform浏览器兼容 */ "transform": { "prefix": "transform", "body": [ "transform: $1; ", "-ms-transform: $1; ", "-moz-transform: $1; ", "-webkit-transform: $1; ", "-o-transform: $1; " ] }, /* keyframes浏览器兼容 */ "keyframes": { "prefix": "keyframes", "body": [ "@keyframes $1 { ", " 0%{ ", " transform: $2;", " } ", " 25%{ ", " transform: $3;", " } ", " 50%{ ", " transform: $4", " } ", " 75%{ ", " transform: $5", " } ", " 100%{ ", " transform: $6", " } ", "} ", "@-webkit-keyframes $1 { ", " 0%{ ", " -webkit-transform: $2;", " } ", " 25%{ ", " -webkit-transform: $3;", " } ", " 50%{ ", " -webkit-transform: $4", " } ", " 75%{ ", " -webkit-transform: $5", " } ", " 100%{ ", " -webkit-transform: $6", " } ", "} ", "@-o-keyframes $1 { ", " 0%{ ", " -o-transform: $2;", " } ", " 25%{ ", " -o-transform: $3;", " } ", " 50%{ ", " -o-transform: $4", " } ", " 75%{ ", " -o-transform: $5", " } ", " 100%{ ", " -o-transform: $6", " } ", "} ", "@-moz-keyframes $1 { ", " 0%{ ", " -moz-transform: $2;", " } ", " 25%{ ", " -moz-transform: $3;", " } ", " 50%{ ", " -moz-transform: $4", " } ", " 75%{ ", " -moz-transform: $5", " } ", " 100%{ ", " -moz-transform: $6", " } ", "} ", ] }, /* 蒙版弹窗 */ "mask&popup": { "prefix": "popup", "body": [ ".popupmask { ", " z-index: 99; ", " position: fixed; ", " width: 100%; ", " height: 100%; ", " background-color: rgba(0, 0, 0, 0.5); ", "} ", "", ".popupmask .popup1 {", " width: $1; ", " height: $2; ", " position: absolute; ", " left: 50%; ", " top: 50%; ", " transform: translate(-50%, -50%); ", " -ms-transform: translate(-50%, -50%); ", " -moz-transform: translate(-50%, -50%); ", " -webkit-transform: translate(-50%, -50%); ", " -o-transform: translate(-50%, -50%); ", " box-sizing: border-box; ", "} " ] }, /* 计算属性兼容 */ "calc": { "prefix": "calc", "body": [ "calc(~'$1'); ", "-webkit-calc(~'$1'); ", "-moz-calc(~'$1'); " ] }, /* css3兼容设置 */ "css3compatible": { "prefix": "css3compatible", "body": [ ".keyframes (@name, @frames) { ", " @-webkit-keyframes @name { ", " @frames(); ", " } ", " @-moz-keyframes @name { ", " @frames(); ", " } ", " @-ms-keyframes @name { ", " @frames(); ", " } ", " @-o-keyframes @name { ", " @frames(); ", " } ", " @keyframes @name { ", " @frames(); ", " } ", "} ", " ", ".transform(@attr) { ", " -webkit-transform: @attr; ", " -moz-transform: @attr; ", " -o-transform: @attr; ", " -ms-transform: @attr; ", " transform: @attr; ", "} ", " ", ".transformOrigin(@attr) { ", " -webkit-transform-origin: @attr; ", " -moz-transform-origin: @attr; ", " -o-transform-origin: @attr; ", " -ms-transform-origin: @attr; ", " transform-origin: @attr; ", "} ", " ", ".animation(@attr) { ", " -webkit-animation: @attr; ", " -moz-animation: @attr; ", " -ms-animation: @attr; ", " -o-animation: @attr; ", " animation: @attr; ", "} " ] } }
632
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
