gulp - 在 VSCode 中创建文件观察器

Question

我正在尝试远离 WebStorm 并尝试配置 VS Code 以获得 WebStorm 的一些功能。我正在尝试在 VS 代码中实现 File Watcher 功能。我曾经在 WebStorm 中有 Jade 和 Stylus 的文件观察器。我已经为他们准备了 gulp 任务，并将它们添加到 tasks.json 中。我什至也为他们提供了快捷键。但我必须手动运行它们。我想要的是，无论何时保存文件，它都会检查它是 Jade 文件还是 Stylus 文件，然后运行相应的任务来生成 HTML 或 CSS 文件.

是否可以在 VS Code 中完成？如果是，那我该怎么做？

Answer 1

您必须创建一个扩展来完成您的场景。你说你已经有了 gulp 和 task.json 的自动化，所以我认为将其转换为扩展会相对容易。

创建扩展时应注意这一点

package.json

您的扩展应该适用于 Jade 或 Stylus，因此 package.json 文件应该包含:

"activationEvents": [
    "onLanguage:Jade",
    "onLanguage:Stylus"
]

OnSave 事件

有两个事件可用于检测文件保存:onDidSaveTextDocument 或 onWillSaveTextDocument，具体取决于您的需要。

文件观察器

VSCode 有一个内置的 FileWatcher，您只需通过 vscode.workspace.createFileSystemWatcher 创建它。重点是它只监控打开的文件夹/项目中的文件。

如果您需要检测外部的变化，您应该使用fs.watchFile 或chokidar。

发布/安装

如果您认为您的扩展只适合您或您不能在市场上发布，无论出于何种原因，请不要担心，因为您可以创建自己的扩展，将它们打包并install locally .