Add "prettier" code reformatting for HTML and JS

[jzohrab]

Currently the code uses "black" for python reformatting. Sometimes it's a hassle, but overall I think it's good as it takes the guesswork out of code formatting, which can only be good for an open-source project.

This issue should just be about adding prettify (or a similar tool), and checking a few things:

• how it will reformat the html, and how it will mess with flask tags like {% if blah %}...{% endif %} and {{ some_variable }}
• how it will reformat js
• how to set the rules so it only reformats html in lute/templates, and selected files in lute/static/js. Lute/static/js also includes some vendored files (committed from downloads), we shouldn't restyle those. -- and maybe those vendored files should be put in js/vendor, comments welcome.
• how to add a code formatting check to the tasks. Currently in /tasks.py there's a task for black of python code, and it's checked in a few tasks there as well
• how to add the same check to ci. Currently on push and PR there are tests for black, we should enforce this there as well.

I use emacs, others use different editors, so suggestions for the wiki docs (in this repo's wiki) would be good

After this is done, I think it's best to run all the code through the prettify method, just to get it done in one big bang.

[fanyingfx]

I found the Djlint can lint/check/reformat the jinja2 template file

• djlint --profile jinja lute/templates -e html --check for --reformat
• djlint --profile jinja lute/templates -e html --reformat for reformating

For the js file, using something like the prettier?

[jzohrab]

• djlint looks okay but I don't know if it's reliable, it seems to be in a beta/still-in-dev state. EDIT - some people seem to use it and like it. pip install and ready to go.
• Some use prettier and are happy with it.

I don't know what the standard is, or if there is one. I don't have a particular preference, just need something that works and takes out the guesswork.

[robby1066]

The question I have about prettier (still wrapping my head around it) is will it require node/npm to be properly setup on the developer's machine? Seems reasonable that a lot of people already have that, but I wonder about the overhead that potentially introduces?

Djlint seems like it would be relatively straightforward to add as a pre-commit check.

Currently everything that happens server side is pure python, right?

[jzohrab]

Djlint seems like it would be relatively straightforward to add as a pre-commit check.

Right, npm etc that might be overhead for some. djlint might be the fastest way to get something together, and if it doesn't work out in the long run, at least it's a step in the right direction.

Currently everything that happens server side is pure python, right?

Yes, so any devs will have python installed to work on it. This check would be happening during dev/commit and in CI. And if it's in the requirements.txt, then it will be loaded and ready to go.

[oashrafov]

I use Prettier with VSCode, no need for node/npm. It also supports most editors Can also be added as pre-commit hook