WebStorm添加jade(pug) watcher

最新推荐文章于 2022-09-15 10:06:34 发布
原创 最新推荐文章于 2022-09-15 10:06:34 发布 · 5.6k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html

本文介绍如何在WebStorm中设置FileWatcher以实现Pug到HTML的自动转换，便于实时预览和编辑。通过安装Pug及命令行工具并配置相关参数，可提升前端开发效率。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

WebStorm添加jade(pug) watcher

jade由于版权问题改名为了pug，但是基本内容没有改变。

pug主要用在Node中，但并不妨碍我们在其他场合使用它。自从接触pug以来，我就很少用原生html语言来编辑网页了，并不是说HTML不好而是jade以缩进来表示HTML中的嵌套关系，结构层次远比HTML要清晰，而且方便学习，使用简单。我在非Node项目中使用pug主要是为了方便查看，编辑后需要转换成HTML再使用。

pug的相关用法可以在http://jade-lang.com/学习。

为了方便的查看pug的转化效果，可以给webStorm设置一个FileWatcher，这样可以自动生成对应html文件。

下载pug

npm install pug

同时下载pug命令行工具

npm install pug-cli

设置watcher

在WebStorm下，File->settings

在左上角搜索watcher，选择Tools->fileWatcher

添加一个watcher，设置如下

这里写图片描述

Program下，选择node_modules/.bin/pug.cmd

Argumets 前一定要加上-P ,使HTML格式更加美观

