title: Using a node.js file watcher with JetBrains WebStorm
body: <p>I've been using Prettier with my projects for a few weeks. I really like it!</p>
  
  <p>I use the JetBrains WebStorm IDE, so I followed these instructions on the Prettier project site for how to set up a file watcher in WebStorm: <a href="https://prettier.io/docs/en/webstorm.html#using-file-watcher" rel="nofollow noreferrer">https://prettier.io/docs/en/webstorm.html#using-file-watcher</a></p>
  
  <p>Then, every time I save a JavaScript file, Prettier automatically runs on it and WebStorm shows me the changes as soon as the file is saved by Prettier.</p>
  
  <p>I want everyone on my team to use Prettier, but not everyone uses WebStorm. Some people use editors that can't be easily configured with Prettier. So, I followed these instructions on the Prettier project site for how to set up a file watcher as an npm script in my <code>package.json</code> file: <a href="https://prettier.io/docs/en/watching-files.html" rel="nofollow noreferrer">https://prettier.io/docs/en/watching-files.html</a></p>
  
  <pre><code>"scripts": {
    "prettier-watch": "onchange '**/*.js' -- prettier --write {{changed}}"
  }
  </code></pre>
  
  <p>I used the <code>onchange</code> package as my file watcher, as suggested in the docs, and I disabled the file watcher in WebStorm since I don't need Prettier to run twice in a row.</p>
  
  <p>The problem is that, when I save a file in WebStorm, the <code>onchange</code> package runs Prettier correctly, but I don't see the changes in the editor, even when I switch out of and then back into the file window with my mouse cursor. When I try to make a new change, and save again, I get this "File Cache Conflict" warning message from WebStorm: "Changes have been made to  in memory and on disk. Keep Memory Changes, Show difference, Load File System Changes"</p>
  
  <p><a href="https://i.stack.imgur.com/5lSvR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5lSvR.png" alt="enter image description here"></a></p>
  
  <p>If I choose "Load File System Changes", the version Prettier save successfully loads. But having to see this dialog box every time I save is quite annoying. I would prefer it if the changes were reflected in WebStorm automatically.</p>
  
  <p>It seems like the only way is to use WebStorm's built-in file watcher instead, but then I don't have an easy way to set up Prettier for my coworkers without forcing them to manually install their own independent solutions.</p>
  
  <p>So my question is this: <strong>How can I use a generic node.js file watcher as an npm script that makes changes to my files after saving, and have those changes automatically reloaded in WebStorm without this dialog box?</strong></p>