在webstorm设置File watcher for Jade

用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文件需要在工程中才有效。

时间: 2024-11-19 07:42:55

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

如何为WebStorm设置SASS的File Watchers?

Webstorm是一个很牛叉的IDE,现在工作每天都是用它了. 最近开始用SASS,LESS等来写CSS,而在Webstorm中,它自带一个File Watchers功能,设置一下,即可实时编译SASS,LESS等. LESS的实时编译很简单,在node平台安装一下即可. 而在折腾SASS在Webstorm上的实时编译时,花了我一点时间.因为按照网上的教程设置都不成功,最后自己把设置改来改去终于折腾好了. 下面就是在WebStorm设置SASS的File Watchers的步骤: 1. 安装Ru

Sass安装与Webstorm File Watcher配置

一.Sass安装 ruby安装 mac系统默认安装了ruby,可以直接跳过此步骤,linux和windows需要安装ruby环境. windows安装ruby环境: 到ruby官网下载自己系统适用的版本(我下的是2.1.7(x64)) 安装ruby,此步骤只需留意勾选Add Ruby executables to your PATH这个选项,它将添加环境变量,不然以后使用编译软件的时候会提示找不到ruby环境,影响Webstorm 自动编译. Sass安装(淘宝RubyGems镜像) 在开始菜单

webstorm 设置 sass自动编译问题

sass语法.使用它带来的好处,就不再这里做介绍了,主要看怎么在webstorm里配置自动编译. sass编译是需要Ruby环境的,可以到这里去下载  :  https://rubyinstaller.org/downloads/    ,安装时选择加入Path 安装完成后需测试安装有没有成功,运行CMD输入以下命令: ruby -v //如安装成功会打印 ruby 2.2.2p95 (2015-04-13 revision 50295) [i386-mingw32] 如上已经安装成功,Ruby

设置webstorm的file watch 监视scss文件

参考:http://blog.founddrama.net/2013/04/watching-compass-files-in-webstorm/ 上面红色划线部分. 特别注意arguments: 像使用compass框架的配置文件.需要按图中设置

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

启动webStorm之后,点击“FIle"菜单,选择其下的”Settings" 2.在左侧的菜单中选择“Editor/Colors & Fonts/Font 在右侧Scheme Name后侧的”Save as...“按钮,另存一个设置,然后可以修改字体大小和字体.

mac下webstorm添加scss watcher

一.前提条件: 1.安装ruby,如果我没记错的话,mac自带ruby,终端输入 ruby -v ,回车,如果显示ruby的版本号,则说明ruby环境已经安装好了.如果没有,自行安装ruby.例如我的mac显示: ruby 2.0.0p648 (2015-12-16 revision 53162) [universal.x86_64-darwin15] 2.安装sass,过程与win系统的一样,安装好后,终端输入 sass -v,回车,若显示sass版本号,说明已经安装好了. 例如我的mac显示

phpstorm配置File Watcher在windows下自动编译sass文件

最近刚接触sass这个css预处理器,其在windows上需要先安装Ruby运行环境.装好Ruby和sass后,发现如果要将.sass文件转成css的话,还需要在控制台中输入命令,比较麻烦. 由于我自己用的IDE是phpstorm,所以去其官网翻了下,可以用里面的File Watchers来实现自动转换.sass->.css文件. 其实当你新建一个.sass文件的时候,phpstorm也会提示是否配置File Watchers. 配置步骤 以windows环境的phpstorm 7.1.3为例:

将webstorm设置为eclipse风格

执行file  ->  Settings  ->  Appearance & Behavior  ->  Keymap  ->  在Appearance & Behavior>Keymap对话框中的Keymaps下拉框中选择Eclipse点击ok就设置好啦. 如图所示: 1. 2.

WebStorm 设置光标位置不随意停靠

使用WebStorm时,光标总是可以随意点击,在下一行点击时会停留在点击的地方,要修改某一行的代码很不习惯; WebStorm版本:2017.3  Build 173.3727.108; 修改方法:File > Setting > Editor > Genaral -- Virtual Space,取消勾选Allow placement of caret after end of line.