Is there a way to configure the code formatter somewhere?

[HeikoK]

It doesn’t look like Prettier, so the question: where can I configure the code formatter in the Editor (Monaco?)

[brad]

What exactly are you trying to format? There is a couple dozen settings in the Wappler settings for the code editor.

[HeikoK]

Those are editor settings.

I am referring to code formatter settings, those rules who are applied to your source code when you save, like line breaks, line width, indention depth, double/single quotes, attribute and function param formatting and such.

ESlint and Prettier are the most common examples of tools to keep your code structure correct and consistent across teams and projects.

Example:
I prefer the code to be formatted like this

…rather than the Monaco/Wappler default formatting:

[JonL]

I wouldn’t mind this too.

[mebeingken]

Yes please!

[HeikoK]

As I am using Prepros (https://prepros.io) for SCSS and TypeScript anyways, I added Prettier as a custom tool to my project and Prepros runs it after each HTML file change:

npx prettier --write --html-whitespace-sensitivity strict --print-width 95 --ignore-unknown {{input}} --{{output}}

If you don’t use Prepros or any other processor, you can use the package onchange (a file watcher) to run Prettier automatically from the command line:

npm install onchange

and then

npx onchange "**/*" -- npx prettier --write --html-whitespace-sensitivity strict --print-width 95 --ignore-unknown {{changed}}

…will format your code every time to save. Not perfect, but does the job for me.

Don’t forget to disable “auto format on save” in Wappler.