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