sublime前端插件安装与推荐

首先下载官网的sublimehttps://www.sublimetext.com/3   （国外服务器的网页，较慢）

以下是安装方式（可以跳过） 需要注意的是Add to explorer context menu这个选项可以勾选 对一个文件右键的时候会弹出使用sublime 打开 添加文件右键菜单

安装完了sublime 之后 犹如刚出生的婴儿 跟记事本一样没有多大功能 需要通过安装插件让sublime编辑器更加强大，我们来看。 插件管理的官网首页 https://packagecontrol.io/  （国外服务器的网页，较慢） 点击右侧的  Installation 菜单

根据不同的版本来选择  我这里使用的最新版本sublimeText3 复制以下的内容  import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698eea76'; 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)

打开sublime  然后在 View 菜单中  Show Console 选项  打开底部的控制台  快捷键  ctrl+`      ESC下面那个键 在最下面白色输入框那栏   粘贴刚所复制的代码   然后敲回车 进行下载插件管理中心必要包   最后控制台输出  275309  包的大小表示下载完成   PS：然后这里 建议大家 重启一下sublime 重新加载sublime插件

Preferences 菜单下面 会多出来这一项 package control   表示下载安装成功  点击它 Package Control  (ctrl+shift+p) 左下角会有一个 等号 ' = '  在疯狂前后转  正在加载  插件的列表  需要耐心等待  我最长的时候等待了七八分钟    这里告诉它执行什么操作   选择install Package 安装插件 然后等待 左下角等号   第一次加载会稍慢  后面是秒加载 加载完成会弹出所有的插件列表   【    官网显示现在有3900windows 的包（插件）    2000多text3 版本的 插件】

弹出最后的插件列表就搞定了  需要安装什么插件  在输入框里面输入插件的名字即可 选择完成之后 左下角 等号 又来了  同样 等号消失安装完成  有的插件安装完成会有一个文本提示  大部分没有提示插件信息的 等号在转的同时 还可以继续选择安装   只会看到等号 越转越快  不会受到影响，可以正常安装PS：emmet 这里我已经安装过了  安装过是不会再出现插件的名字的

emmet ———— 前端自动补全，提供快捷补全方式  例1：  只需要输入一个 a 按下tab键就可以实现 例2：ul>li{$}*3     $表示数字 从1开始     按下tab键

   
• 1
   
• 2
   
• 3

ColorPicker ———— sublime 调色板   供HTML选取颜色 ctrl+shift+p  打开插件管理中心 输入colorpicker  然后回车  会弹出调色器 热键( ctrl+shift+c )  注意热键冲突   是按不出来的 出现调色板之后后面的sublime不允许操作的  会假死在哪 这是正常现象需要选择一个颜色 或 cancel 取消

SublimeTmpl ———— sublime的模板  安装之后 File —— sublimeTmpl 会有很多模板的生成选项   以及快捷键 ctrl+alt+h 生成 HTML模板  修改模板  在Preferences 菜单下第一个选项 Browser Package浏览包 在打开的文件目录进入SublimeTmpl ———— templates ———— html.tmpl 把html.tmpl用sublime打开编辑模板 还有很多这里不在阐述  $表示  新建完一次模板后   按tab键 切换的地方  按顺序 修改完按下ctrl+alt+h 试试 如果不行  可能与别的软件热键冲突 需要重新配置热键    在下方

view in browser —————— 用快捷键打开相应的浏览器进行调试配置较复杂 参考官网：https://packagecontrol.io/packages/View%20In%20Browser简单介绍：安装之后插件之后1.  Preferences —— View In Browser —— Settings-Default 打开然后这个配置是更改不了的 我们把  'nt':{...} 复制下来2. Preferences —— View In Browser —— Settings-User{ 'nt': { 'win32': { 'firefox': 'G:\\Program Files (x86)\\Mozilla Firefox\\firefox.exe', 'iexplore': 'C:\\Program Files\\Internet Explorer\\iexplore.exe', 'chrome': 'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe', 'chrome64': 'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe', 'safari': 'D:\\Program Files (x86)\\Safari\\Safari.exe', 'yandex': '%Local AppData%\\Yandex\\YandexBrowser\\browser.exe' } }, 'browser': 'chrome'}检查浏览器的正确路径 每一级目录是要用两个反斜杠  \\    (转义一个斜杠)记住语法是标准的JSON格式 1. 双引号2. 键也需要使用双引号配置完成保存关掉默认快捷键  浏览器开头字母Chrome —— ctrl+alt+c  和  sublimeTmpl 的css模板创建冲突Safari     —— ctrl+alt+s   Safari打开所编写的网页进行调试Opera    —— ctrl+alt+o  Opera打开所编写的网页进行调试IE           —— ctrl+alt+i    IE打开所编写的网页进行调试Firefox   —— ctrl+alt+f   用NS4+  火狐浏览器打开所编写的网页进行调试…………最重要的谷歌居然快捷键冲突了 这里需要重新配置下快捷键Preferences —— KeyBindings 打开热键配置他是一个列表[    { 'keys': [ 'ctrl+alt+f' ], 'command': 'view_in_browser', 'args': { 'browser': 'firefox' } },    { 'keys': [ 'ctrl+alt+e' ], 'command': 'view_in_browser', 'args': { 'browser': 'chrome' } },    { 'keys': [ 'f12' ], 'command': 'view_in_browser', 'args': { 'browser': 'chrome' } },    { 'keys': [ 'ctrl+alt+i' ], 'command': 'view_in_browser', 'args': { 'browser': 'iexplore' } },    { 'keys': [ 'ctrl+alt+s' ], 'command': 'view_in_browser', 'args': { 'browser': 'safari' } },    { 'keys': [ 'ctrl+shift+alt+s' ], 'command': 'view_in_browser', 'args': { 'browser': 'safari' } },    { 'keys': [ 'ctrl+alt+shift+j' ], 'command': 'sublime_tmpl', 'args': { 'type': 'js' }}]keys 快捷按键    command所对应的插件名字  空格使用下划线args 参数   需要通过default配置来查看  (我也是通过控制台来看到的一些参数)args：html  可以更改 模板的快捷键    { 'keys': [ 'ctrl+shift+alt+h' ], 'command': 'sublime_tmpl', 'args': { 'type': 'html' }还需了解更多的详情配置查看  翻译的sublime文档：http://sublime-text.readthedocs.io/en/latest/

CSS3 —— 高亮显示CSS3的样式Color Highlighter ———— CSS颜色 出现一个下标的提示    有的会与文字相糊JavaScript Completions ———— 原生javascript 代码提示

Sublime-Better-Completion  可自选开启代码提示，支持jQ、js、bootstrap、php、sql ...packagecontrol是没有这个插件的 需要通过github 克隆下载 扔进 浏览包的目录里    重开sublime 加载插件 然后进行使用github仓库：https://github.com/Pleasurazy/Sublime-JavaScript-API-Completions

Live Reload 实时刷新  只要在sublime里按下ctrl+s  浏览器那边会自动刷新在多屏的时候是非常好用的  谷歌浏览器也需要安装插件 并且谷歌浏览器也需要安装插件  开启允许访问文件网页 配置文件： {     'enabled_plugins': [// 开启插件      'SimpleReloadPlugin',// 开启实时刷新功能      'SimpleRefresh'// 开启实时刷新功能     ]} 然后 用谷歌浏览器打开之后   按下谷歌的插件上面由空心圆变为实心圆 OK ctrl+s  试试

Emmet Live Style  浏览器样式调试栏与sublime编辑器双向绑定   在浏览器F12开发者调试工具中  调动样式  subliem 编辑器的css文件也会跟着发生改变  在sublime 里编辑样式的文件中按住CTRL+↑ 改变样式数值   谷歌浏览器也会实时改变并刷新 谷歌浏览器也需要安装插件 并且开启允许访问文件网址 还需要安装一个软体 http://livestyle.io/

编辑器汉化插件 一秒变高富帅 ChineseLocaliztions  安装之后需要等待一段时间大约三四分钟内 会自动汉化   如果之前已经安装过  或者更改别的语言  需要在 help —— Language —— 更改的语言选项

Live Reload    和  Emmet Live Style  不能一起使用   会导致Emmet Live Style    不能实时刷新 样式只能  ctrl+s 保存刷新  最后这里不支持空白换行不能腾出格式 见谅~ 我觉得我这一篇是比较详细的   还不明白 或者还有些问题的朋友可以加下QQ群495155119   我会一一解答