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”即可更新插件。

猜你喜欢

转载自wsj123.iteye.com/blog/2398293
今日推荐