使用 Sublime、WebStorm 开发 Jade

转载 2016年05月31日 15:22:48

http://mutian.wang/tech/1465

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等App快速开发工具盘点

APICloudApp开发平台一直在不断升级开发工具库,这一年增加了众多开发工具。目的就是让开发者可以选择使用任何自己喜欢的HTML5开发工具去开发App。   这次,APICloud把所有关于开...

Node.js开发入门—使用jade模板引擎

jade模板引擎的简介以及学习资源的链接……如何在express里使用jade模板引擎……...
  • foruok
  • foruok
  • 2015年08月11日 07:03
  • 27613

在Sublime Text3中实现jade语法高亮

在Sublime Text3中实现jade语法高 一.首先安装package Control     Package Control 插件是一个方便 Sublime text 管理插件的插件,但因为 ...

使用 JADE 平台进行智能体开发

作为一名软件开发人员,我相信大家都对面向对象技术有个比较深刻的认识。面向对象技术的确为提高软件开发效率做出了巨大的贡献。但是在我们的开发过程中,面向对象也暴露了一些不足,其中最主要的不足可以归纳为:面...

sublime text 2安装包及jade插件安装

  • 2012年08月23日 08:59
  • 8.8MB
  • 下载

Sublime Text和WebStorm中配置LESS

LESS的强大在这就不多说了,有兴趣的可以去官网学习:http://less.bootcss.com/,github上也有先关的资源:https://github.com/less/less.js ...

webstorm搭配Monokai-Sublime主题颜色方法

原材料官网:http://www.jetbrains.com/webstorm/monokia:https://github.com/OtaK/jetbrains-monokai-sublime ...

Less、Sass环境配置(Webstorm和Sublime两种)

1.先说Webstorm配置Less:到Webstorm的Settings-File Watchers里面,右边的+里面添加less,然后在项目下新建.less文件就可以了,然后在Koala里面自动编...

Sublime Text 3 、WebStorm配置护眼主题(浅绿色)

本文所用软件版本Sublime Text 3(Build 3143)、WebStorm 2017.2.4(Build #WS-172.4155.35),其他版本软件配置过程可能不一样,请知悉!1.Su...

JS开发工具-WebStorm安装及高效使用教程

1,简介 WebStorm 10是一款强大的HTML5编辑工具,是 JetBrains 推出的一款商业的 JavaScript 开发工具。功能强大的前端专用IDE,拥有即时编辑(chrome)、自动...
  • jane8687
  • jane8687
  • 2016年03月01日 11:49
  • 11265
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用 Sublime、WebStorm 开发 Jade
举报原因:
原因补充:

(最多只允许输入30个字)