一、修改插件安装目录
为了有效和安全管理插件,在 Sublime Text 的安装目录中创建 Data 目录(之后插件就放在该目录中)。
重启 Sublime Text 后 Preferences-> Browse Package 打开的目录就指向 Data。
二、注册
主界面 Help-> Enter license,弹出窗口输入如下内容:
1 | —– BEGIN LICENSE —– |
确认就可注册(破解内容有时效性,如果破解失败自行百度查询另一组破解)。
三、快捷键
1 | Ctrl+Shift+P:打开命令面板 |
四、安装 Package Control
Package Control 插件是一个方便 Sublime text 管理插件的插件。
方式一:
主界面 Ctrl+` 下边框弹出输入框,复制粘贴如下内容:
1 | import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; 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) |
并回车。
查看具体信息请移至 PackageControl 官网 。
方式二:
Ctrl + Shift + P 弹出输入框输入 install package control 回车即可安装。
Package Control 安装好之后,只需要 Ctrl + Shift + P 弹出输入框选择 install package 就可以输入插件名称下载插件了。
方式三:
在[PackageControl 官网] 手动下载 **Package Control **包,放置到 xxx\Data\Installed Packages 目录下,重启 Sublime Text 即可。
五、常用插件
5.1 Emmet
功能:用于提高 html/css 的编码速度。
调用方式:tab 键。
效果图:
5.2 HTML-CSS-JS Prettify
功能:格式化 HTML 、CSS、JS 及 Json 代码。需要注意的是,必须先安装 Node.js 和设置 Node.js 路径。
调用方式:右键 –> HTML/CSS/JS Prettify –> Prettify Code。
效果图:
5.3 AutoFileName
功能:用于补全文件名称。
调用方式:输入文件路径会自动提示。
5.4 DocBlockr
功能:提供代码块注释功能。
调用方式:输入 /** 后按 Enter 或者 Tab。
效果图:
5.5 Bracket Highlighter
功能:高亮显示标签。
调用方式:将光标放入开始/结束标签,会高亮显示对应的标签。
5.6 IMESupport
功能:解决中文输入框不跟随的问题。
5.7 SideBarEnhancements
功能:提供侧边栏功能,同时可自定义浏览器预览的快捷键。
调用方式:需要设置快捷键。
设置浏览器预览快捷键方式:
preferences -> package setting -> side bar -> Key Building-User,输入如下内容:
1 | [ |
只需要修改浏览器路径,保存后,在对应的 html 文件中按住相应的快捷键就可以打开浏览器查看内容了。
5.8 AllAutocomplete
功能:搜索所有打开的文件来寻找匹配的提示词。
调用方式:输入部分文字会自动提示。
5.9 Terminal
功能:在当前目录下打开 Terminal 窗口。
调用方式:Ctrl + Shift + T 。
5.10 autoprefixer
功能:给 CSS 添加私有前缀。
调用方式:Ctrl + Shift + P,选择 autoprefixer 后,编写 css 保存文件即可。需要安装 Node.js。
额外设置:默认情况下,该插件只对 Chrome 进行兼容,为了兼容其他浏览器需要修改配置 Preferences -> Package Settings -> Autoprefixer,弹出窗口修改 "browsers" 为如下内容:
1 | "browsers":["defaults","last 2 version", "> 0.1%", "> 5% in US", "ie 6-8","Firefox < 20"] |
效果图:
5.11 ConvertToUTF8
功能:文件编码转成 utf-8。
调用方式:保存文件即可。
5.12 sublimeTmpl
功能:提供文件模板。
调用方式:需要设置快捷键。
设置快捷键,preferences -> Key Bindings,输入如下内容:
1 | [ |
保存后,只需要按下对应的快捷键就可以创建相应类型的文件。
效果图:
5.13 LiveReload
功能:自动刷新浏览器。
安装:
1)给 chrome 浏览器安装 LiveReload 插件(翻墙下载)。
2)通过下文提供的链接下载 Sublime 插件,里边有个名为 ST3-LiveReload-master.zip 压缩包,将其解压改名为 LiveReload,复制到 Sublime 的 Packages 目录下(Preference -> Browse Packages...)。
3)启动插件,Preference->Package Settings->LiveReload->Settings User
1 | { |
调用方式:通过 chrome 打开 html 文件后,点击 chrome 的 LiveReload 插件的图标变成实心后,只要修改 html 文件内容保存即可自动刷新浏览器。
效果图:
5.14 SublimeServer
功能:启动静态资源服务器。
调用方式:主界面 -> Tools -> SublimeServer -> Start SublimeServer,选择文件,在右侧面板右键 -> View in SublimeServer
六、资源下载
七、问题
Q:
1 | There are no packages available for installation |
A:
首先,访问 https://packagecontrol.io/channel_v3.json ,将源代码复制后,在本地新建文件为 channel_v3.json,将源码保存到该文件中。
然后,点击 Sublime 菜单 Preferences->Package Setting->Package Control -> Setting User
添加如下配置:
1 | { |