Automatic code formatting for notebooks

[mofojed]

As a user, I want automatic code formatting in my notebooks so that my code looks pretty.

I would like to have formatting applied by something like black: https://github.com/psf/black.

Ruff wasm Python formatter and linter:

• if we are building it, need an action to do so and keep it updated, else adopt an active npm version
  (https://github.com/dprint/dprint-plugin-ruff has automation to self update and publish new versions, so maybe use that one?)
• Should be lazy loaded
• New settings menu section: "Editor" with options: for formatting on save and lint rules (via a code editor with ruff linting rules they have on the playground?)
• Format button in notebook overflow, and context menu
• Settings must be configurable in enterprise by a prop so that orgs can enforce which linting rules apply globally

[devinrsmith]

I think this is a great idea. +1 on black.

[dsmmcken]

https://github.com/charliermarsh/ruff is just a linter, but I believe they are working on adding an autoformatter.

The list of projects using it is very impressive, so I can imagine it might replace black in the near future.

[devinrsmith]

Big fan of anything written in rust! Looks like a neat project, I'll definitely keep an eye on it.

astral-sh/ruff#4041

I believe we have plans to add a Ruff formatter, but it's a ways off. For now, black is still required.

That's right. For now, we don't autofix line wrapping, and we do recommend using Ruff alongside Black.

So, it looks like the devs of ruff like black too; my guess is if they eventually get a Ruff formatter, it will have a black-compatible mode. I think black is still our best bet today.

[dsmmcken]

Black is probably the best choice today, but yeah that could change in the future astral-sh/ruff#1904

We use prettier for our stuff, so them combining black plus some basic config options like prettier allows would be great.

[devinrsmith]

https://github.com/jpadilla/black-playground
https://black.vercel.app

could be useful starting point?

[devinrsmith]

It could be useful to use bidirection plugins to support this use case.

[mattrunyon]

Ruff has a wasm package (have to build it from src) that can be used to format and lint completely client-side

[mattrunyon]

Not something I will currently continue working on (I have other priorities), but I made a quick POC using ruff as wasm. https://github.com/mattrunyon/web-client-ui/tree/ruff-wasm

I built the wasm from source and just included it as part of the branch. Looked at https://github.com/astral-sh/ruff/blob/main/playground/src/Editor/SourceEditor.tsx for how to call the linter/formatter and map the linter results to actions and markers.

I roughly implemented

• Format on save (only on ctrl+s shortcut)
• Linter markers (no debouncing or deferring)
• Code actions for quick fixing

Would still need to cleanup the code and add

• Configuring linter settings and format on save via user settings menu
• Action to add ignore comment for linter rules (noqa comments. See this part of ruff-lsp for some more info)
• Adding a range formatting provider. Probably just format all the lines before the start of the range, then all lines + range and insert the diff

Some issues on my branch

• Duplicate code actions. Providers might be registered for every open editor. For autocomplete this doesn't cause an issue as when 1 provider resolves, the others are ignored I think. But for code actions it seems to call all resulting in duplicated code actions.
• Building prod doesn't copy the wasm file into assets, so it doesn't load properly. The wasm file should probably be part of an assets folder included w/ the console package.
• Code action lightbulb seems to be off. Not sure if we're doing some CSS to move another element that also moves that button

[devinrsmith]

Potentially related would be catching syntax errors on the web UI; I don't know if the code formatting tools considered would expose the appropriate syntax error hints, but that would also be a great addition.