在 VSCode 中创建文件观察器

Question

我正在尝试离开 WebStorm 并尝试配置 VS Code 以获得 WebStorm 的一些功能。我正在尝试在 VS Code 中实现 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 创建它。关键是它只监控打开的 folder/project 中的 个文件。

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

Publishing/Installing

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

在 VSCode 中创建文件观察器

Creating File Watchers in VSCode

gulp

file-watcher

visual-studio-code

vscode-tasks

package.json

OnSave 事件

文件观察器

Publishing/Installing