Add a formatter for CSS and JS

[Tom Carrick]

From ​https://forum.djangoproject.com/t/adding-a-formatter-for-css-js/25754:

The idea is to add formatting for CSS and JS.

For motivation, I find myself fairly often in the admin CSS (especially lately) and it’s reasonably laid out for the most part, but there are things that are a little off. Sometimes the indentation is different from the rest of the file, for example. The JS is in a bit worse shape I think, some of the files have whitespace issues. These could be fixed but it would be better to enforce them in a way that’s easier to review, so I think a formatter makes sense here. What’s annoying (for me) is that when editing files, sometimes my editor “fixes” the issues for me, then I have to revert them and save without formatting. If I don’t spot my editor’s work, it’s more annoying to fix. Of course I could turn this stuff off somewhere, but if it’s annoying for me I’m sure it’ll be annoying for others as well.

But barring differing opinions there, the process would be something like:

Make a PR with three commits. The first sets up the machinery, installs the formatter, adds to pre-commit, etc. The second does the work and the third adds the second commit to .git-blame-ignore-revs. As far as I know, the same as when black was set up.

[Natalia Bidart]

The forum topic has had very positive reactions, accepting.

[Mariusz Felisiak]

We're already using ESLint for JS files.

[Tom Carrick]

We can have some discussion about whether ESLint's formatting rules are enough, but I don't think they are (at least the current ones). For example, they don't seem to catch obvious whitespace issues (whitespace only lines in SelectFilter2.js, whitespace at end of line in RelatedObjectLookups.js I found in the first two files I opened, so there are probably others).

It was suggested in the forum post to use ESLint only for linting, and use prettier for formatting, and I think this is a good idea.

[Thibaud Colas]

ESLint’s formatting rules definitely aren’t enough. It’s more "auto-fix white-space in a few very specific scenarios" than "format everything". ESLint themselves have also ​deprecated their formatting rules and recommend using a dedicated formatter.

[Tom Carrick]

I made some changes to the description and summary to make this tool-agnostic as there are discussions around using other tools, particularly Biome, which I would like to draft a PR for soon.

[Tom Carrick]

I had another look into this today. Before trying Biome I'd like to wait for 2.0, it will make some things easier and it would be nice to not add a formatter and then not long after need to migrate to a new version.

[JaeHyuckSa]

Replying to Tom Carrick:

I had another look into this today. Before trying Biome I'd like to wait for 2.0, it will make some things easier and it would be nice to not add a formatter and then not long after need to migrate to a new version.

Just a quick reminder, Tom — Biome is up to [2.2.2](​https://github.com/biomejs/biome) now; might be a good time to give it a try.

[Jacob Walls <jacobtylerwalls@…>]

In 4a6f797e:

Refs #35007 -- Added biome to lint and format CSS files.

[Jacob Walls <jacobtylerwalls@…>]

In 1b0d46f:

Refs #35007 -- Ignored CSS formatting changes in git blame.

[Jacob Walls]

Dropping eslint allows dropping the messy workaround in d29852ae725f673843c46085bb51cbc740d374d7 to allow pre-commit hooks to work for all without having to install node modules.

[Jacob Walls <jacobtylerwalls@…>]

In 290fefe6:

Fixed #35007 -- Replaced ESLint with Biome for JavaScript linting and formatting.

[Jacob Walls <jacobtylerwalls@…>]

In 47789e3a:

Refs #35007 -- Removed eslint disable in a test.

[Jacob Walls <jacobtylerwalls@…>]

In d3ccbde0:

Refs #35007 -- Ignored JS formatting changes in git blame.

[Jacob Walls <jacobtylerwalls@…>]

In 017d7f6:

Refs #35007 -- Pinned exact biome version.

Avoid drift against the following in biome.json:
"$schema": "​https://biomejs.dev/schemas/2.4.12/schema.json"