用Jade模板引擎写html确实方便,元素不用闭合,很多种简写的方法. 为了要知道自己写的对不对,就要用到jade -w命令监控jade文件,只要变化就编译. 现在用webstorm写代码的超多,可以通过其中的Filewatcher的方式关联jade命令做到自动化编译生成html文件. 步骤: 1.当然是安装jade,装过的就忽略. npm install -g jade 2.设置Webstorm,添加filewatcher for jade 点击菜单项“File->Settings...”,在…

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

一.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镜像) 在开始菜单…

原文链接:https://blog.csdn.net/peade/article/details/76522177 网上有很多关于如何设置babel的.我学习着设置,但总差那么几步,没能满足我的需求. 我使用的是webStorm2017.1版本. babel安装准备 使用webStorm自带的filewatcher中的babel自动编译前,需要安装一些babel库 全局安装babel-cli npm install -g babel-cli 网上有些教程让全局安装babel,实际上新的babel…

WebStorm左侧菜单栏 webstorm是一款前端IDE利器,个人感觉黑色的背景比较炫酷,刚开始从网上下载的主题只能修改编辑窗口的背景色,经过查询资料终于把左边菜单栏的背景色也修改了. 第一步:点击"file --> settings",如下图所示: 第二步:选择appearance->Theme选择darcula(黑色主题) 在 IDE Settings > Appearance 的右边菜单里,选择 Theme > Darcula主题即可.IDE Sett…

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

下载路径: https://github.com/virtoolswebplayer/ReactNative-LiveTemplate 本插件可以配合Webstorm设置代码提示. Mac下安装 Webstorm2016.1为例安装路径 在终端:$ cd ~/Library/Preferences/ $ ls 找到Webstorm版本 $ open WebStorm2016.1 先将ReactNative.xml复制到options文件夹里一份 为确保万无一失,再创建一个templates文件夹…

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

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

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