Sublime Text 前端开发人员指南

以下是由 Wes Bos 撰写的客座文章。 Wes 一直在撰写有关 Sublime Text 及其为代码编辑带来的优秀功能的文章。 他现在推出了一本新书和视频包：Sublime Text 高级用户。 我最近在一次会议上见到了他，并观看了他关于 Sublime Text 的演讲。 会议上对此议论纷纷。 新手们惊叹不已，而老手们也学到了新技巧。 这里，Wes 将分享一些与我们前端人员相关的最佳功能。

随着 Sublime Text 成为当今最热门的 Web 开发编辑器之一，了解与前端开发相关的编辑器的进进出出至关重要。 本文并非关于 Sublime Text 的逐步指南，而是充满了热烈的技巧、窍门和包，可以让你成为 Sublime Text 的高手。

语法高亮器

现在已经是 2015 年了，在过去几年中发生了很多变化 - CSS 出现了新的功能，JavaScript 引入了新的功能和语法，我们还拥有将一些新语言编译成 HTML、CSS 或 JavaScript 的语言。 Sublime 附带的语法高亮器已经过时，甚至有些语言没有提供语法高亮器。

以下包将提供最佳的语法高亮功能。 即使你已经拥有了所有语言的语法高亮器，也要阅读一下，你可能希望更改其中一些。

JavaScript Next 语法高亮器提供了比默认 JavaScript 高亮器更好的代码高亮功能，以及对 ECMAScript 6 功能的支持，例如模块、简洁方法、箭头函数、类、生成器和访问器（ES5）。

CSS3 为规范中的每个 CSS3 功能提供高亮显示。 这些功能包括所有新功能，以及尚未实现的功能。 这应该完全取代你已有的任何 CSS 语法高亮。

Sass 用户应安装 SCSS 包。 注意 - 经常会有人错误地搜索并安装 Sass，而实际上他们并没有使用 Sass 语法，而是 Scss 语法 - 确保你启用了正确的语法，以便所有其他包（如 Emmet）能够正常工作。

当然，如果你的 CSS 武器是 Stylus 和 LESS，那么也可以安装这两个包。

编写 Coffeescript？ 确保你安装了 Better-Coffeescript 包。 重要的是要获取 **better-coffeescript** 包，因为常规的 CoffeeScript 包不再维护。 还有一个 Typescript 包 适用于该阵营的开发人员。

Haml 包扩展了默认的 Haml 包，包括嵌套语言（如 JS、CSS、Sass 等），以便你可以维护你的高亮显示和代码片段。 Slim 和 Jade 包为这些新型标记语言提供了急需的高亮显示功能。

包和插件

Sublime 的流行很大程度上归功于社区创建的无尽的有趣和有用的包。 如果你刚接触 Sublime，可以使用 Package Control 添加和管理你的包。

虽然我们可以在一天中不断地谈论最好的 Sublime 包，我希望你在评论中也能这么做，但对于使用 HTML、CSS 和 JavaScript 的前端开发人员来说，以下是一些必备的包。

颜色高亮器

在样式表中使用颜色时，使用某种视觉辅助工具来显示实际颜色会很有帮助。 颜色高亮器会扫描你的样式表，并通过用该颜色填充背景来突出显示你的颜色名称、十六进制代码或 RGBA。 可以选择用颜色下划线或在边距中以圆形显示颜色。

最近，添加了对 Sass、LESS 和 Stylus 变量的支持，这使得该工具可以适应几乎所有工作流程！

Emmet

几乎每个人都已知 Emmet，并且许多人从 Zen Coding 时代就一直在使用它。 但是，我发现许多开发人员错过了 Emmet 的一些强大功能。

HTML

Emmet 非常适合快速编写 HTML。 只需键入所需标记的 CSS 选择器，然后按 Tab 键。 使用 Jade、Slim 或 Haml？ Emmet 也适用于这些标记语言！

这可以像你想要的那样简单或复杂。 以下是一些示例 - 务必查看 备忘单，了解使用 Emmet 与 HTML 的所有可能方法。

• `element` + `tab` 创建该元素并将光标置于元素内部
  • `span` + `tab` → <span></span>
  • `p` + `tab` → <p></p>
• `element.className` 或 `element#ID` + `tab` 创建具有关联类或 ID 的元素
  • `span.hello` + `tab` → <span class="hello"></span>
  • `p.odd.warning` + `tab` → <p class="odd warning"></p>
  • `div#contact` + `tab` → <div id="contact"></div>
