FS Watcher
Watch a dynamic set of files via the VSCode Watcher API.
Used functions
- useFsWatcher - Reactive API for workspace.createFileSystemWatcher.
- useCommands - Register multiple commands. See commands.registerCommand.
ts
import { defineExtension, reactive, useCommands, useFsWatcher } from 'reactive-vscode'
import { window } from 'vscode'
export = defineExtension(() => {
const globs = reactive(new Set(['src/**/*', 'docs/**/*']))
const watcher = useFsWatcher(globs)
watcher.onDidChange(uri => window.showInformationMessage(`File changed: ${uri}`))
useCommands({
'demo.add-watch-dir': async () => {
const value = await window.showInputBox({ prompt: 'Enter a glob' })
if (value)
globs.add(value)
},
'demo.remove-watch-dir': async () => {
const value = await window.showInputBox({ prompt: 'Enter a glob' })
if (value)
globs.delete(value)
},
})
})
ts
import type { ExtensionContext, FileSystemWatcher, Uri } from 'vscode'
import { commands, window, workspace } from 'vscode'
const watchers = new Map<string, FileSystemWatcher>()
function addPattern(pattern: string) {
if (!watchers.has(pattern)) {
const watcher = workspace.createFileSystemWatcher(pattern)
watcher.onDidChange((uri: Uri) => window.showInformationMessage(`File changed: ${uri}`))
watchers.set(pattern, watcher)
}
}
function removePattern(pattern: string) {
const watcher = watchers.get(pattern)
if (watcher) {
watcher.dispose()
watchers.delete(pattern)
}
}
export function activate(extensionContext: ExtensionContext) {
addPattern('src/**/*')
addPattern('docs/**/*')
extensionContext.subscriptions.push(
commands.registerCommand('demo.add-watch-dir', async () => {
const value = await window.showInputBox({ prompt: 'Enter a glob' })
if (value)
addPattern(value)
}),
commands.registerCommand('demo.remove-watch-dir', async () => {
const value = await window.showInputBox({ prompt: 'Enter a glob' })
if (value)
removePattern(value)
}),
)
}
export function deactivate() {
for (const watcher of watchers.values()) {
watcher.dispose()
}
}