Prettier with spacemacs and js files.

[cinjon]

Hi, I am trying to use prettier with spacemacs and .js files that have jsx blocks in them. Notably, if I change the extension to .jsx, then it is applying Prettier (and is notifying me as such with the "Prettier" tag on the bottom of the screen). However, it is not applying to jsx blocks in .js files. How do I fix this? In my user-config, I have this:

(add-hook 'js2-mode-hook 'prettier-js-mode)
(add-hook 'js2-jsx-mode-hook 'prettier-js-mode)
(add-hook 'web-mode-hook 'prettier-js-mode)
(add-hook 'react-mode-hook 'prettier-js-mode)
(push '("\\.js\\'" . react-mode) auto-mode-alist)

[jacksonrayhamilton]

Hi Cinjon, sorry no one was able to get back to you in the long time since you posted this. Did you ever resolve your issue?

I tried creating a ".js" file with JSX syntax and Prettier formatted my whole file, including the JSX blocks.

Based on the config you provided, it looks like prettier-js-mode should have activated inside react-mode whenever you visited a ".js" file. I think your config was correct.

My theory is that, at the time you posted this, the version of Prettier that was available may have used a "JavaScript-only" parser for ".js" files, and only performed JSX parsing when a file's extension was explicitly ".jsx". Since I can't reproduce the issue now, I think Prettier may have since updated its parser inference logic to support this case. The Prettier test suite would indicate that: https://github.com/prettier/prettier/blob/3.6.2/tests/config/utils/check-parsers.js#L84-L107