Sublime Text 3 Web前端常用插件推荐

Sublime Text 3 Web前端常用插件推荐

1.1 Web前端常用插件
1.1.1插件之html5
功能：
        支持hmtl5规范的插件包。
使用：
        新建html文档>输入html5>敲击Tab键>自动补全html5规范文档。
注意：与Emmet插件配合使用，效果更好。
1.1.2插件之jQuery
功能：
        支持JQuery规范的插件包。
1.1.3插件之HTML-CSS-JS Prettify 插件
功能：
        HTML、CSS、JS格式化。
安装：
        安裝这个套件前必须先安裝Node.js,指定 node.exe 的执行档所在位置。进而安装HTML-CSS-JS Prettify。
使用方法一：
        View -> Showconsole 或者使用快捷键(Ctrl + `)，在命令列的地方輸入:view.run_command("htmlprettify")，然后按下Enter。
使用方法二：默认快捷键：Ctrl+Shift+H。
        自行设置快捷键，菜单 “Preferences--->Key Bindings – User” 里新增：{ "keys":["ctrl+shift+o"],"command":"htmlprettify"}完成后保存。
1.1.4 插件之Emmet
功能：
        Emmet（前身是Zen Coding）是一个前端开发不可缺少的插件，它让编写HTML和CSS代码变得简单，节省大量时间。Emmet可使开发者用缩写形式书写代码，再用“扩展”功能自动将代码扩展至完整样式。
使用：
        默认快捷键 Tab。速查表：https://docs.emmet.io/cheat-sheet/
注意：Emmet 插件需要 PyV8 插件的支持，所以在安装 Emmet 时，会自动安装 PyV8 插件，如果安装后 Emmet 不能正常保用，很有可能是因为 PyV8 没有安装完全，Sublime Text 2 和 3 容易出现这个问题。可以删除它，然后手动下载并安装 PyV8 插件。
1.1.5 插件之SublimeCodeIntel
功能：
        SublimeCodeIntel作为一个代码提示和补全插件，支持 JavaScript、Mason、XBL、XUL、RHTML、SCSS、Python、HTML、Ruby、Python3、XML、Sass、XSLT、Django、HTML5、Perl、CSS、Twig、Less、Smarty、Node.js、Tcl、TemplateToolkit 和 PHP 等所有语言，是 Sublime Text 自带代码提示功能基础上一个更好的扩展，自带代码提示功能只可提示系统代码，而SublimeCodeIntel则可以提示用户自定义代码。SublimeCodeIntel支持跳转到变量、函数定义的功能，另外还有自动补全的功能，十分方便。
1.1.6插件之LiveReload
1、概述
        LiveReload是一款可以在浏览器中实现实时刷新页面的插件，这样就可以做到保存后立马看到效果。
2、安装
步骤一：
        Sublime Text 3编辑器安装LiveReload插件。采用通过Package Control: Install Package方式进行安装。
步骤二：在Chrome浏览器安装LiveReload插件。
3、Chrome的LiveReload插件配置
        在chrome上安装后可以在地址栏旁边看到如下按钮：       (空心，表示未开启监听)。

        接着右键单击选择管理扩展程序，把允许访问网址文件这一选项勾选上，如下图所示：
4、Sublime的LiveReload插件配置
方法1：通过过用户自定义配置来开启。
        Preferences > Package Settings > LiveReload > Settings User
{"enabled_plugins": ["SimpleReloadPlugin","SimpleRefresh"]}
方法2：通过控制台命令来开启。
        Ctrl+Shift+P>LiveReload: Enable/disableplugins>Enable - Simple Reload
5、chrome的LiveReload开启监听
        打开一个静态HTML文件，并点击浏览器地址栏旁边的LiveReload按钮，使按钮变成实心的（实心，表示已经开始监听）。
1.1.7插件之SublimeTmpl 
功能：
        快速生成文件模板。
使用：
        SublimeTmpl默认的快捷键如下，如果快捷键设置冲突可能无效。
        Ctrl+Alt+h              新建 html 文件
        Ctrl+Alt+j               新建 javascript 文件
        Ctrl+Alt+c              新建 css 文件
        Ctrl+Alt+p             新建 PHP 文件
        Ctrl+Alt+r              新建 ruby 文件
        Ctrl+Alt+Shift+p    新建 Python 文件
1.1.8插件之Theme-Soda
功能：
        最受欢迎的 Sublime Text 主题之一。
安装配置：
        安装完成后，点菜单Preferences--->Settings - User，根据需要的主题效果，添加如下代码。
        Soda 亮色主题请添加：{"soda_classic_tabs": true,"theme": "Soda Light3.sublime-theme"}
        Soda 暗色主题请添加：{"soda_classic_tabs": true,"theme": "Soda Dark3.sublime-theme"}
        保存之后发现代码区域还是黑色背景，菜单栏颜色已经切换了，这是因为未配置color scheme。其下载地址：http://buymeasoda.github.com/soda-theme/extras/colour-schemes.zip。
color scheme配置：
        把下载文件夹中的两个配置文件【一个dark，一个是light】放到Packages/User文件夹下，再在Preferences -> Color Scheme -> User选择对应的color theme就可以了。
1.1.8 插件之SideBarEnhancements
功能：
        扩充边栏菜单的功能。
简介：
        SideBarEnhancements是一款很实用的右键菜单增强插件，以diff 形式显示未保存的修改、在文件管理器中显示该文件、复制文件路径、在侧边栏中定位该文件等功能，也有基础的诸如新建文件/目录，编辑，打开/运行，显示，在选择中/上级目录/项目中查找，剪切，复制，粘贴，重命名，删除，刷新等常见功能。
        SideBarEnhancements 还有一个功能就是自定义打开文件的程序，在侧边栏中右键点击一个文件（夹），选择 Open With -> Edit Applications 就可以修改关联了，配置文件自带示例，可以很方便地套用。
1.1.9插件之autofilename
功能：
        文件路径智能提示。
1.2插件的查看/删除/更新
1.2.1插件查看
        快捷键 Ctrl+Shift+P，在对话框中输入“list”，选择“Package Control:List Packages”。会列出所有已安装的插件。这样可以很方便地了解已经安装了哪些插件。
1.2.2插件移除
        有时需要移除不需要的插件，具体操作如下：快捷键 Ctrl+Shift+P，在对话框中输入“remove”，选择“Package Control: Remove Packages”，然后在出现的插件列表中点选要移除的插件即可。
1.2.3插件更新
        有时需要更新插件，具体操作如下：快捷键 Ctrl+Shift+P，在对话框中输入“upgrade”，选
择“Package Control: Upgrade Packages”即可更新插件。