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 的左下角会显示错误消息。

它捕获的其他问题包括：

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

要安装 SublimeLinter-JSHint Package 您还需要安装 SublimeLinter 软件包，然后按照安装步骤进行操作 “SublimeLinter-JSHint 软件包”页面中的说明。

有些开发者可能还会发现添加 JSHint Gutter 插件很有帮助。它会在相应位置放置一个小点 任何存在 JSHint 问题的行的边线。

JSCS

JSCS 会突出显示 JavaScript 不遵循特定编码风格的所有位置。

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

SublimeLinter-JSCS 软件包 以与 JSHint 样式类似的内嵌方式突出显示任何问题 从而轻松更正任何问题

在团队中工作时，这非常有用，因为每个人都可以遵循相同的样式指南，并保持代码的一致性。

最棒的是，借助 JSCS-Formatter 软件包，您只需按 ctrl + shift + p、输入“JSCS Formatter: Format this file”并按 Enter 键，即可自动修正页面上的任何问题。如需了解详情，请参阅 Addy 的博文。

颜色荧光笔

颜色标注工具 将为 CSS 或 Sass 中的任何颜色定义。

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

全背景突出显示 将以下内容添加到“设置 - 用户”文件：

{
  "ha_style": "filled"
}

边线颜色

边线颜色是颜色突出显示器的替代方案，它会将颜色放在相应行边线中，而不是在颜色变量上方显示颜色。

颜色选择器

如果您需要快速轻松地从屏幕上选择颜色 然后点击颜色选择器软件包 可能适合你。

按 ctrl + shift + c，然后您就会看到颜色选择器。

AutoFileName

AutoFileName 这个简单的小插件 。如果您尝试输入图片名称或添加 CSS 或 JS 文件，此功能非常实用，因为它可以节省时间，更重要的是，可以降低拼写错误的风险。

Autoprefixer

我们都曾有过这样的意识到时刻，而我们都忘记了 添加带前缀的 CSS 属性借助 Autoprefixer，您只需在 CSS 上运行它，它就会添加您需要的所有前缀。

也就是说，我们从这个界面…

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

只需按 ctrl + shift + p 并输入 “为 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;
}

您还可以在软件包设置中定义要支持的浏览器和浏览器版本。查看“软件包控制”页面 了解详情。

更多...

还有很多其他插件可用于 Sublime Text，因此请务必探索 Package Control。

如需获得更多建议和提示，您应查看 WesBos 关于 Sublime Text 键盘快捷键和其他插件的绝佳幻灯片演示。

WesBos 也写过一本书 高级用户的 Sublime Text 您可能会感兴趣的其他好人 :)