在JetBrains WebStorm中使用node.js文件观察器

Question

我已经将Prettier用于我的项目几周了。我真的很喜欢！

我使用JetBrains WebStorm IDE，因此我按照Prettier项目网站上的这些说明，了解如何在WebStorm中设置文件监视器：https://prettier.io/docs/en/webstorm.html#using-file-watcher

然后，每次我保存一个JavaScript文件时，Prettier会自动在其上运行，一旦Prettier保存文件，WebStorm就会向我显示更改。

我希望团队中的每个人都使用Prettier，但不是每个人都使用WebStorm。有些人使用的编辑器无法轻易配置Prettier。因此，我在Prettier项目网站上按照这些说明，了解如何在我的package.json文件中将文件观察器设置为npm脚本：https://prettier.io/docs/en/watching-files.html

"scripts": {
  "prettier-watch": "onchange '**/*.js' -- prettier --write {{changed}}"
}

我使用onchange包作为我的文件观察程序，正如文档中所建议的那样，我在WebStorm中禁用了文件观察程序，因为我不需要Prettier连续运行两次。

问题是，当我在WebStorm中保存文件时，onchange包正确地运行Prettier，但是我没有在编辑器中看到更改，即使我切换出然后又回到了用我的鼠标光标的文件窗口。当我尝试进行新的更改并再次保存时，我从WebStorm收到此“文件缓存冲突”警告消息：“已在内存和磁盘上进行了更改。保留内存更改，显示差异，加载文件系统更改”

如果我选择“加载文件系统更改”，则Prettier版本保存成功加载。但每次保存时都必须看到这个对话框非常烦人。如果更改自动反映在WebStorm中，我会更喜欢它。

似乎唯一的方法是使用WebStorm的内置文件监视器，但是我没有一种简单的方法为我的同事设置Prettier而不强迫他们手动安装他们自己的独立解决方案。

所以我的问题是：如何使用通用node.js文件观察器作为npm脚本，在保存后对我的文件进行更改，并在没有此对话框的情况下自动在WebStorm中重新加载这些更改？ /强>

Answer 1

也许您可以尝试在webstorm

中的系统设置窗格中设置Use "safe write"设置

Answer 2

我面临着同样的问题，毫无疑问，对话真的很烦人，而且这里的步骤最终帮助我解决了这个问题。

• 转到Webstorm / Phpstorm设置/首选项
• 打开文件监视器的设置：/Tools/File Watchers/
• 双击文件观察者，在这种情况下为Prettier
• 这将打开一个用于编辑观察者的模态窗口。取消选中Auto-save edited files to trigger the watcher

根据我的理解，取消选中此选项将仅在手动保存文件时运行文件观察器，并且将帮助您在每次更改时摆脱该模态的过多外观。在这种情况下，请不要忘记手动保存文件以继续享受Prettier。