Improve DX by enable automatic formatting on save (i.e., auto-fix formatting issues via ESLint/Prettier)

[doppelmutzi]

Idea / What is my suggestion

With a few changes, a Remix project would be out of the box capable of automatically formatting code files on a save action. This would improve the DX for those VS Code and IntelliJ developers (most likely for other editors/IDEs too) that like this workflow.

In principle, my request is to add two dependencies and make a minor change in .eslintrc.js to make this happen. I could create a PR, if this is considered useful.

What needs to be done

In my current Remix project (Indie stack) I enabled the following ESLint/Prettier workflow for VSCode with the following steps:

• deactivate formatting rules of ESLint and just use Prettier for formatting by installing the packages eslint-config-prettier and eslint-plugin-prettiert in the root package.json*
• in the .eslintrc.js file in the root folder the prettier entry in extends needs to be replaced. The final "extends" array looks like this
  extends: [
  "@remix-run/eslint-config",
  "@remix-run/eslint-config/node",
  "@remix-run/eslint-config/jest-testing-library",
  "plugin:prettier/recommended",
  ]
• For IntelliJ you just have to enable auto-fix in the ESLint settings
• For VS Code you need to add the following settings to the project (in .vscode/settings.json) of the root folder)
  {
  "editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
  },
  "editor.formatOnSave": true,
  "[javascript]": {
  "editor.formatOnSave": false
  },
  "[javascriptreact]": {
  "editor.formatOnSave": false
  },
  "[typescript]": {
  "editor.formatOnSave": false
  }
  }
  I'm not sure if this .vscode/settings.json should be committed but a short section in the docu on ESLint/ Prettier to explain how to enable auto-fix / auto-formatting on save for IntelliJ or VS Code would be most likely the best way.

• I'm not totally sure how the workspace eslint-config is connected to the root package.json. Perhaps these two packages should go into this workspace to initialize the project correctly by npx create-remix.

[doppelmutzi]

In my Github project, the example ESLint/Prettier configuration along with the provided links explain how this works

[kiliman]

That seems pretty invasive. Although I typically use that tooling, I wouldn't want Remix to dictate what should be used. With the new Stacks feature, you can create your own templates with all your tooling configured exactly as you want. Then all your new projects can use that.

[doppelmutzi]

Ok, I didn't get the impression that it was invasive until now. Because as long as you don't activate the save action, nothing happens. In addition, it does not provide any changes to the rules provided by the initial Remix setup. I just felt like it would be nice if everything was ready to go out of the box.
But the argument is fine with me if most of the people have the impression this would be invasive. It's also not so much work to add this behaviour yourself.
Although I can't exactly imagine your suggestion, it also sounds like a good solution for the future.

[doppelmutzi]

Maybe I was not clear enough. I would only propose to add the two dependencies and the change to .eslintrc.js. But the VS Code .vscode/settings.json shouldn't be part of the codebase or commented out. Just a small section in the documentation to know how to activate it in VS Code or other IDEs, such as IntelliJ.

[kiliman]

I see. I thought you were suggesting adding the configuration to auto-enable these. I use eslint, but I don't want it to auto-fix, so that would have been annoying if the templates enabled that.

I agree. I prefer prettier to be in charge of formatting, so I typically add the package to disable eslint formatting rules.

I have a script that I use to initialize my projects with my preferred settings.

[doppelmutzi]

Yes, in my initial post I was also suggesting to add the .vscode/settings.xml to the project but this would be indeed invasive. So I would agree to just add documentation for this.

@kiliman
I'm pretty new to Github discussions and collaboration for open-source projects. How do I find out if my suggestion would be accepted? Just create a PR and see what the Remix core team says?

[kiliman]

You can certainly create a PR. I would probably try to get some traction on Discord with your suggestion. Either way will be fine. I'm not sure how frequently the team checks new PRs though.

Good luck!

[andrecasal]

By the way, Prettier docs recommends against running Prettier as if it was a linter rule.

If you do create a PR for this I recommend to turn off all rules that are unnecessary or might conflict with Prettier:

npm i -D eslint-config-prettier

But not installing eslint-plugin-prettier which makes ESLint use Prettier as if it was a linter, which gives you all these annoying red squiggly lines.

Then, add "prettier" to the "extends" array in your .eslintrc.* file to tell ESLint to use the eslint-config-prettier plugin you just installed. Make sure to put it last, so it gets the chance to override other configs.

{
  "extends": [
    "some-other-config-you-use",
    "prettier"
  ]
}

That will put ESLint in charge of linting your code but won't mess with formatting and you don't end up with a lot of red squiggly lines in your editor when something's badly formatted, which gets annoying.

Then we can install Prettier:

npm i -D prettier

And tell VS Code to use it as the default formatter with a /.vscode/settings.json file:

{
	"editor.defaultFormatter": "esbenp.prettier-vscode"
}

Prettier will now automatically format your code without giving you errors 😊

For those wanting to configure Prettier, we can add a .prettierrc to the root folder and leave it empty:

{
}

and for those wanting to run Prettier on the whole code base with npx prettier --write ., a .prettierignore to avoid the artifacts folders:

# Ignore artifacts
/api

# Ignore static assets (images, fonts, etc) folder
/public

We can then create a /.vscode/extensions.json file to have the ESLint and Prettier extensions be recommended for this repo:

{
	"recommendations": [
		"dbaeumer.vscode-eslint",
		"esbenp.prettier-vscode",
	],
}

This should prompt you to install both extensions if you haven't already.

Now the project is configured with both ESLint and Prettier.

[doppelmutzi]

Yes, what you suggest was also part of my recommended solution. The github demo project showed it. #2633 (comment)
However, it might not be obvious because I outsourced the ESLint and prettier configs in separate reusable npm modules.

To have a focused explanation using ESLint with Prettier with deactivated beautifying rules of ESLint, you can read in one of my recent articles. It's about Vue.js and TS (October 2022) https://doppelmutzi.github.io/2022-10-02-vue-eslint-prettier-ts-vscode/

Here is my article about React. It's a little bit older (2020) https://doppelmutzi.github.io/react-eslint-prettier-vscode-2020/