File Watchers in WebStorm/PhpStorm 6 (a.k.a. “Background Tasks”)
*Note – users of other JetBrains IDEs (RubyMine, PyCharm, IntelliJ IDEA, …) will need to download and install the File Watchers plugin to use this functionality (available for free). The plugin is already bundled with WebStorm and PhpStorm.
Supporting all of these features requires leveraging myriad tools. Let’s just list a few with the most votes (in no particular order):
- YUI Compressor
- Closure Compiler
- TypeScript compiler
- CoffeeScript compiler (and redux for sourcemaps)
- Less compiler
- Sass compiler
That list is a very small sample of the tools available in the wide world of Web development (and the list is going to just keep getting bigger every day).
Our solution to support this large set of tools is simple: File Watchers.
When WebStorm detects that you’re using a type of File which it can “watch” for you, it will prompt you to set up a File Watcher (or you can customize your own).
Below is an example of the TypeScript File Watcher:
- Watch for changes on all TypeScript files (within the defined scope)
- Compile them using ‘tsc’ (the TypeScript compiler) when they change
- Uses arguments for any additional flags required by the tool (like –sourcemap for tsc)
By default, the File Watchers will trigger while you type. If you’d rather wait until you manually save your files with File->Save All (or when the IDE triggers a save when you switch to a new file), then uncheck the “Immediate File Synchronization” checkbox. This is especially helpful if you’ve set up the IDE to automatically upload files.
WebStorm 6 will include templates for the following compilers:
- YUI Compressor CSS
- YUI Compressor JS
- Closure Compiler
If you get lost or want to get more info on the options, just check out the help: http://www.jetbrains.com/webstorm/webhelp/new-watcher-dialog.html
Or click here for an explanation of each of the settings:
Even though we include the template, you will still need to install the external compilers/tools that the templates will use. For example, TypeScript requires the NodeJS to be installed. Then, to install TypeScript, you need to execute “npm install -g typescript” from the terminal.
We encourage you to experiment with the settings with each of the templates. Also, feel free to integrate your own custom tools using the File Watcher panel to see what you can achieve.
Develop with pleasure!
-JetBrains WebStorm Team
Working with Windows Azure SQL Database in PhpStorm
PhpStorm provides us the possibility to connect to Windows Azure SQL Database right from within the IDE. In this post, we’ll explore several options that are available for working with Windows Azure SQL Database (or database systems like SQL Server, MySQL, PostgreSQL or Oracle, for that matter): …
Change signature refactoring in PhpStorm
A very powerful refactoring is the Change signature refactoring in PhpStorm. It enables us to modify a function signature in many ways: we can change the function name, change its visibility, add, remove and reorder parameters as well as rename parameters. (more…)…
Folding for imports in PhpStorm 6.0
In PhpStorm 6, we've introduced code folding for imports. Any list of imports will now be folded into a single line. This greatly reduced clutter in your editor when having a lot of imports! (more…)…
Drag & Drop Project Files to Remote Hosts in PhpStorm
The Remote Host pane allows us to work directly on a remote server through FTP, FTPS, SFTP or a local/network folder. A lot of people asked us to add drag & drop to the Remote Host pane in PhpStorm. Good news: PhpStorm 6 comes with drag & drop as well as copy & paste support from the pro…