4

几周以来,我一直在我的项目中使用 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 中自动重新加载这些更改?

4

2 回答 2

1

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

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

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

于 2018-03-08T14:39:26.250 回答
0

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

于 2018-01-26T02:03:51.003 回答