IntelliJ IDEA 2025.1 Help

触控笔

IntelliJ IDEA 让您实时将您的 Stylus代码转换为 CSS。

开始之前

  1. 请确保您的计算机上安装了 Node.js

  2. 按照 StylusFile Watchers 中的说明,在 设置 | 插件 页,选项卡 Marketplace 上安装 从 JetBrains Marketplace 安装插件

安装 Stylus

  • 在嵌入的 终端Alt+F12 )中输入:

    npm install --global stylus

    Stylus 官方网站了解更多信息。

编译 Stylus 代码

要自动编译您的代码,您需要安装一个编译器并配置一个 Stylus File Watcher ,它将跟踪文件的变化并运行编译器。

当您打开一个文件时,IntelliJ IDEA 会检查当前项目中是否有可用的 File Watcher。 如果已配置此 File Watcher 但被禁用,IntelliJ IDEA 会显示一个弹出窗口,通知您已配置的 File Watcher 并建议启用它。

如果在当前项目中配置并启用了适用的 File Watcher,则 IntelliJ IDEA 会在 New Watcher 对话框 中指定的事件发生时自动启动编译器。

  • 如果选中了 自动保存编辑的文件以触发观察程序 复选框,则在对源代码进行任何更改后立即调用文件监视器。

  • 如果清除 自动保存编辑的文件以触发观察程序 复选框,File Watcher 会在保存时(文件 | 全部保存Ctrl+S )或当您将焦点从 IntelliJ IDEA 移开时(在界面失活时)启动。

了解更多 File Watchers

IntelliJ IDEA 创建了一个包含生成输出的单独文件。 源 Stylus 文件的名称和扩展名为 .css 。 生成文件的位置在 要刷新的输出路径 字段中定义,位于 新监视器对话框内。 然而,在 项目树 中,它们显示在作为节点显示的源文件下。

创建一个 File Watcher

  1. 设置 对话框(Ctrl+Alt+S )中,点击 File Watchers 下的 工具File Watchers 页面 显示了已配置的 File Watchers 列表。

  2. 点击 添加按钮 或按 Alt+Insert ,然后从列表中选择 触控笔 预定义模板。

  3. 程序 字段中,指定可执行文件的路径:

    • stylus 适用于 macOS 和 Unix。

    • stylus.bat 适用于 Windows。

    请手动输入路径或点击 浏览按钮 ,然后在打开的对话框中选择文件位置。

  4. 按照 File Watchers 中的描述进行操作。

配置语法高亮

您可以根据个人偏好和习惯配置 Stylus-aware 语法高亮。

  1. 设置 对话框(Ctrl+Alt+S )中,前往 编辑器 | 颜色方案 | Stylus

  2. 选择配色方案,接受从默认值继承的高亮设置,或按照 颜色和字体 中所述自定义它们。

配置代码样式

  1. Ctrl+Alt+S 打开设置,然后选择 编辑器 | 代码风格 | 样式表 | Stylus

  2. 使用 代码样式。 触控笔 上的控件配置 Stylus 文件中的代码样式。

最后修改日期: 2025年 4月 24日