如何让Sublime支持Bootstrap样式补全（Nodejs相关插件推荐）

如何让Sublime支持Bootstrap样式补全（Nodejs相关插件推荐）

懒得敲字，问下；）

5 回复

如何让Sublime支持Bootstrap样式补全（Nodejs相关插件推荐）

在使用 Sublime Text 编辑器时，为了提高开发效率，我们常常希望编辑器能够提供一些智能提示功能，比如自动补全 Bootstrap 的样式类。下面我们将介绍如何配置 Sublime Text 来实现这一功能。

1. 安装 Package Control

首先确保你的 Sublime Text 已经安装了 Package Control。如果还没有安装，可以通过以下步骤进行安装：

  1. 打开 Sublime Text。
  2. 按 Ctrl + 打开命令面板。
  3. 输入 Install Package Control 并按回车。

2. 安装 Bootstrap 3 Snippets 插件

Package Control 安装完成后，我们可以利用它来安装其他有用的插件。接下来安装 Bootstrap 3 Snippets 插件：

  1. 按 Ctrl + Shift + P 打开命令面板。
  2. 输入 Install Package 并选择它。
  3. 在弹出的搜索框中输入 Bootstrap 3 Snippets。
  4. 选择并安装该插件。

3. 配置与使用

安装完成后，你就可以在 HTML 文件中使用 Bootstrap 的样式类了。例如，如果你想插入一个按钮，只需要输入 btn 然后按下 Tab 键，Sublime Text 将自动补全为：

<button type="button" class="btn">Button</button>

4. 使用 Emmet 插件增强功能

除了 Bootstrap 3 Snippets 插件外，我们还可以结合 Emmet 插件来进一步提升开发效率。Emmet 是一个强大的工具，可以快速生成 HTML 和 CSS 代码片段。

  1. 使用 Package Control 安装 Emmet 插件：

    • 按 Ctrl + Shift + P 打开命令面板。
    • 输入 Install Package 并选择它。
    • 在搜索框中输入 Emmet 并安装。

  2. 使用 Emmet 快速生成代码片段：

    • 在 HTML 文件中输入 div.btn 然后按下 Tab 键，Emmet 将自动扩展为：
<div class="btn"></div>

通过以上步骤，你可以轻松地在 Sublime Text 中使用 Bootstrap 的样式类，并且结合 Emmet 插件进一步提高开发效率。希望这些技巧对你有所帮助！


Ctrl+r也很弱，要函数列表，为毛把console.info语句都弄出来呢：（

脑补

上WebStorm吧

为了使 Sublime Text 支持 Bootstrap 的样式补全，你可以安装一些插件来提高你的开发效率。以下是一些推荐的插件：

1. Emmet

Emmet 是一个非常强大的工具，可以帮助你在 HTML 和 CSS 中快速编写代码。它可以通过缩写来生成完整的代码块。

安装方法：

  1. 打开 Sublime Text。
  2. 使用快捷键 Ctrl+Shift+P 打开命令面板。
  3. 输入 Install Package 并选择 Package Control: Install Package。
  4. 搜索并安装 Emmet 插件。

示例代码：

假设你想创建一个 Bootstrap 的按钮，使用 Emmet 可以这样输入：

.btn.btn-primary

然后按 Tab 键，Emmet 会将其扩展为：

<button class="btn btn-primary"></button>

2. Snippet for Bootstrap

这个插件提供了大量的 Bootstrap 样式和组件的代码片段。

安装方法：

  1. 打开 Sublime Text。
  2. 使用快捷键 Ctrl+Shift+P 打开命令面板。
  3. 输入 Install Package 并选择 Package Control: Install Package。
  4. 搜索并安装 Snippet for Bootstrap 插件。

使用方法：

当你在 HTML 文件中输入某个 Bootstrap 组件的关键词时，可以触发相应的代码片段。例如，输入 .btn 然后按 Tab 键，将会自动生成一个 Bootstrap 按钮的代码片段。

3. Bootstrap 3 Snippets

另一个提供 Bootstrap 代码片段的插件，适用于 Bootstrap 3 版本。

安装方法：

  1. 打开 Sublime Text。
  2. 使用快捷键 Ctrl+Shift+P 打开命令面板。
  3. 输入 Install Package 并选择 Package Control: Install Package。
  4. 搜索并安装 Bootstrap 3 Snippets 插件。

示例代码：

输入 .container 然后按 Tab 键，将会自动生成：

<div class="container">
    <!-- Content Here -->
</div>

以上插件的安装和使用方法都很简单，通过这些插件，你可以在 Sublime Text 中更高效地编写 Bootstrap 代码。

回到顶部