首页 > 代码库 > 使用 Sublime、WebStorm 开发 Jade

使用 Sublime、WebStorm 开发 Jade

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,新建的项目需要重新设置。

使用 Sublime、WebStorm 开发 Jade