Sublime Text 插件整理

由 〇↓2℃ 创建，Loen 最后一次修改 2018-03-13 Package Control插件管理器1)在 Sublime 中打开 View –> Show Console，将以下代码复制到输入框中后按回车键 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())2)验证是否安装成功 打开 Preferences –> Package Control，如果能看到此菜单，则表示安装成功EmmetHTML/CSS代码快速编写插件 1)打开控制台 在Sublime中打开Preferences –> Package Control，也可直接按快捷键ctrl+shift+p，选择或搜索 Install Package 2)安装 Emmet 插件 在输入框中输入 emmet，点击出现的插件，下方状态栏会显示安装状态，安装完成会显示说明文档 3)安装PyV8插件 正常情况下，当安装完Emmet插件后会自动下载并安装PyV8插件，直至状态栏不动为止 4)验证是否安装成功 新建一个.html文件，在文件中键入字符!（注意是英文符号），然后按“Tab“键，如果出现html基础结构则表示安装成功PyV8Emmet插件依赖于PyV8插件，如果自动安装PyV8插件失败，则需要手动下载PyV8插件并安装 1)下载PyV8插件 打开浏览器，输入：https://github.com/emmetio/pyv8-binaries，点击下图中的绿色按钮，再点击“Download ZIP“ 2)拷贝到Sublime中 将下载文件解压缩，再找到pyv8-osx-p3.zip文件，同样解压缩，将其中的2个文件拷贝到PyV8/osx-p3目录下，如果该文件夹中有其它内容，可以先全部删除再粘贴 3)安装 再次打开Sublime后需等待安装结束（查看状态栏，静止不变），再次尝试HTML5在Sublime中安装 HTML5 插件CSS3在Sublime中安装 CSS3 插件JavaScript Completions在Sublime中安装 JavaScript Completions 插件jQuery在Sublime中安装 jQuery 插件JsFormat在Sublime中安装 JsFormat 插件HTML-CSS-JS PrettifyHTML/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 CodePretty JSONJSON代码格式化插件 1)在Sublime中安装 Pretty JSON 插件 2)自定义快捷键 打开Preference –> Key Bindings-User，添加格式化代码快捷键为ctrl+shift+f { “keys”: [“ctrl+shift+f”], “command”: “pretty_json” }Better CompletionJavaScript、jQuery、Bootstrap等js库的自动补全插件，该插件的特点就是可以自定义配置需要自动补全的库。 1)在Sublime中安装 Better Completion 插件 2)配置需要自动补全的库SideBarEnhancements侧边栏增强插件，可以指定预览时使用的浏览器并设置快捷键 1)在Sublime中安装 SideBarEnhancements 侧边栏增强插件 2)指定使用的浏览器 打开Preference –> Package Settings –> Side Bar –> Settings User，在打开的文件中添加如下内容 { “default_browser”: “chrome” //one of this list: firefox, aurora, chrome, canary, chromium, opera, safari } 3)为浏览器绑定快捷键 打开Preference –> Package Settings –> Side Bar –> key Bindings-User，在打开的文件中添加如下内容 { “keys”: [“alt+f12”], “command”: “side_bar_open_in_browser” }, 至此，所有设置已经完成，可以在页面中按相应的热键，直接在指定的浏览器中预览LESSLESS语法高度显示和代码提示 1）在Sublime中安装 LESS 插件 2）关闭并重新打开.less文件即可Less2Css编译Less，保存.less文件时自动编译为.css文件 1）在Sublime中安装 Less2Ccss 插件 2）根据环境不同配置安装也有所不同，分为windows环境和MacOS环境，具体可参考：https://fdream.net/blog/article/783.aspx 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)验证是否成功 打开DOS命令行，输入lessc，如果有如下提示则表示设置成功 2.2在MacOS环境下，依赖nodejs和lessc 2.2.1)安装npm：官网直接下载node-v6.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 -g 2.2.4)验证是否成功SublimeServer让Sublime成为静态WEB服务器，无需单独启动Tomcat或者Apache这样的重型服务器 1）在Sublime中安装 SublimeServer 插件 2）安装完成后点击菜单栏中的”工具”——”SublimeServer”——”Settings”，可以查看并修改SublimeServer的服务器端口、文件扩展名等 3）点击Start SublimeServer可以启动服务器 4）在打开的.html文件中右击，选择”View in SublimeServer”会自动打开浏览器并通过Web服务器进行访问 注：SublimeServer要求你的代码文件夹，要添加到Sublime Text的项目里面才能访问，步骤：点击菜单栏中的”项目”——”添加文件夹到项目”。Color Highlighter展示颜色代码的真正颜色。同时还提供一个颜色选择器可以方便地更改颜色。 1）在Sublime中安装 Color Highlighter 插件 2）修改颜色显示方式，默认为下划线显示，修改为填充显示 打开Preference –> Package Settings –> Color Highlighter –> Settings User，在打开的文件中添加如下内容 { “ha_style”: “filled”, } 3）此时会看到颜色代码会直接显示相应的颜色，同时可以右击选择”Choose color”打开颜色选择器，自己选择更改颜色CSS Extended Completions智能提示.css文件中的类名，需要关联添加CSS文件 1）在Sublime中安装 CSS Extended Completions 插件 2）将提示文件添加到Cache缓存中 在侧边栏中右击文件，选择”CSS Extended Completions”——”Add CSS Files To Cache”等 3）在.html文件中引入.css样式文件，这时在html页面中编写样式时会自动提示前