How can I make NextJS save my changes in VSCode?

Question

I have tried changing all .js extensions to .jsx, enabled Prettier to format on save, set it as a default formatter, reloaded, restarted the editor, but saving is still not working. I would appreciate any ideas how to make this work.

Answer 1

Hit Control + Shift + P (On Mac you would want to hit the Command key instead of Control) and search for >Format Document With.... Check if that work.

If it works, then maybe your setting is overridden. Open your settings.json file (Use Control + ,, then on the top right corner you would see the open settings.json). Check the javascriptreact section.

Here is the example: this setting turns on formatOnSave for all the document type, but with .jsx extension, the formatOnSave is disabled, instead the files are formatted using eslint

{
  // Other settings, don't mind it
  // ...

  "editor.formatOnSave": true,
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    "editor.formatOnSave": false
  },

  // Other settings, don't mind it
  // ...
}

You may want to update the settings based on your need.