3

I am trying to move away from WebStorm and trying to configure VS Code to get few functionalities of WebStorm. I am trying to implement File Watcher functionality in VS Code. I used to have File Watchers for Jade and Stylus in WebStorm. I already have gulp tasks for them and have added them in tasks.json as well. I have even provided keybindings for them too. But I have to run them manually. What I want is, whenever a file is saved, it checks whether it is a Jade file or a Stylus file and then run the appropriate task to generate either HTML or CSS file.

Is it possible to do it in VS Code yet? If yes, then how can I do that?

0xC0DED00D
  • 19,522
  • 20
  • 117
  • 184

1 Answers1

6

You must create an extension to accomplish your scenario. You said you already have gulp and task.json with your automation, so I think it would be relatively easy to translate that to an extension.

You should take care with this points when creating your extension

package.json

You extension should work for Jade or Stylus, so the package.json file should have:

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

OnSave Event

There are two events that you could use to detect file saving: onDidSaveTextDocument or onWillSaveTextDocument, depending on your needs.

FileWatcher

VSCode has a built in FileWatcher, you just have to create it via vscode.workspace.createFileSystemWatcher. The point is that it just monitors files within the opened folder/project.

If you need to detect changes outside, you should use fs.watchFile or chokidar.

Publishing/Installing

Don't worry if you think your extension only works for you or you can't publish on marketplace, for any reason, because you can create your own extensions, package them and install locally.

alefragnani
  • 2,478
  • 11
  • 16