现在的位置: 首页 > 综合 > 正文

SublimeText3安装Emmet插件步骤

2019年06月09日 ⁄ 综合 ⁄ 共 2677字 ⁄ 字号 评论关闭

虽然很多插件在sublime text 3不工作了,因为sublime text 3修复了2的一些bug、提升了性能并集成了不少常用插件的功能,Sublime text 3和2版本,两者的安装还是有区别的,下面是步骤,经测试是可行的。

预备

第一步:下载sublime
text3

第二步:

安装emmet插件(previously known as Zen Coding)
方法一  package control法:
打开sublime

【1】mac下用command + shift + p调出命令窗口,输入install,选中package control:install package,等待1-2秒,下拉选中emmet plugin回车,等待2-3秒,重启sublime。

【2】window下使用ctrl+shift+p调出命令窗口,

使用Package Control组件安装

也可以安装package control组件,然后直接在线安装:

    1. 按Ctrl+`调出console
    2. 粘贴以下代码到底部命令行并回车:
1
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())

重启Sublime Text 3。如果在Perferences->package settings中看到package control这一项,则安装成功。
顺便贴下Sublime Text2 的代码

1
import urllib2,os;
pf
='Package
Control.sublime-package'
;
ipp 
= sublime.installed_packages_path();
os.makedirs( ipp ) 
if not os.path.exists(ipp) else None;
urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( ))); 
open(
os.path.join( ipp, pf), 
'wb' ).write(
urllib2.urlopen( 
'http://sublime.wbond.net/' +pf.replace( '
'
,'%20' )).read()); print'Please
restart Sublime Text to finish installation'
)

如果这种方法不能安装成功,可以使用下面的手动安装。

方法二 手动安装法:
下载emmet plugin,打开sublime,preferences,browse packages,将下载的Emmet的zip文件解压放到packages文件夹下,重启sublime。
用命令 command + F 查找 install即可。

然后菜单Preferences就会多了两个Package..的东西如下: Package Control 安装成功

第五步:用Package Control安装Emmet插件的方法:

点击菜单Preference-->Package Control

点击Install Package

等待几秒后再弹出如下内容,敲键盘emmet,选择如下:

在 Emmet 安装完成后,会显示如下屏幕:然后会自动安装PyV8,安装完成,重启 Sublime Text 3。

测试:

重启之后还会看到左下角再次呈现 Loading PyV8 的提示,待其载入完毕,打开一个新文档最后测试,输入指令

这是SublimeText3快捷键使用方法:http://blog.useasp.net/archive/2013/06/14/sublime-text-2-all-default-Shortcuts-table-on-windows-translated-with-chinese.aspx

这是emmet快捷键文档:

【1】   http://docs.emmet.io/cheat-sheet/  输入后按Ctrl+e 生成

【2】http://www.byywee.com/page/M0/S914/914328.html 输入后按Ctrl+e
生成

Zen Coding 的用法(输入后直接按ctrl+e生成)

使用ZenCoding编写代码时,需要遵循一定的缩写规则:

元素名(div、p);
E#id

带Id的元素(div#content、p#intro、span#error);
E.class

带class的的元素(div.header、p.error),id和class可以连着写,div#content.column
E>N

子元素(div>p、div#footer>p>span)
E*N

多项元素(ul#nav>li*5>a)
E+N

多项元素
E$*N

带序号的元素

-----------------------------------------------
> 子节点:在DOM树下一层添加创建一个元素
+ 同级别:在DOM树同一层添加创建一个元素
^ 向上层:向上一层添加创建创建一个元素。

例子:

1、输入:!  并按Ctrl+e 或Tab生成

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

2、nav>ul>li 按Ctrl+e或Tab 生成

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

3、div>(header>ul>li*2>a)+footer>p   按Ctrl+e 或Tab生成

4、ul>li*4>a{Links$}  按Ctrl+e 或Tab生成

5.ul>li*4>a[title]{link$}+div.one

6..wrap>ul>li*4>a[title]{link$}+div.one^^^^.test

如需要删除已安装插件:按ctr+shift +p然后输入remove 回车,再输入要删除的插件名。

抱歉!评论已关闭.