Sublime Text 插件

从您开始开发网站的那一刻起，您就会使用的第一个工具 是文本编辑器，无论是简单的记事本还是全面的 IDE。

在此剧集中，Addy 和Matt 在查看他们的插件集合 Sublime Text 的相关文档，并讨论如何 每个工具都能为其工作流程提供帮助

软件包控制

如需获取分集中引用的软件包（或插件），您需要执行以下操作： 安装Package Control，既清晰又简单 进行安装，您可以在 点击此处了解具体操作方法。

Package Control 屏幕截图

JSHint

JSHint 是一个 JavaScript linter，用于检查您的 JavaScript 并突出显示代码中可能存在的错误或不良做法。

例如，如果您不小心输错了变量名称，比如 那么 JSHint 会指出 fo 从未定义过， 会导致错误。

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

JSHint 插件 通过在相关内容周围显示黄色框来指出 并将光标放在这一段代码上会导致错误 Sublime 的左下角显示。

JSHint Sublime 插件屏幕截图

它捕获的其他问题包括：

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

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

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

JSHint Gutter Sublime 插件的屏幕截图

JSCS

JSCS 会突出显示任何存在 您的 JavaScript 未遵循特定的编码样式。

例如，JSCS 可用于定义是否应 用在关键字后面，例如“if”，也可以定义是否使用大括号 应与方法在同一行或新行中。

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

JSCS 屏幕截图

这对于在大型环境中 因为每个人都可以遵循相同的风格指南 以确保代码的一致性

最妙的是，利用 JSCS-Formatter 软件包，您可以自动修正网页上的任何问题 按ctrl + shift + p，然后输入“JSCS 格式化程序：格式化此文件” 然后按 Enter 键您可以参阅 Addy 的博文了解详情。

颜色荧光笔

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

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

您可以使用 或始终显示完整背景 在定义背景上显示颜色。只需前往 “软件包设置”>“颜色荧光笔”> “设置 - 默认”查看初始设置 并在“设置 - 用户”中更改您的设置。

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

{
  "ha_style": "filled"
}

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

边线颜色

边线颜色 是颜色突出显示工具的替代工具 而不是在颜色变量上方显示颜色 它会将颜色放入线条的边线中

边线颜色屏幕截图

颜色选择器

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

按下 ctrl + shift + c 键，然后按住它们即可 - 您便得到了一个颜色选择器。

Color Picker Sublime Package 屏幕截图

AutoFileName

AutoFileName 这个简单的小插件 。这超级棒 输入图片名称或 ID 时 添加 CSS 或 JS 文件，这样可以节省时间 更重要的是，还能降低拼写错误的风险

AutoFileName 屏幕截图

前缀自动添加者

我们都曾有过这样的意识到时刻，而我们都忘记了 添加一个带前缀的 CSS 属性包含 自动补全前缀 您只需在 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 提供的精彩幻灯片， 键盘快捷键和其他插件。

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