使用 SublimeWebStorm 开发 Jade

Posted 2020-08-22 caigan的技术博客

Sublime、WebStorm (phpStorm) 是前端开发者的得力工具，开发 Jade 也不例外。

在配置这些软件的 Jade 开发环境前，请先在系统中安装 Node.js 和 Jade ：

1. 安装 Node.js，装好后重启电脑
2. 安装 Jade
   • Windows：cmd中运行 npm install jade --global
   • Mac：运行 sudo npm install jade --global

配置 Sublime ：

1. 安装 Sublime Package Control，如果已经安装，可跳过本步。安装完成后，需要重启 Sublime Text，如果在菜单 Preferences > Package Settings 中可以找到 Package Control 菜单，则表示已经安装成功。下面会用 Package Control 安装 Sublime 插件，具体方法是：
   • Windows：快捷键 Ctrl+Shift+P 调出命令面板，输入 install 调出 Install Package 选项并回车，稍等片刻，在新弹出的面板中查询所需插件，回车即可安装
   • Mac：快捷键 Cmd+Shift+P 调出命令面板，输入 install 调出 Install Package 选项并回车，稍等片刻，在新弹出的面板中查询所需插件，回车即可安装
2. 语法支持：通过 Package Control 安装 Jade
3. 编译工具：
   1. 通过 Package Control 安装 Jade Build
   2. 在菜单 Tools > Build System 中，确认勾选了 Automatic 或 Jade
   3. 使用时，在 .jade 文件中按 Ctrl+B (Mac: Cmd+B) 执行编译，如编译成功会在同级目录下生成 .html 文件
   4. 推荐通过 Package Control 安装 Sublime?On?Save?Build，参考 https://sublime.wbond.net/packages/SublimeOnSaveBuild 进行配置，将 jade 添加到 filename_filter 中，这样每次保存文件即可以自动执行编译。

配置 WebStorm：

1. 语法支持：最新版本的 WebStorm 默认已经支持了 Jade 语法，如果不支持，请下载安装 Jade 插件：
   • Windows：打开菜单 File > Settings (Ctrl+Alt+S) > IDE Settings > Plugins，搜索 Jade 并安装
   • Mac：打开菜单 WebStorm > Preferences (Cmd+,) > IDE Settings > Plugins，搜索 Jade 并安装
2. 自动编译：
   • Windows：打开菜单 File > Settings (Ctrl+Alt+S) > Project Settings > File Watchers，添加 Jade

     

     

     Program 填写 C:\Users\XXX\AppData\Roaming\npm\jade.cmd（XXX为当前用户名），其他保持默认，点击 OK 即可。

   • Mac：打开菜单 WebStorm > Preferences (Cmd+,) > Project Settings > File Watchers，添加 Jade

     

     Program 填写 /usr/local/bin/jade，其他保持默认，点击 OK 即可。

   • 使用时，每次保存 .jade 文件会执行自动编译，如编译成功会在同级目录下生成 .html 文件。需要注意的是，File Watchers 属于 Project Setting，新建的项目需要重新设置。