SublimeText3安装Emmet插件步骤

最新推荐文章于 2019-03-06 19:14:49 发布

新凉

最新推荐文章于 2019-03-06 19:14:49 发布

阅读量1.7k

点赞数 2

分类专栏：安装配置文章标签： SublimeText3 安装Emmet

本文链接：https://blog.csdn.net/TTO_OTT/article/details/42488661

版权

安装配置专栏收录该内容

3 篇文章 0 订阅

订阅专栏

虽然很多插件在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. 粘贴以下代码到底部命令行并回车：

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 的代码

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编写代码时，需要遵循一定的缩写规则：
E

元素名（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 回车，再输入要删除的插件名。

新凉

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
SublimeText3安装Emmet插件步骤

SublimeText3安装Emmet插件步骤
复制链接

扫一扫

专栏目录

SublimeText3安装Emmet插件步骤

使用Package Control组件安装

“相关推荐”对你有帮助么？