• `element>childElement` + `tab` 创建嵌套元素
  • `ul>li` + `tab` → <ul><li></li></ul>
  • `p>span` + `tab` → <p><span></span></p>
• `[element*5]` + `tab` 创建该元素的指定数量
  • `p.hello*2` + `tab` → <p class="hello"></p><p class="hello"></p>

你也可以使用 `$` 作为增量的占位符。 使用 `$$` 表示前导零。

`li.item$*3` + `tab` →

<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>

使用方括号表示属性，使用花括号表示元素文本。

`figure*2>img[src=”dog$.jpg”]+figcaption{This is dog $}` →

<figure>
  <img src="dog1.jpg" alt="">
  <figcaption>This is dog 1</figcaption>
</figure>
<figure>
  <img src="dog2.jpg" alt="">
  <figcaption>This is dog 2</figcaption>
</figure>

CSS

学习 Emmet 的 CSS 功能是前端开发人员可以做的最佳投资之一。 它不仅可以提高你的速度，还可以减少我们所有人都会犯的愚蠢错误。

Emmet 的 CSS 功能通过键入你想要的 CSS 属性/值的近似值来工作。 它没有代码片段，而是依赖于模糊匹配，根据你的输入做出最佳猜测。

• posrel → position: relative;
• posab → position: absolute;
• fl → float:
• fr → float: right;
• db → display: block;
• dib → display: inline-block;
• tdn → text-decoration: none;
• c → color: #
• w → width:
• w100 → width: 100px;
• w100p → width: 100%;
• p → padding:
• p10 → padding: 10px;
• p10p → padding: 10%;
• bt1-s-red → border-top: 1px solid red;

你明白了 - 花时间重新训练你的大脑使用这些模糊匹配，而不是完全键入所有属性和值，是值得的。

Sublime Linter

代码 lint 是一个重要的步骤。 如果你以前从未使用过 linter，它是一种代码质量工具，用于检查错误和不良做法，并在你犯错时提醒你。

使用 Sublime Linter，你可以轻松地获得几乎所有语言的实时 lint 反馈。 作为前端开发人员，我们应该对 JavaScript 代码进行 lint，甚至对 CSS 代码进行 lint。 如果你犯了错误，Sublime Linter 会在边距中添加一个标记，提醒你错误。

主题和配色方案

还在使用默认的 Sublime 主题和配色方案吗？ 或许是时候尝试一些不同的方案了。更改 Sublime 颜色包含两个部分——**配色方案**会改变代码语法高亮的顏色，而**主题**会改变编辑器外观，比如标签、侧边栏和命令面板的颜色。

从最新的 Sublime Text 3 版本开始，我们现在可以将特定的图标放置在侧边栏中。

无论你偏好明亮还是暗色，总有一款适合你的主题。以下是一些受欢迎的主题：

Solarized Dark

Solarized 是一款很棒的主题，也提供了浅色版本。它几乎可以在所有编辑器中使用，并且已经成为许多顶级开发人员喜爱的标准。

Cobalt2

这款 主题是我自己设计的，在过去的五年里不断调整和完善。它基于原始的 Cobalt 主题，并进行了许多改进，重点在于易于阅读，提供清晰锐利的对比度。

Seti UI

这是一款新主题，它是一款非常暗的主题，在整个界面中使用了蓝色的色块，形成鲜明的对比。

GoTo Anything

如果你来自其他编辑器，比如 Coda、Textmate 或 Dreamweaver，你可能依赖侧边栏来浏览文件。Sublime 引入了**GoTo Anything**的概念。简单来说，你可以用它来打开当前文件夹或项目中的任何文件。只需按下⌘（Windows 上为 Ctrl） + p，它就会打开一个列表，你可以在其中开始输入文件名。该下拉列表支持**模糊匹配**，因此你无需担心拼写完全正确，甚至无需指定它所在的文件夹。

习惯了之后，GoTo Anything 还支持文件的行号 jquery.js:205、列号 jquery.js:205:15，以及一种叫做**符号**的东西 jquery.js@ajax，它可以让你快速跳转到函数、方法或选择器。

你最喜欢哪个主题呢？

Sublime Text 充满了各种便捷的功能和插件，足够写一本书了！

你最喜欢哪些小技巧、秘诀或插件呢？