用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. CocoaPods pod install

    加参数可以提升更新的速度 方法1: pod install --verbose --no-repo-update pod update --verbose --no-repo-update 方法2: ...

  2. Visual Studio LightSwitch

    LightSwitch是一个基于模板的自动化开发Silverlight和HTML5应用程序的工具,不同于一般的基于数据字典,配置生成的应用程序的工具,因为LightSwtich提供的所有模板都是可以扩 ...

  3. 一小时包教会 —— webpack 入门指南

    什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 我们可以 ...

  4. Android N 多窗口模式,你需要知道的一切

    Android N中最大.最引人注意的变化就是Mutil-window模式.对于一个开发者,我们最关心的就是:Mutil-window模式下怎么配置mutil-window模式.Activity的生命 ...

  5. IEEE754、VAX、IBM浮点型介绍和.NET中互相转换

    [题外话] 最近在做C3D文件的解析,好奇怪的是文件中竟然存储了CPU的类型,原本不以为然,结果后来读取一个文件发现浮点数全部读取错误.查了下发现虽然在上世纪80年代就提出了IEEE754要统一浮点数 ...

  6. Python调用C++的DLL

    import os import sys from ctypes import * test = cdll.LoadLibrary('D:\Python27\py.dll') print test.A ...

  7. 《Qt Quick 4小时入门》学习笔记3

    http://edu.csdn.net/course/detail/1042/14807?auto_start=1 Qt Quick 4小时入门 第八章:Qt Quick中的锚(anchors)布局 ...

  8. Trace Flag

    Trace Flag能够影响Sql Server的行为,主要用于diagnose performance issue,官方解释是: Trace flags are used to temporaril ...

  9. js高程读书笔记(第4章--变量、作用域和内存)

    JavaScript变量松散类型的本质,决定了它只是在特定时间用于保存特定值的一个名字而已.由于不存在定义某个变量必须要保存何总数据类型值的规则,变量的值及其数据类型可以在脚本的生命周期内改变. 1. ...

  10. EF-InvalidOperation系列

    1.InvalidOperation强制转换为值类型 'System.Guid' 失败,因为实例化的值为 null.结果类型的泛型参数或查询必须使用可以为 null 的类型 错误信息: The cas ...