Sublime Text 3:自用插件及设置

Sublime Text 3:自用插件及设置

Sublime Text 3是一款强大而精巧的文本编辑器
它的界面友好、功能非凡、性能极佳
可令代码高亮、语法提示、自动完成
更重要的是,它支持众多插件扩展——锦上添花、强之又强
本文着重介绍Sublime Text 3可助力前端开发的优秀插件以及更改默认设置

  • Sublime Text 3:自用插件及设置
    • Eemmet插件——HTML必不可少的插件
    • Autoprefixer——CSS3前缀自动补全
    • JsFormat——JS格式化
    • SublimeCodeIntel——代码提示插件
    • SublimeTmpl——模板插件
    • Terminal——命令行窗口
    • SideBarEnhancements——右键菜单增强插件
    • ColorPicker——颜色拾取器
    • ColorHightlighter——编辑器中颜色编码预览
    • AutoFileName——自动提示路径
    • JSHint——代码检查工具
    • DocBlockr——快速注释
    • Sass——Sass语法高亮
    • Vue——Vue语法高亮
    • LiveReload
    • Sublime用户自定义设置


Eemmet插件——HTML必不可少的插件

Emmet插件可以说是使用Sublime Text进行前端开发必不可少的插件
Sublime Text 3:自用插件及设置_第1张图片
基本用法:输入标签简写形式,然后按Tab键
关于Emmet的更多介绍,请查看 [官方文档]
这份 速查表,可以帮你快速记忆简写形式

Autoprefixer——CSS3前缀自动补全

这是一款CSS3私有前缀自动补全插件
该插件使用CanIUse资料库,能精准判断哪些属性需要什么前缀
与 CssComb插件一样,该插件也需要系统已安装 Node.js环境
使用方法:在输入CSS3属性后(冒号前)按 Tab
注意:它的使用依赖于nodejs,所以一定要安装了nodejs才可以正常的使用。

JsFormat——JS格式化

这是一款将JS格式化的插件
Sublime Text 3:自用插件及设置_第2张图片
可在JS文件中通过鼠标右键-> JsFormat 或键盘快捷键 Ctrl+ Alt+ F对JS进行格式化

SublimeCodeIntel——代码提示插件

这是一款代码提示插件,支持多种编程语言
该插件安装时间可能相对较长
更特别的是,安装该插件后需要根据您使用的编程语言进行配置

SublimeTmpl——模板插件

SublimeTmpl能新建html、css、javascript、php、python、ruby六种类型的文件模板,所有的文件模板都在插件目录的templates文件夹里,可以自定义编辑文件模板。
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

Terminal——命令行窗口

在编程过程中,我们经常需要使用到命令行窗口,Terminal插件可以允许在Sublime Text 3中打开cmd命令窗口
安装好该插件后
即可使用快捷键 Ctrl+ Shift+T呼出命令行窗口

SideBarEnhancements——右键菜单增强插件

SideBarEnhancements是一款很实用的右键菜单增强插件

ColorPicker——颜色拾取器

能在Sublime界面直接调出取色器,效果如下图:
Sublime Text 3:自用插件及设置_第3张图片
使用方法:在Sublime界面按下 ctrl+ shift+ C

ColorHightlighter——编辑器中颜色编码预览

能在CSS编辑过程中看见颜色的预览,效果如下图:
Sublime Text 3:自用插件及设置_第4张图片

AutoFileName——自动提示路径

sublime中并没有在编辑器中内嵌提示路径的功能,所以对于一些记性不太好的人(比如我),就十分麻烦;这个插件很好地弥补了这一缺陷,不过装了这个插件后,在HTML中的