手写笔
PhpStorm 让您可以即时将您的Stylus代码翻译成 CSS。
在你开始前
确保您的计算机上有Node.js。
在Settings/Preferences |上安装并启用Stylus插件 插件页面,选项卡Marketplace,如从 JetBrains 存储库安装插件中所述。
确保在Settings/Preferences |上启用了File Watchers插件。插件页面,标签Installed。有关详细信息,请参阅管理插件。
安装触控笔
在嵌入式终端( Alt+F12) 中,键入:
npm install --global stylus
从Stylus 官方网站了解更多信息。
编译手写笔代码
要自动编译您的代码,您需要配置一个Stylus File Watcher,它将跟踪对您的文件的更改并运行编译器。
当您打开文件时,PhpStorm 会检查当前项目中是否有可用的文件观察器。如果此类 File Watcher 已配置但已禁用,PhpStorm 会显示一个弹出窗口,通知您已配置的 File Watcher 并建议启用它。
如果在当前项目中配置并启用了适用的 File Watcher,PhpStorm 会在New Watcher 对话框中指定的事件时自动启动编译器。
如果选中自动保存编辑的文件以触发观察程序复选框,则只要对源代码进行任何更改,就会调用文件观察程序。
如果清除了自动保存编辑的文件以触发观察程序复选框,则文件观察程序在保存时启动( ,Ctrl+S)或当您从 PhpStorm 移动焦点时(在帧停用时)。
从File Watchers了解更多信息。
PhpStorm 使用生成的输出创建一个单独的文件。该文件具有源 Stylus 文件的名称和扩展名.css。生成文件的位置在New Watcher 对话框的Output paths to refresh字段中定义。但是,在Project Tree中,它们显示在现在显示为节点的源文件下。
创建文件观察器
在Settings/Preferences对话框 ( Ctrl+Alt+S) 中,单击Tools下的File Watchers。打开的File Watchers 页面显示已配置的 File Watchers 列表。
单击或Alt+Insert并从列表中选择Stylus预定义模板。
在Program字段中,指定可执行文件的路径:
适用于 macOS 和 Unix 的手写笔。
stylus.bat用于 Windows。
手动键入路径或单击并在打开的对话框中选择文件位置。
按照文件观察程序中的说明进行操作。
配置语法高亮
您可以根据自己的喜好和习惯配置支持手写笔的语法突出显示。
在Settings/Preferences对话框 ( Ctrl+Alt+S) 中,转到 。
选择配色方案,接受从默认值继承的突出显示设置,或按照颜色和字体中的说明自定义它们。