webstorm 编写pug与pug的编译配置
远走的兔子博客
01-03 3884
一 环境说明 系统：window 10 webstorm：2017.03 二、webstorm编写配置 点击：webstorm左上角的file file->settings->Plugins 在搜索框中搜索pug,，点击下面的install进行安装。这样pug插件就安装好了。这样，在新建文件的时候就会出现pug的选项。 三、编译pug 首先需要确定电脑已经安
在webstorm中配置pug、scss的file watcher及编译路径
piglet1963的博客
05-25 2825
配置pug 下载pug及命令工具 npm install pug npm install pug-cli 配置file watcher program中填  [path]\node_modules\.bin\pug.cmd arguments中填 -P $FileName$ 如果想要配置编译文件路径，在arguments后填 -o [path
webstorm 下载并设置jade、less
橙子wj的博客
10-20 2822
和Intellij出自同一个公司。jetbrains的产品总是备受期待。现在做的项目需要把之前的html等改为jade开发，这里记录一下开始的设置过程。如果之前已有项目，现在只是改为webstorm开发的话，想要导入项目不要选open，因为可能提示你找不到 iml 文件。一般项目的module的根目录才有iml，如果是module中的某个子文件夹用来存放jade、less等的话，无法直接用open打
WebStorm 5.0.4支持Jade模板
wuyuanjingni的专栏
01-28 1458
WebStorm 5.0引入初始Jade模板，包括： 根据选定的文档类型判断代码完成的HTML标签以及属性代码完成支持所有Jada模板引擎文件路径完成和验证有扩展和包含两种语句 WebStorm 5.0 在JavaScript开发上有几十个大大小小的改进，值得关注的有以下几点： JSTestDriver支持修复了许多bug，速度改进能调试JSTestDriver单元测试项目级JS
phpstorm在原有的jade项目上出现Invalid indentation, you can use tabs or spaces but not both
劲枫的博客
04-15 435
由于接受他人项目需要直接在原来的模板上新建东西 。 但是由于编辑器不同的原因，原有项目使用的tab，我这边之前tab是按照缩进四格做的。导致出错。 首先查看下自己的编辑器是否也是如此，如下 可以看到，我在“测试”那里使用的tab但是出现四格空格 修复，如下全部用tab缩进 ...
1.2 webstorm设置pug自动编译
LetsStudy的博客
06-18 746
一、File->Setting->Tools选择File Watchers
webpack使用
QMM的专栏
09-05 403
1. 创建自己的项目文件夹 2.  初始化npm      npm init      输入后，首先可以都使用默认值，一直enter，最后确定就可以，确定以后会在文件夹中生成一个package.ison文件 3. init之后需要安装webpack      npm install webpack --save-dev     安装成功之后会在文件夹下生成一个node_modules文
webstorm添加vue.js支持的方法教程
10-19
因为本人使用的是webstorm2016 2.3版本，结果竟然不支持vue文件，所以找到了一个解决方法，下面这篇文章主要给大家介绍了关于webstorm添加vue支持的方法教程，需要的朋友可以参考借鉴，下面来一起看看吧。
webstorm无法打开解决方案
ghost的博客
09-15 6889
通过安装根目录/bin/webstorm.bat运行查看错误原因（idea其实同理），该文件是启动文件，无法打开都可以在这里查看原因。个人怀疑有些不是内存原因的闪退也跟这里有问题有关。
在webstorm设置File watcher for Jade
weixin_33985507的博客
01-26 247
用Jade模板引擎写html确实方便，元素不用闭合，很多种简写的方法。 为了要知道自己写的对不对，就要用到jade -w命令监控jade文件，只要变化就编译。 现在用webstorm写代码的超多，可以通过其中的Filewatcher的方式关联jade命令做到自动化编译生成html文件。 步骤： 1.当然是安装jade，装过的就忽略。 npm install -g jade   ...
在WebStorm里配置watcher实现编辑less文件时自动生成.map和压缩后的.css文件
lhtzbj12的专栏
02-05 2万+
前言WebStorm是一款非常优秀的Web前端IDE工具，本文主要介绍，如何在其Watcher中进行配置，实现编辑less文件时自动生成.map和压缩后的.css文件。笔者WebStorm版本为2016.1.1。开始动手1.操作前确定成功安装less，检测方法，在命令行（cmd）,输入lessc -v，看到如下类似内容，则说明安装过了。 如果需要生成压缩后的css的文件，则需要通过以下命令安装
基于WebStorm(二)-----webstorm项目中pug转化为html
编程小渣渣的进阶之路
10-08 2898
        总所周知,在开发过程中html界面最烦的就是'<>'与'<></>',有时候稍微不小心少打了个'>'项目就开始罢工,开始不跑;为了提高效率也为了减少不必要的错误影响开发心情,所以jade应运而生,jade在github上开源(https://github.com/pugjs/pug)受到了一众web开发者的喜爱,后来因为版权问题,j...
在WebStorm中添加Vue.js单文件组件的高亮及语法支持
热门推荐
Dcatfly的博客
11-10 4万+
能来看这篇文章的想必不用我来介绍vue是什么了。先让我们膜拜大神！vue项目的创建者尤大写了个sublime下语法高亮的插件，有人问他how about webstorm support?他是这么回答的。默哀一分钟。
HTML与PUG互相编译的方法
心有猛狗
12-26 8121
pug编译为HTML我们可以借助npm安装pug的cil来实现 具体方法我在一篇博文中已有具体描述 PUG的安装与编译 HTML转换为PUG我们可以借助一个在线的工具网站 http://html2jade.vida.io/ HTML与PUG在线转换工具 点击打开链接
在mac os webstorm中配置pug、sass和babel的file watcher
piglet1963的博客
02-01 839
pug 1.下载全局安装pug 2.配置watcher program，默认为/usr/local/bin/pug arguments， $FileName$ -o $FileParentDir$[your path] scss 1.下载安装ruby 2.下载sass 3.配置watcher program，默认为/usr/local/bin/sass argume
webstrom官方的活动模版介绍
weixin_34100227的博客
10-17 275
编辑模板变量对话框 文件|设置|生活模板——编辑变量Windows和LinuxWebStorm |偏好|生活模板——编辑变量在OS XCtrl + Alt + S 当你点击对话框打开编辑变量按钮模板文本区现场模板页面。 的编辑变量启用按钮只有在模板的身体包含至少一个用户定义的变量,也就是说,一个变量不同$END$或$SELECTION$. 使用...
PUG转HTML格式
Curia_Coder的博客
07-27 8359
业务原因接手的项目是pug格式的，修改维护非常困难，就打算全部转换为html格式。 安装node.js 转换需要Node.js，并需要npm安装pug的cil，这个可以参考网上教程。 PUG批量转换html 打开cmd，进入需要转换的目录，输入Pug -P 项目名    就可以进行批量转换 注意：           1.转换可能出现错误，控制台会显示出错位置和原因，大多是pug编写不规...
webstorm如何添加到右键菜单
最新发布
07-04
可以通过修改注册表将 WebStorm 添加到文件或文件夹的右键上下文菜单中，以便快速使用 WebStorm 打开目标文件夹。 ### 添加 WebStorm 到右键菜单的方法 #### 步骤 1：打开注册表编辑器 在 Windows 操作系统中，按下 `Win + R` 键打开“运行”对话框，输入 `regedit` 并按回车，打开注册表编辑器。如果系统提示用户账户控制 (UAC) 确认，请点击“是”。 #### 步骤 2：定位到右键菜单相关的注册表路径 导航至以下注册表路径以配置文件夹的右键菜单： ``` HKEY_CLASSES_ROOT\Directory\shell ``` 如果希望添加到文件的右键菜单，则需要定位到： ``` HKEY_CLASSES_ROOT\*\shell ``` #### 步骤 3：创建新的菜单项 在 `shell` 项下，右键单击空白区域，选择“新建” -> “项”，将其命名为 `WebStorm` 或者任意希望显示的名称。 #### 步骤 4：设置命令执行路径 在新建的 `WebStorm` 项下再新建一个名为 `command` 的子项。选中 `command`，然后双击右侧窗格中的默认值，输入 WebStorm 的安装路径，并传递 `%1` 参数，例如： ``` "C:\Program Files\JetBrains\WebStorm 2023.1\bin\webstorm64.exe" "%1" ``` 确保路径与实际安装位置一致。 #### 步骤 5：测试右键菜单 完成上述步骤后，关闭注册表编辑器。此时可以尝试右键单击任意文件夹或文件（根据之前配置的位置），检查是否已成功显示 `WebStorm` 菜单项，并验证其功能是否正常。 --- ### 示例代码：添加到注册表的 `.reg` 文件 为了简化操作，可以直接创建一个 `.reg` 文件并导入注册表。以下是示例内容： ```reg Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\Directory\shell\WebStorm] @="Open with WebStorm" [HKEY_CLASSES_ROOT\Directory\shell\WebStorm\command] @="\"C:\\Program Files\\JetBrains\\WebStorm 2023.1\\bin\\webstorm64.exe\" \"%1\"" ``` 保存以上内容为 `add_webstorm_to_context_menu.reg` 文件，双击运行即可自动添加到注册表。 ---
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值