欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-04-11 09:08:35
...
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”即可更新插件。
  • Sublime Text 3 Web前端常用插件推荐
            
    
    博客分类: 开发工具 工具 
  • 大小: 1005 Bytes
  • Sublime Text 3 Web前端常用插件推荐
            
    
    博客分类: 开发工具 工具 
  • 大小: 1009 Bytes
  • Sublime Text 3 Web前端常用插件推荐
            
    
    博客分类: 开发工具 工具 
  • 大小: 16.2 KB
相关标签: 工具