本文主要介绍一些关于用于前端开发的 Sublime Text 插件,会持续更新。
安装均可以用 package_control 的方式进行安装。
SublimeLinter
Github 地址:https://github.com/SublimeLinter/SublimeLinter3
SublimeLinter 是前端编码利器用于高亮提示用户编写的代码中存在的不规范和错误的写法,支持 JavaScript、CSS、HTML、Java、PHP、Python、Ruby 等十多种开发语言。
Color Highlighter
Github 地址:https://github.com/Monnoroch/ColorHighlighter
ColorHighlighter是一个显示选中颜色代码的视觉颜色的插件。如果您选择“# fff“,它将向您展示白色。ColorHighlighter支持所有CSS颜色格式,如Hex,RGB,HSL,HSV,同时包括颜色关键词,如“red”“green”,等等。
此外他自身还带有颜色选择器,在没有联网的时候也可以使用。只需要按下 Command + Shift + C(默认快捷方式)
LiveReload
Github 地址:https://github.com/Grafikart/ST3-LiveReload
使用LiveReload,可以实时保存刷新,那样就不用按F5和切换界面了,大大的提高了开发效率。
Emmet
Github 地址:https://github.com/sergeche/emmet-sublime
Emmet的前身是大名鼎鼎的Zen coding。它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度。
快速编写 HTML 代码
初始化
HTML文档需要包含一些固定的标签,比如、、等,现在你只需要1秒钟就可以输入这些标签。比如输入“!”或“html:5”,然后按Tab键:
嵌套
现在你只需要1行代码就可以实现标签的嵌套。
- >:子元素符号,表示嵌套的元素
- :同级标签符号
- ^:可以使该符号前的标签提升一行
快速编写 CSS 代码
值
比如要定义元素的宽度,只需输入w100,即可生成
单位别名列表:
单位别名列表:
- p 表示:%
- e 表示:em
- x 表示: ex
更多快捷方式:Emmet 文档
AngularJS
Github 地址:https://github.com/angular-ui/AngularJS-sublime-package
此插件使用方式大致如下:
- 提供许多 AngularJS 开发过程中所需自动完成的需求 (Auto-completion)
- 常见AngularJS 函数式和 ng 模型中内建的 services
- 可快速切换至选中的 directive, filter, …