你想成为风一般的爱(ban)码(zhuan)仕(de)么

发表于 | 分类于

user snippets用户自定义代码片段, 贴上我的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
// vue.json
{
	// Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
	"Vue": {
		"prefix": "vue",
		"body": [
			"<template>",
			"\t<div class=\"$1-root\">",
			"\t\t",
  		"\t</div>",
			"</template>",
			"",
			"<script type=\"text/ecmascript-6\">",
			"export default {",
			"\tdata () {",	
			"\t\treturn {",		
			"\t\t\tdata: ''",			
			"\t\t}",	
			"\t}",
			"}",
			"</script>",
			"",
			"<style scoped lang=\"stylus\" rel=\"stylesheet/stylus\">",
			"@import \"~styles/mixin\"",
			"",
			".$1-root",
			"</style>",
		],
		"description": "vue"
	},
	"Print to console": {
		"prefix": "lg",
		"body": [
			"console.log('$1')"
		],
		"description": "Log output to console"
	},
	"Print to warn": {
		"prefix": "cw",
		"body": [
			"console.warn('$1')"
		],
		"description": "Print to warn"
	},
	"Arrow function": {
		"prefix": "af",
		"body": [
			"($1) => {",
			"  $2",
			"}"
		],
		"description": "Arrow function"
	},
	"Let": {
		"prefix": "l",
		"body": [
			"let $1 = $2"
		],
		"description": "Let"
	},
	"Const": {
		"prefix": "c",
		"body": [
			"const $1 = $2"
		],
		"description": "Const"
	},
	"Var": {
		"prefix": "v",
		"body": [
			"var $1 = $2"
		],
		"description": "Var"
	},
	"Import": {
		"prefix": "i",
		"body": [
			"import $1 from '$2'"
		],
		"description": "import"
	},
	"Import object": {
		"prefix": "im",
		"body": [
			"import { $1 } from '$2'"
		],
		"description": "import object"
	},
	"Export": {
		"prefix": "e",
		"body": [
			"export $1"
		],
		"description": "export"
	},
	"Function": {
		"prefix": "fn",
		"body": [
			"function $1 ($2) {",
			"\t$3",
			"}"
		],
		"description": "function"
	},
	"Arrow function": {
		"prefix": "af",
		"body": [
			"($1) => {",
			"\t$2",
			"}"
		],
		"description": "arrow function"
	},
	"Return": {
		"prefix": "r",
		"body": [
			"return $1"
		],
		"description": "return"
	},
	"If": {
		"prefix": "if",
		"body": [
			"if ($1) {",
			"  $2",
			"}"
		],
		"description": "if"
	},
	"Comment": {
		"prefix": "/",
		"body": [
			"/**",
			" * $1",
			" **/"
		],
		"description": "comment"
	}
}

用法

       新建一个test.vue文件输入vue, 你会看到提示
vue
       然后tab, 就会duang~, 有了如下代码, 注意$1出会用光标占位
template
       同理, lg + tab你会得到你经常使用的断点, af + tab你会得到一个风骚的箭头函数

emmet / zen coding

html简写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// '#' 创建一个id特性
// '.' 创建一个类特性
// '[]' 创建一个自定义特性
// '>' 创建一个子元素
// '+' 创建一个兄弟元素
// '^' 提升元素层次
// '*' 相当于乘号,会创建n次相同的东西
// '$' 代替一个自增的数字
// '$$' 用于有填充位的数字比如00,01
// '{}' 创建元素的文本
// 示例
// ul#container>li.item.highlight[data="" role=""]{text$}*5^ol>li*2
// 效果
<ul id="container">
  <li class="item highlight" data="" role="">text1</li>
  <li class="item highlight" data="" role="">text2</li>
  <li class="item highlight" data="" role="">text3</li>
  <li class="item highlight" data="" role="">text4</li>
  <li class="item highlight" data="" role="">text5</li>
</ul>
<ol>
  <li></li>
  <li></li>
</ol>

css简写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
/* m0 */
/* p0 */
/* w100p */
/* h100p */
/* w100 */
/* h100 */
/* fl */
/* fr */
/* bgc */
/* l300 */
/* r300 */
/* mb300 */
/* df */
/* jcsb */
/* dt  */
/* duang~ 效果 */
width: 100px;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
width: 100px;
height: 100px;
float: left;
float: right;
background-color: #fff;
left: 300px;
right: 300px;
margin-bottom: 300px;
display: flex;
justify-content: space-between;
display: table;