本文主要介绍一些关于用于前端开发的 Sublime Text 插件,会持续更新。

安装均可以用 package_control 的方式进行安装。

SublimeLinter

Github 地址:https://github.com/SublimeLinter/SublimeLinter3

SublimeLinter 是前端编码利器用于高亮提示用户编写的代码中存在的不规范和错误的写法,支持 JavaScript、CSS、HTML、Java、PHP、Python、Ruby 等十多种开发语言。

SublimeLinter

Color Highlighter

Github 地址:https://github.com/Monnoroch/ColorHighlighter

ColorHighlighter是一个显示选中颜色代码的视觉颜色的插件。如果您选择“# fff“,它将向您展示白色。ColorHighlighter支持所有CSS颜色格式,如Hex,RGB,HSL,HSV,同时包括颜色关键词,如“red”“green”,等等。

ColorHighlighter

ColorHighlighter

此外他自身还带有颜色选择器,在没有联网的时候也可以使用。只需要按下 Command + Shift + C(默认快捷方式)

ColorHighlighter

LiveReload

Github 地址:https://github.com/Grafikart/ST3-LiveReload

使用LiveReload,可以实时保存刷新,那样就不用按F5和切换界面了,大大的提高了开发效率。

LiveReload

操作视频

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, …

发表评论

电子邮件地址不会被公开。 必填项已用*标注