web前端编辑器sublime text安装Package Control和emmet、Visual Studio Code常用前端插件及emmet使用方法

前端编辑器一般使用sublime text、Visual Studio Code（简称VScode）、atom等，我自己使用过sublime text、Visual Studio Code，两个都很好用。

新手不需要太纠结编辑器的使用，纠结编辑器的时间不如多学学代码。

1、sublime text安装（对比vscode，安装过程略麻烦，且可能失败）

1）下载，有Linux、os、windows多个版本（有英文版有中文版，官网下载是英文的，需要自行下汉化，我在此介绍的是英文版，未付费会弹出一些信息，不影响使用）

2）打开sublime text，按ctrl+~（数字1右边的键，q左上方的键），粘贴如下代码并按回车：

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

注意：上面代码粘贴进去的时候必须是一行，如果不是一行就会安装失败

等待一会，即可安装成功

3）重启软件后，在Preferences菜单下就可以看到Package Control

4）点击package control，在搜索框找到install package后，输入emmet，然后就会自动安装（可能因为网络会安装失败或者安装缓慢），当提示安装成功后就可以正常使用了

2、Visual Studio Code安装常用插件（官方配置中文版，微软良心出品，免费，力推）

vscode在左侧扩展中，输入html css support，emmet，open in browser，HTML Boilerplate，CSS Peek等，官方下载非常方便，插件丰富，安装方便，力推

3、emmet快捷键的基本使用方式（只介绍最最最常用的，更多的请自行搜素）

1）ctrl+d：多次选中，方便统一修改

方法：选中某一个区域后ctrl+d多按几次就会全部选择出来

如下图：选择了第一行的<div>，按两次ctrl+d，下面两个<div>也会被选中

2）输入div*3后按tab键，效果如下

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

3）输入div.demo后按tab键，就是直接设置了class选择器的名字，效果如下

<div class="demo"></div>

4）输入div.demo#only后按tab键，就是直接设置了class选择器和id选择器名字，效果如下

<div class="demo" id="only"></div>

5）输入div.demo#only>p就是让div下面包含一个子元素p，效果如下

<div class="demo" id="only">
	<p></p>
</div>

6）输入div.demo#only>p[style=’background-color:red;width:100px;height:100px;’]后按tab，效果如下

<div class="demo" id="only">
	<p style="’background-color:red;width:100px;height:100px;’"></p>
</div>

7）输入div>(p^span.demo)后按tab，效果如下

<div>
	<p></p>
	<span class="demo"></span>
</div>

8）输入div>(p^span.demo{123})后按tab，要在span标签里面加上123，就要使用花括号{}，效果如下

<div>
	<p></p>
	<span class="demo">123</span>
</div>

9）输入ul>li{$}*10，这里面的$代表变量，效果如下

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
	<li>10</li>
</ul>

10）ctrl+[ 或者 ctrl +]，快速移动这一整行的元素（方便对齐代码）

11）ctrl+→或者ctrl+←，按一个单词一个单词的方式移动