切换代码主题
ctrl+K+T (推荐monokai)
打开两个目录
这个比较坑爹，只有第一个能拖进去，其他的需要点击file->Add folder to Workspace

上下移动代码行
alt+↑↓
快速复制一行
shift+alt+↑↓
打开终端
ctrl+`
制作自己的代码模板


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
{
  "vue-template": {
		"prefix": "vh",
		"body": [
		"<!DOCTYPE html>",
		"<html lang=\"en\">",
		"<head>",
		"  <meta charset=\"UTF-8\">",
		"  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
		"  <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
		"  <title>my vue template</title>",
		"  <script src=\"./lib/vue-2.4.0.js\"></script>",
		"</head>",
		"<body>",
		"  <div id=\"app\"></div>",
		"  <script>",
		"    var vm = new Vue({",
		"      el: '#app',",
		"      data: {},",
		"      methods: {}",
		"    })",
		"  </script>",
		"</body>",
		"</html>"
		],
		"description": "my vue template"
	}
}

Ement快捷语法

1
2
3
4
5
6
7
8
li*10 //创建10个li元素
div.className //创建<div class="className"></div>
div#idName //创建<div id="idNamw"></div>
div[attrName=name] //创建<div attrName="name"></div>
div>li>a //创建<div><li><a></a></li></div>
div+p+span //创建<div></div><p></p><span></span>
div{文本文字} //创建<div>文本文字</div>
div>(header>ul>li*2>a)+footer>p //括号用于在复杂的 Emmet 缩写中处理一组子树

1
2
3
4
5
6
7
8
9
10
11
<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>
1
div+div>p>span+em^^^bq //使用 ^ 运算符，能够提升元素在生成树中的一个级别
1
2
3
4
5
<div></div>
<div>
    <p><span></span><em></em></p>
</div>
<blockquote></blockquote>

希望这篇文章能给你带来知识和乐趣，喜欢博主的文章可以加博主好友哦

有好的文章也可以向博主投稿哦