此页面由 Cloud Translation API 翻译。

Sublime Text 插件

从您开始开发网站那一刻开始，您要使用的第一个工具就是文本编辑器，既可以是像记事本一样简单的工具，也可以是完整的 IDE。

在本集视频中，Addy 和 Matt 介绍了他们为 Sublime Text 打造的一系列插件，并探讨了每个插件对实现工作流程有何帮助。

软件包控制

如需获取该剧集中引用的软件包（或插件），您需要安装 Package Control，这不仅简单易行，而且您可以点击此处查看具体操作说明。

软件包控制屏幕截图

JSHint

JSHint 是一种 JavaScript linter，用于检查您的 JavaScript 并突出显示代码中任何可能的错误或错误做法。

例如，如果您不小心输错了变量名称（如下所示），JSHint 会指出 fo 从未定义过，并且会导致错误。

var foo = { bar: 'Hello, World.' };
var msg = fo.bar;

JSHint 插件会通过在相关文本周围显示一个黄色框并将光标放在该代码段上来指出问题，这会导致 Sublime 的左下角显示错误消息。

JSHint Sublime 插件屏幕截图

它可能捕获的其他问题包括：

已定义但从未使用的变量
避免在循环内创建函数
使用正确的比较方法

如需安装 SublimeLinter-JSHint 软件包，您还需要安装 SublimeLinter 软件包，并按照“SublimeLinter-JSHint 软件包”页面上的安装说明操作。

某些开发者可能发现，同时添加 JSHint Gutter 插件会很有帮助。它会在任何存在 JSHint 问题的行的间距中放置一个小圆点。

JSHint Gutter Sublime 插件的屏幕截图

JSCS

JSCS 会突出显示 JavaScript 未遵循特定编码样式的所有位置。

例如，JSCS 可用于定义是否应在关键字后使用空格（如“if”），或定义大括号应该与方法的同一行还是新行。

SublimeLinter-JSCS 软件包会以类似于 JSHint 的样式突出显示内嵌的所有问题，从而轻松更正任何问题。

JSCS 屏幕截图

这对于团队协作非常有用，因为每个人都可以遵循相同的风格指南并保持代码的一致性。

最好的一点是，借助 JSCS-Formatter 软件包，您可以按 ctrl + shift + p，输入“JSCS Formatter: Format this file”，然后按 Enter 键，自动修复网页上的任何问题。您可以阅读 Addy 的博文了解详情。

颜色荧光笔

颜色荧光笔用于为 CSS 或 Sass 中的任何颜色定义的背景添加颜色。

颜色荧光笔 Sublime 包带下划线颜色屏幕截图

您可以定义是将鼠标悬停在定义背景上时显示为带有完整背景的下划线，还是始终在定义背景上显示颜色。只需依次前往“软件包设置”>“颜色荧光笔”>“设置 - 默认”，查看初始设置并在“设置 - 用户”中更改设置。

如需突出显示整个背景，请将以下代码添加到“设置 - 用户”文件中：

{
  "ha_style": "filled"
}

颜色荧光笔 Sublime 包填充色屏幕截图

边线颜色

边线颜色是颜色突出显示工具的替代方案，而不是在颜色变量的顶部显示颜色，而是将颜色放在该行的边线中。

边线颜色屏幕截图

颜色选择器

如果您需要快速轻松地从屏幕中选择颜色，颜色选择器软件包可能非常适合您。

按 ctrl + shift + c 键，您就可以获得一个颜色选择器了。

颜色选择器 Sublime 软件包屏幕截图

AutoFileName

AutoFileName 是一款简单的小插件，可在您输入内容时列出可能的文件。如果您尝试输入图片名称或者添加 CSS 或 JS 文件，这会非常方便，因为这可以节省时间，更重要的是可以降低拼写错误风险。

AutoFileName 屏幕截图

前缀自动添加器

我们都经历过这样的时刻：忘了添加前缀 CSS 属性。借助自动前缀工具，您只需在 CSS 上运行该前缀，它就会添加您需要的所有前缀。

这意味着我们继续...

.container-thingy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

...只需按 ctrl + shift + p 并输入“Autoprefix CSS”，然后按 Enter 键即可。

.container-thingy {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}

您还可以在软件包设置中定义想要支持的浏览器和浏览器版本。如需了解详情，请参阅“软件包控制”页面。