Utilisation d'un observateur de fichiers node.js avec JetBrains WebStorm

Question

J'utilise Prettier pour mes projets depuis quelques semaines. Je l'apprécie vraiment !

J'utilise l'IDE JetBrains WebStorm, j'ai donc suivi ces instructions sur le site du projet Prettier pour savoir comment mettre en place un file watcher dans WebStorm : https://prettier.io/docs/en/webstorm.html#using-file-watcher

Ensuite, chaque fois que j'enregistre un fichier JavaScript, Prettier s'exécute automatiquement sur celui-ci et WebStorm me montre les changements dès que le fichier est enregistré par Prettier.

Je veux que tout le monde dans mon équipe utilise Prettier, mais tout le monde n'utilise pas WebStorm. Certaines personnes utilisent des éditeurs qui ne peuvent pas être facilement configurés avec Prettier. J'ai donc suivi ces instructions sur le site du projet Prettier pour savoir comment configurer un observateur de fichiers en tant que npm script dans mon projet Prettier. package.json fichier : https://prettier.io/docs/en/watching-files.html

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

J'ai utilisé le onchange en tant qu'observateur de fichiers, comme suggéré dans la documentation, et j'ai désactivé l'observateur de fichiers dans WebStorm puisque je n'ai pas besoin que Prettier soit exécuté deux fois de suite.

Le problème est que, lorsque j'enregistre un fichier dans WebStorm, l'icône onchange exécute Prettier correctement, mais je ne vois pas les changements dans l'éditeur, même lorsque je quitte la fenêtre du fichier et que j'y reviens avec le curseur de la souris. Lorsque j'essaie de faire une nouvelle modification, et de sauvegarder à nouveau, j'obtiens ce message d'avertissement "File Cache Conflict" de WebStorm : "Des modifications ont été apportées en mémoire et sur le disque. Conserver les changements en mémoire, Montrer la différence, Charger les changements du système de fichiers"

Si je choisis "Load File System Changes", la version que Prettier a sauvegardée se charge avec succès. Mais devoir voir cette boîte de dialogue à chaque fois que j'enregistre est assez ennuyeux. Je préférerais que les changements soient reflétés automatiquement dans WebStorm.

Il semble que le seul moyen soit d'utiliser l'observateur de fichiers intégré à WebStorm, mais alors je n'ai pas de moyen facile de mettre en place Prettier pour mes collègues sans les forcer à installer manuellement leurs propres solutions indépendantes.

Ma question est donc la suivante : Comment puis-je utiliser un observateur de fichiers node.js générique comme un npm script qui apporte des modifications à mes fichiers après les avoir enregistrés, et faire en sorte que ces modifications soient automatiquement rechargées dans WebStorm sans cette boîte de dialogue ?

Answer 1

Peut-être que vous pourriez essayer de jouer avec Use "safe write" sur le panneau des paramètres du système dans webstorm

Answer 2

J'étais confronté au même problème et sans aucun doute que le dialogue est vraiment ennuyeux et voici les étapes qui m'ont finalement aidé à résoudre le problème.

• Allez dans Webstorm/Phpstorm Settings/Preferences.
• Ouvrez les paramètres des surveillants de fichiers : /Tools/File Watchers/
• Double-cliquez sur votre observateur de fichiers, à savoir Prettier dans ce cas
• Cela ouvrira une fenêtre modale pour éditer l'observateur. Décochez Auto-save edited files to trigger the watcher

D'après ce que j'ai compris, le fait de décocher cette option n'exécutera File Watcher que lors de l'enregistrement manuel du fichier et vous aidera à vous débarrasser de l'apparition trop fréquente de cette modale à chaque modification. N'oubliez pas d'enregistrer manuellement le fichier dans ce cas pour continuer à profiter de Prettier.