sublime 常用使用插件

1.Package Control
插件管理器
1）在Sublime中打开View -->Show Console,将一下代码复制到输入框中后按回车
import urllib.request,os,hashlib; h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
2）验证是否安装成功
打开Preference -->Package Control,如果能看到此菜单，则表示安装成功

2.Emmet
HTML/CSS代码快速编写插件
1）打开控制台
在Sublime中打开Preferences -->Package Control,也可以直接按快捷键ctrl+shift+p,选择或搜索Install Package Control
2)安装Emmet插件
在输入框中输入Emmet，点击出现的插件，下方状态栏会显示安装的状态，安装完成后会显示说明文档
3）安装PyV8插件
正常情况下，当安装完Emmet插件后会自动下载并安装PyV8插件，直至状态栏不动为止
4）验证是否安装成功
新建一个.html文件，在文件里输入!按tab键，看是否出现html的基础结构

3.PyV8
Emmet插件依赖于PyV8插件，如果自动安装PyV8插件失败，则需要手动下载PyV8插件并安装
1）下载PyV8插件
打开浏览器，输入：https://github.com/emmetio/pyv8-binaries,点击绿色按钮，再点击“Download”
2）拷贝到Sublime中
将下载的文件解压，再找到pyv8-osx-p3.zip文件，同样解压，将其中的两个文件拷贝到PyV8/osx-p3目录下
3）安装
再次打开Sublime后需等待安装结束（查看状态栏，静止不动），再次尝试

4.HTML5
在Sublime中安装HML5插件

5.CSS3
在Sublime中安装CSS3插件

6.JavaScript Completions
在Sublime中安装JavaScript Completions插件

7.jQuery
在Sublime中安装jQuery插件

8.JsFormat
在Sublime中安装JsFormat插件

9.HTML-CSS-JS Prettify
HTML/CSS/JS代码格式化插件
1）在Sublime中安装HTML-CSS-JS Prettify插件
2）其依赖于node.js,所以需要安装Node.js
到Node.js官网下载对应的版本并安装
3）确认Node.js的安装路径
鼠标右键HTML/CSS/JS Prettify -->Set node Path,指定Node.js的安装路径
4）格式化代码
鼠标右键HTML/CSS/JS Prettify -->Pretty Code

10.Pretty JSON
JSON代码格式化插件
1）在Sublime中安装Pretty JSON插件
2）自定义快捷键
打开Preference -->Key Bindings-User,添加格式化代码快捷键为ctrl+shift+f
{ "key": ["ctrl+shift+f"], "command": "pretty__json"}

11.Better Completion
JavaScript、jQuery、Bootstrap等js库的自动补全插件，该插件的特点就是可以自定义配置需要自动补全的库
1）在Sublime中安装Better Completion 插件
2）配置需要自动补全的库

12.SideBarEnhancements
侧边栏增强插件，可以指定预览时使用的浏览器并设置快捷键
1）在Sublime中安装 SideBarEnhancements 侧边栏增强插件
2）指定使用的浏览器
打开Preference -->Package Settings -->Side Bar -->Settings User,在打开的文件中添加如下内容
{
"default_browser":"chrome" //one of this list:firefox,aurora,chrome,canary,chromium
}
3)为浏览器绑定快捷键
打开Preference -->Package Settings -->Side Bar -->Settings User,在打开的文件中添加如下内容
{ "key":["alt+f12"],"command":"side bar open in browser"},
至此所有的设置已经完成，可以在页面中按相应的热键，直接在指定的浏览器中预览

13.LESS
LESS语法高亮显示和代码提示
1）在Sublime中安装LESS插件
2）关闭并重新打开.less文件即可

14.Less2Css
编译Less，保存.Less文件时自动编译为.css文件
1）在Sublime中安装Less2Css插件
2）根据环境不同配置安装也有所不同，分为windows和MacOS环境，具体可参考：https://fdream.n
2.1在windows环境下，依赖less.js-windows
2.1.1）下载less.js-windows-master,rar文件，解压到本地目录。
2.1.2）将目录路径添加到环境变量PATH中，如：D:\open\less.js-windows;
2.1.3) 验证是否成功
2.2在MacOS环境下，依赖nodejs和lessc
2.2.1）安装npm，官网直接下载node-6.9.5.pkg并安装，会自动动安装npm
2.2.2）安装lessc：在终端执行sudo npm install less -gd，安装完成后在终端执行命令lessc
2.2.3）安装less-plugin-clean-css:在终端执行sudo npm install less-plugin-clean-css -
2.2.4) 验证是否成功

15.SublimeServer
让Sublime成为静态WEB服务器，无需单独启动Tomcat或者Apache这样的重型服务器
1）在Sublime中安装SublimeServer插件
2）安装完成后点击菜单栏中的"工具"--"SublimeServer"--"Settings",可以查看并修改SublimeServer
3）点击Start SublimeServer可以启动服务器
4）在打开的.html文件中右键，选择"View in SublimeServer"会自动打开浏览器并通过Web服务器进行访问
注：SublimeServer要求你的代码文件夹，要添加到Sublime Text的项目里面才能访问，步骤：点击菜单

16.Color Highlighter
展示颜色代码的真正颜色。同时还提供一个颜色选择器可以方便的更改颜色。
1）在Sublime中安装Color Highlighter 插件
2）修改颜色显示方式，默认为下划线显示，修改为填充显示
打开Preference-->Package Settings -->Color Highlighter -->Settings User,在打开的文件中添加一下内容
{
"ha_style":"filled,
}
3)此时会看到颜色代码会直接显示相应的颜色，同时可以右击选择"Choose color"打开颜色选择器，自行选择

17.Css Extended Completions
智能提示.css文件中的类名，需要关联添加CSS文件
1）在Sublime中安装CSS Extended Completions插件
2）将提示文件添加到Cache缓存中
在侧边栏中右击文件，选择"CSS Extended Completions"--"Add CSS Files To Cache"等
3）在.html文件中引入，css样式文件，这是在html页面中编写样式时会自动提示前面添加的css文件中的类名

18.AutoFileName
提示文件路径，可快速输入文件名
1）在Sublime中安装AutoFileName插件
2）在输入文件路径时花魁自动提示，如路径名、图片选取等

19.DocBlockr
生成有没得注释
1）在Sublime中安装DocBlockr插件
2）输入/*或者/**,然后按回车，会自动生成优美的注释，如果在函数上写/**,还会包括参数、返回值等

20.GitGutter
本地Git变化提示，可以在行首显示当前行的Git状态，是增加的、修改的还是删除的
1）在Sublime中安装GitGutter插件
2）在当前Git状态与本地仓库中的状态有改变时会显示