用Jade模板引擎写html确实方便,元素不用闭合,很多种简写的方法。

为了要知道自己写的对不对,就要用到jade -w命令监控jade文件,只要变化就编译。

现在用webstorm写代码的超多,可以通过其中的Filewatcher的方式关联jade命令做到自动化编译生成html文件。

步骤:

1.当然是安装jade,装过的就忽略。

npm install -g jade

2.设置Webstorm,添加filewatcher for jade

点击菜单项“File->Settings...”,在打开的“Settings”对话框的左边选项中选择“File Watchers”,然后在右侧点“+”图标(add)。

参照下图设置各项参数,注意:jade文件需要在工程中才有效。

在webstorm设置File watcher for Jade的更多相关文章

  1. 如何为WebStorm设置SASS的File Watchers?

    Webstorm是一个很牛叉的IDE,现在工作每天都是用它了. 最近开始用SASS,LESS等来写CSS,而在Webstorm中,它自带一个File Watchers功能,设置一下,即可实时编译SAS ...

  2. Sass安装与Webstorm File Watcher配置

    一.Sass安装 ruby安装 mac系统默认安装了ruby,可以直接跳过此步骤,linux和windows需要安装ruby环境. windows安装ruby环境: 到ruby官网下载自己系统适用的版 ...

  3. webstorm设置babel,使用es6

    原文链接:https://blog.csdn.net/peade/article/details/76522177 网上有很多关于如何设置babel的.我学习着设置,但总差那么几步,没能满足我的需求. ...

  4. WebStorm设置左侧菜单栏背景和字体设置

    WebStorm左侧菜单栏 webstorm是一款前端IDE利器,个人感觉黑色的背景比较炫酷,刚开始从网上下载的主题只能修改编辑窗口的背景色,经过查询资料终于把左边菜单栏的背景色也修改了. 第一步:点 ...

  5. webstorm 设置 sass自动编译问题

    sass语法.使用它带来的好处,就不再这里做介绍了,主要看怎么在webstorm里配置自动编译. sass编译是需要Ruby环境的,可以到这里去下载  :  https://rubyinstaller ...

  6. Webstorm设置代码提示

    下载路径: https://github.com/virtoolswebplayer/ReactNative-LiveTemplate 本插件可以配合Webstorm设置代码提示. Mac下安装 We ...

  7. 设置webstorm的file watch 监视scss文件

    参考:http://blog.founddrama.net/2013/04/watching-compass-files-in-webstorm/ 上面红色划线部分. 特别注意arguments: 像 ...

  8. WebStorm设置编辑器中的字体大小

    启动webStorm之后,点击“FIle"菜单,选择其下的”Settings" 2.在左侧的菜单中选择“Editor/Colors & Fonts/Font 在右侧Sche ...

  9. 在WebStorm里配置watcher实现编辑less文件时自动生成.map和压缩后的.css文件

    [文件(File)]-[设置(Settings)]-[工具(Tools)]-[File Watchers]-[+]-[Less]打开New Watcher配置界面. https://blog.csdn ...

随机推荐

  1. adb 无法启动问题

    一.情况描述: 我们在使用eclipse开发有时候会出现adb连接异常中,有时候控制台会打印出来 adb connect异常 比如会出现下面这样 : [2014-12-18 16:18:26 - ] ...

  2. ABP理论学习之NHibernate集成

    返回总目录 本篇目录 Nuget包 配置 实体映射 仓储 仓储基类 实现仓储 自定义仓储方法 阅读其他 ABP可以使用任何ORM框架工作,并且已经内置了NHibernate集成.这篇文章会解释如何在A ...

  3. [.net 面向对象程序设计进阶] (13) 序列化(Serialization)(五) Json 序列化利器 Newtonsoft.Json 及 通用Json类

    [.net 面向对象程序设计进阶] (13) 序列化(Serialization)(五) Json 序列化利器 Newtonsoft.Json 及 通用Json类 本节导读: 关于JSON序列化,不能 ...

  4. [ASP.NET MVC 小牛之路]15 - Model Binding

    Model Binding(模型绑定)是 MVC 框架根据 HTTP 请求数据创建 .NET 对象的一个过程.我们之前所有示例中传递给 Action 方法参数的对象都是在 Model Binding ...

  5. Windows Azure Storage (23) 计算Azure VHD实际使用容量

    <Windows Azure Platform 系列文章目录> 对于A系列和D系列的虚拟机来说,使用的是普通存储. 普通存储的存储资源,是按照每GB每月计费的.Microsoft Azur ...

  6. 《Entity Framework 6 Recipes》中文翻译系列 (29) ------ 第五章 加载实体和导航属性之过滤预先加载的实体集合和修改外键关联

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 5-13  过滤预先加载的实体集合 问题 你想过滤预先加载的实体集合,另外,你想使用 ...

  7. VS2013的 Browser Link 引起的问题

    环境:vs2013 问题:在调用一个WebApi的时候出现了错误: 于是我用Fiddler 4直接调用这个WebApi,状态码是200(正常的),JSon里却提示在位置9409处文本非法, 以Text ...

  8. [大数据之Spark]——快速入门

    本篇文档是介绍如何快速使用spark,首先将会介绍下spark在shell中的交互api,然后展示下如何使用java,scala,python等语言编写应用.可以查看编程指南了解更多的内容. 为了良好 ...

  9. HttpResponseMessage 调用.net web api

    // // GET: /Home/ //释迦苦僧 public ActionResult Index() { HttpClient client = new HttpClient(); client. ...

  10. js中的块作用域

    今天我们来一起研究下JavaScript中的变量作用域问题,话不多说,直接上代码. <script type="text/javascript"> (function( ...