在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。