基于WebStorm(二)-----webstorm项目中pug转化为html

 

 

 

 

总所周知,在开发过程中html界面最烦的就是'<>'与'<></>',有时候稍微不小心少打了个'>'项目就开始罢工,开始不跑;为了提高效率也为了减少不必要的错误影响开发心情,所以jade应运而生,jade在github上开源(https://github.com/pugjs/pug)受到了一众web开发者的喜爱,后来因为版权问题,jade更名为pug;

pug编码风格简单,可复用性高,加快了程序员写代码的速度,但对于初学者来说,pug的代码可能不如html来的易读,下面进入正题,pug是为了简化html而生,当然首要前提就是兼容html,在webstorm中提供了相关的转化方法.

首先打开webStorm,在webStorm中进行设置,

 

 安装pug插件,然后同样在设置界面,选择TOOl功能下的file watch,配置属性,

按下图所示进行属性配置:

 

完成后点击ok,回到项目主界面,在Views文件夹下新建jade文件,可以看到新建的文件夹下有一个html文件

打开新建的jade文件与html文件右键任一文件的右键,选择分屏(左右上下随意),可以看到如图所示,pug与html是实时编译的,既提高了效率又不影响阅读.

至此,就可以愉快的写代码了