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

Posted 2023-02-22

【中文标题】在 JetBrains WebStorm 中使用 node.js 文件观察器

【英文标题】：Using a node.js file watcher with JetBrains WebStorm

【发布时间】：2018-07-05 09:40:02

【问题描述】：

几周以来，我一直在我的项目中使用 Prettier。我真的很喜欢！

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

然后，每次我保存 javascript 文件时，Prettier 都会自动在其上运行，WebStorm 会在 Prettier 保存文件后立即向我显示更改。

我希望团队中的每个人都使用 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 中自动重新加载这些更改？

【问题讨论】：

没办法；除非您在首选项中将外部工具设置为文件观察器，否则对文件所做的每个外部更改都会导致此问题。该对话框无法关闭。相关票证：youtrack.jetbrains.com/issue/IDEA-42003

好的。似乎我最好的选择可能是将文件观察器设置为任何想要使用它的开发人员的可选脚本，因为他们的编辑器没有内置的。我按照说明设置了一个预提交挂钩，即使没有其他开发人员使用文件观察器，它仍然会强制执行 Prettier 规则。 (prettier.io/docs/en/precommit.html)

【参考方案1】：

我遇到了同样的问题，毫无疑问，对话真的很烦人，以下是最终帮助我解决问题的步骤。

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

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

【参考方案2】：

也许您可以尝试在 webstorm 的系统设置窗格中调整 Use "safe write" 设置

【讨论】：

好建议！我试过这个，但不幸的是它似乎没有改变任何东西。 :\

一个非常令人沮丧的情况

通常如果我在其他编辑器中编辑打开的文件（例如 vs 代码或 vim），webstorm 会在文件保存后立即加载更改

哦，这很有趣！您在哪个操作系统上使用 Webstorm？我在 Mac 版上。

在尝试其他编辑器时，我确实注意到了 linux 中的这种行为。我想 webstrom 应该相信该文件已保存以使其正常工作。因为屏幕截图上的警报窗口，在我的情况下，仅在以下情况发生时才会出现 1）我对文件进行了未保存的更改 2）外部程序（例如 npm）同时进行了更改（webstrom 不加载它们in) 3) 我点击保存并出现差异警报