mac下Sublime text3的emmet插件安装 + 自动排版详细步骤

来源：互联网发布：js获取今天的日期编辑：程序博客网时间：2024/05/13 12:26

这段时间在学习前端，在Codecademy下刷完了html、css、javascript三剑客的preview之后，心血来潮想试试Sublime的Emmet插件效果。（作为一个立志能手写出漂亮规范的FE代码的小白，我是安装了Text2 & Text3 两个版本，给Text3装完emmet插件后，最近应该就要移步text2了～）

安装步骤其实很简单，但总有人会出现一些或大或小的问题，比如我。

首先，安装Sublime Text3，下载地址：http://www.sublimetext.com/3

Sublime可以无限期试用，但是需要注册。注册很简单，就是help -> enter license，这里有很多有用的注册码：http://blog.csdn.net/kencaber/article/details/50651207

注册完之后，开始安装emmet。因为各个mac的快捷键不同，我就不注明各个步骤的快捷键，直接从菜单选择。

安装Package Control

i. 菜单中选择View > Show Console，可打开控制台——也就是下面的一条输入框。

ii. 在输入框中输入：

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。

安装Emmet

i. 菜单中选择Tools > Command Palette;

ii. 直接输入install关键字，弹出的输入框自动提示如下：

iii. 点击（是单击，不是双击）Package Control：Install Package这一行，继续输入Emmet，照理说这时候应该是有一行的名称就叫做Emmet的(如下图)，不是Emmet Style Reflector或者其他，继续点击Emmet这行，单击双击随你。（如果没有Emmet这行，那可能是你之前倒腾的时候已经不小心装好了Emmet，建议你重启Sublime然后创建一个html文件，输入<html 回车试试会不会自动补全代码；当然，也有可能是安装Package Control失败或者出了其他问题～）

正常情况下，这时候应该是安装好了（指没有出现任何的错误提示）。接着你重启Sublime就可以使用Emmet的强大功能了。什么？为什么还是不行？因为你没有保存为html或者css文件啊亲～-～！

至于不正常的情况呢，我恰巧遇到了一个： Error while loading PyV8 binary:exit code 3，我还遇到了exit code 1，不过采取了下面的操作后，这两个问题一起完美解决。

据我的印象，console里面是有错误提示的，根据提示到https://github.com/emmetio/pyv8-binaries下载相应的安装包，然后到package目录下（Preferences -> Browser Package），将安装包解压到package目录下，我是根据网上的建议，在Installed package里面也粘贴了一份儿，PyV8下，接着重启SublimeText即可。

我也没机会遇到更多的问题，这个博客里面好像附了一些安装过程可能出现的问题，有兴趣的可以看看。

----------------------------------- 自动排版插件安装 ----------------------------------------

最后介绍一个非常有用的功能，就是自动排版功能。

同样地，i、Tools > Command Palette；

ii、install package；

iii、搜索HTMLBeautify，点击安装；

如果安装后显示“Unable to download HTMLBeautify. Please view the console for more details”，你可以照着要求看看控制台；也可以再试一次；或者直接试试“ctrl+shift+alt+f”快捷键。（我的快捷键是command+shift+alt+f～可见大家的快捷键不见得都一样，多试几个说不定就误打误撞了）

若有问题，欢迎指正。～吐舌头

1 0

mac下Sublime text3的emmet插件安装 + 自动排版 详细步骤

mac下Sublime text3的emmet插件安装 + 自动排版详细步骤