前端历程(二)------Emmet、Sublime text3和Hbuilderx的简单介绍

前言

本文章介绍Emmet的简单使用以及对Sublime text3和HbuilderX的安装、使用以及部分快捷键介绍。

Emmet

emmet可以在写代码时自动补全html标签，能让我们快速的书写代码，按下“Tab”键即可补全。介绍了一些常用到的

1、任何一串字母按“Tab”键都可以补充为标签格式。

div  <div></div>

2、使用“>”生成子元素。例：ul>li

<ul>
	<li></li>
</ul>

3、使用“+”生成兄弟元素。例：div+p

<div></div>
<ul></ul>

4、使用“ * ”生成多个相同元素。例：ul>li*5

<ul>
	<li></li>
	<li></li>
</ul>

5、使用“()”将元素分组。例：div>(span+a)*2

<div>
	<span></span>
	<a href=""></a>
	<span></span>
	<a href=""></a>
</div>

6、.id与class：元素与 id 属性值之间用 “#” 分隔，与 class 属性值之间用 “.” 分隔。例：div#eg1+div.eg2+div#eg3.class1.class2

<div id="eg1"></div>
<div class="eg2"></div>
<div id="eg3" class="class1 class2"></div>

7、用" $"符号实现1到n的自动编号。例：div.eg$ *3

<div class="eg1"></div>
<div class="eg2"></div>
<div class="eg3"></div>

8、.用“{}”添加文本内容。例：div{eg}

<div>eg</div>

Sublime text3

sublime text3 下载链接：http://www.sublimetext.com/3，选择你需要的版本进行下载。下载后进行安装，只需要改一下安装位置就可以了。

扫描二维码关注公众号，回复： 4065920 查看本文章

在这里插入图片描述

1、主题格式字体等的调整。下载完软件习惯性的喜欢把软件改成自己喜欢的样式，在菜单栏中选择“首选项”一项，里面可以修改主题，配色方案以及字体等。

在这里插入图片描述

2、插件下载。在此软件中可以通过自己的需求进行插件下载，非常方便。下载方式为在菜单栏中选择首选项的Package control里面下载，打开后选择Install Package(也可以在输入查找)，选中后可能不会立刻出现窗口，耐心等一会，窗口出现后在输入框中输入自己需要的插件进行下载，下载进度可以在控制台看到(ctrl+`)。软件下载后一些插件已经自己下载有了。代码提示插件SublimeCodeIntel等。

==提示：==如果下载的没有Package control可以到https://packagecontrol.io/installation#st3中复制Sublime text3框中的代码复制到控制台(ctrl+`)中点击回车进行下载，下载重启后就可以使用了。

在这里插入图片描述

3、插件推荐。

本想推荐几个发现现在更新后好多东西都已经直接带有(无奈.jpg)。

Emmet 快捷写代码快捷键为Tab 推荐指数五颗星。

按照我下载的是自带有的(之前下载的这个软件里面什么也没有install都要自己下载)，以防万一。

Colorpicker 调色板推荐指数1颗星。

现在软件下载后 “ ctrl+shift+c ”就可以使用调色板，这个插件安装后会改变调色板得到样式(其实我觉得还是自带的好看)。

SideBarEnhancements 增强菜单功能

下载后文件处右键菜单中功能会增多比较好用。

4、快捷键（常用的）

Ctrl+Enter 在下一行插入新行。举个栗子：即使光标不在行尾，也能快速向下插入一行。
Ctrl+D 选中光标所占的文本，继续操作则会选中下一个相同的文本。
shift+↑ 或↓向上/下选中多行。
Shift+← 或→向左/右选中文本。
Ctrl+Shift+[ 选中代码，按下快捷键，折叠代码。
Ctrl+Shift+] 选中代码，按下快捷键，展开代码。
Ctrl+K+K 从光标处开始删除代码至行尾。
Ctrl+Shift+K 删除整行。
Ctrl+J 合并选中的多行代码为一行。举个栗子：将多行格式的CSS属性合并为一行。
Esc 退出光标多行选择，退出搜索框，命令框等。
Ctrl+P 打开搜索框。1、输入当前项目中的文件名，快速搜索文件，2、输入@和关键字，查找文件中函数名(Ctrl+R可直接用) 3、输入：和数字，跳转到文件中该行代码(Ctrl+G)4、输入#和关键字，查找变量名(Ctrl+：)。
Ctrl+Tab 按文件浏览过的顺序，切换当前窗口的标签页。