前端开发人员的精彩文字

以下是Wes Bos的来宾帖子。 一段时间以来，Wes一直在撰写有关Sublime Text及其带来的所有出色功能的文章。 他现在有新书和视频包： Sublime Text Power User 。 我最近在一次会议上遇到了他，看到了他关于Sublime Text的演讲。 会议对此很热闹。 新手的下巴掉了，老职业球员学会了新的把戏。 在这里，Wes将分享一些最好的东西，因为它们与像我们这样的前端行业有关。

随着Sublime Text成为当今网络开发最热门的编辑器之一，了解与前端开发相关的编辑器的来龙去脉非常重要。 这篇文章并没有提供有关Sublime Text的逐步指导，而是提供了一些热门提示，技巧和软件包，这些内容将使您对Sublime Text感到惊奇。

语法突出显示

这几乎是2015年一吨 ，在过去几年里发生了变化- CSS已经具有新功能的分解，JavaScript的不断推出新的功能和语法，我们有新的语言少数是编译成HTML，CSS或JavaScript。 Sublime随附的语法突出显示器很旧，甚至某些语言不可用。

以下软件包将使最佳语法突出显示。 即使您已经拥有所有语言的语法突出显示器，也请阅读一下，因为您可能希望更改其中的几种。

与默认JavaScript荧光笔相比， JavaScript Next语法荧光笔提供了更好的代码突出显示，并支持ECMAScript 6功能，例如模块，简洁方法，箭头功能，类，生成器和访问器（ES5）。

CSS3突出显示了规范中的每个CSS3功能。 这是所有新事物，还有尚未实现的事物。 这应该完全替代您现有的任何现有CSS语法突出显示。

Sass用户应安装SCSS软件包。 抬起头来–当您确实没有编写Sass语法时，搜索和安装Sass是一个常见错误，但是Scss语法–确保您启用了正确的语法，以便所有其他软件包（例如Emmet）可以继续正常工作。

当然，如果您选择CSS武器，也可以使用Stylus和LESS软件包。

写Coffeescript？ 确保您安装了Better-Coffeescript软件包。 抓紧更好的咖啡包非常重要，因为不再维护常规的CoffeeScript包。 在那个营地里还有一个打字稿包 。

Haml软件包扩展了默认的Haml软件包，以包括嵌套语言（例如JS，CSS，Sass等），因此您可以同时维护突出显示和摘要。 Slim和Jade软件包为这些新的标记语言提供了很多需要突出显示的内容。

软件包和插件

Sublime的受欢迎程度很大程度上归功于社区创造的无穷无尽的有趣和有用的软件包。 如果您不熟悉Sublime，可以使用Package Control添加和管理您的软件包。

虽然我们可以整日闲逛并讨论最好的Sublime软件包，但我希望您能在评论中做这些，但是对于使用HTML，CSS和JavaScript的前端开发人员来说，这些是少数必备软件包。

颜色荧光笔

在样式表中使用颜色时-使用某种视觉辅助为您显示实际颜色会很有帮助。 Color Highlighter将扫描您的样式表，并通过在背景中填充该颜色来为您的颜色名称，十六进制代码或RGBA着色。 有一些选项可以在颜色下划线或在装订线中将其显示为圆形。

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

Emmet

自Zen编码时代以来，几乎每个人都已经了解Emmet，并且许多人都在使用它。 但是，我发现许多开发人员缺少Emmet的某些强大功能。

HTML

Emmet非常适合快速编写HTML。 只需输入您想要的标记CSS选择器，然后点击选项卡即可。 使用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 {这是狗$}`→

<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

为CSS学习Emmet是前端开发人员可以进行的更好的投资之一。 它不仅可以加快您的速度，而且可以减少我们所有人犯的愚蠢错误。

Emmet for CSS通过键入所需的近似CSS属性/值来工作。 没有代码片段，Emmet进行的是模糊匹配，它会根据您输入的内容进行最佳猜测。

• 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;

您明白了–值得花时间重新训练您的大脑以使用这些模糊匹配，而不是输入整个属性和价值。

崇高的林特

整理代码是该过程中的重要一步。 如果您以前从未使用过linter，则它是一种代码质量工具，可检查错误和不良做法，并在出现错误时提醒您。

借助Sublime Linter，您可以轻松获得几乎任何语言的实时棉绒反馈。 作为前端开发人员，我们应该减少我们JavaScript以及可能CSS。 如果您输入有误，Sublime Linter将在排水沟中粘贴一个标志，以提醒您该错误。

主题和配色方案

仍在使用默认的Sublime主题和配色方案？ 现在可能是时候检查一些不同的了。 更改Sublime的颜色分为两部分- 配色方案可以更改代码语法突出显示的颜色，而主题可以更改编辑器镶边的颜色，例如选项卡，边栏和命令调色板。

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

无论您喜欢浅色还是深色，都必然会有您喜欢的主题。 以下是一些热门的：

日光黑

日光化是一个奇妙的主题，也提供了一个轻巧的主题。 它几乎在所有编辑器中都可用，并且已成为许多顶级开发人员所钟爱的标准。

钴2

这是我自己的主题，在过去5年中已经对其进行了调整和完善。 它基于原始的Cobalt主题，并进行了许多改进，着重于以清晰明晰的对比度使眼睛轻松。

Seti UI

场景中的一个新主题 ，这是一个非常黑暗的主题，在整个主题中都提供矮胖的蓝色调。

转到任何东西

如果您来自诸如Coda，Textmate或Dreamweaver之类的其他编辑器，则可能依赖于侧边栏来浏览文件。 Sublime介绍了GoTo的概念。 最简单的方法是，您可以使用它来打开打开的文件夹或项目中的任何文件。 只需Ctrl ⌘ （在Windows上为Ctrl ）+ p ，它将打开一个列表，您可以在其中开始输入文件名。 该下拉菜单支持模糊匹配，因此您不必担心拼写正确，甚至不必指定它所在的文件夹。

一旦适应了这一点，GoTo就会支持文件jquery.js:205行号，列查询jquery.js:205:15行号以及称为符号 [email protected] 符号 ，这些符号使您可以快速跳转到函数，方法或选择器。

你最喜欢什么？

Sublime Text充满了便捷的功能和软件包。 足以填满一本书！

您最喜欢的提示，技巧或套餐是什么？

翻译自: https://css-tricks.com/sublime-text-front-end-developers/