Lint templates

[jeriox]

closes #586 closes #580

[jeriox]

@SilvanVerhoeven I removed prettier, as it kept messing with the indention that djhtml did and created an endless loop of reformatting. Could you please have a look if you can restrict prettier to only handle pure js files?

[SilvanVerhoeven]

I removed prettier, as it kept messing with the indention that djhtml did and created an endless loop of reformatting. Could you please have a look if you can restrict prettier to only handle pure js files?

Seems like we try to lint the same file types here. I think we need to make a decision which formatter should do what. At least for JS I have a slight preference for prettier, as that has proper IDE support, thus allows format on save.

Maybe DjLint could be the perfect fit? It seems to have support for django plus IDE extensions

@jeriox

[SilvanVerhoeven]

@jeriox This also closes #580, correct?

[dropforge]

Just a pointer that pre-commit's types_or includes multiple extensions for each type, see their identify library.

[jeriox]

@jeriox This also closes #580, correct?

oh yeah, those are duplicates. I thought we didn't have an issue for it yet and the search also came up empty when I searched for "template" and "linter" ^^

[jeriox]

Seems like we try to lint the same file types here. I think we need to make a decision which formatter should do what. At least for JS I have a slight preference for prettier, as that has proper IDE support, thus allows format on save.

In my understanding from monday we agreed that prettier should only lint pure .js files and djhtml should lint the templates. I strongly favor djhtml for linting the templates as it properly understands django syntax and lints inline js and css. Djhtml does not lint .js files.

Maybe DjLint could be the perfect fit? It seems to have support for django plus IDE extensions

I have no experience with DjLint and am used to djhtml, but that shouldn't be the problem here. But I'm not sure whether this solves the problem at hand, which is prettier messing with the templates, as DjLint also only lints templates according to their docs.
On the IDE integration part: I personally hate such "format on save" tools as I don't want them to mess with my code all the time while developing. Formatting before commiting is the better approach IMO, but that is probably just my personal opinion. (and a also don't want to install dozens of extensions in my IDE if they are available in the first place)
Running a specified command (such as djhtml) on save is not possible with your IDE, just extensions?
just to be clear, I don't want to oppose a tool that supports it, it just doesn't convince me to switch to another tool just for that reason

[SilvanVerhoeven]

In my understanding from monday we agreed that prettier should only lint pure .js files and djhtml should lint the templates.

I understood the same :) We never talked about .css/.scss files, tho. I feel like Prettier is the more common choice here, do you agree?

Djhtml does not lint .js files.

I just tested it – due to id: djjs, it does. Same for id: djcss. Removing both does not affect formatting of template files.

But I'm not sure whether this solves the problem at hand, which is prettier messing with the templates.

I cannot recreate this – with the following config, .html do not seem to be linted by prettier (as I would expect, since .html files are not listed in tyoes_or).

- repo: https://github.com/rtts/djhtml
    rev: "3.0.6"
    hooks:
      - id: djhtml
  - repo: local
    hooks:
      - id: prettier-eslint
        name: Prettier and ESLint
        entry: prettier-eslint --write --list-different
        language: node
        types_or: [javascript, css, markdown, yaml]
        additional_dependencies: ["[email protected]"]

I personally hate such "format on save" tools as I don't want them to mess with my code all the time while developing.

It makes writing JS/CSS (and even templates) much easier for me, as I don't need to care about indentation/can let the IDE clean up everything after I wrote a bit – and then directly proceed coding from a "clean" state.

Don't want to install dozens of extensions in my IDE if they are available in the first place.

I would never argue against the pre-commit hook, it is very good :) But I'd very much appreciate the option to have "format on save".

Running a specified command (such as djhtml) on save is not possible with your IDE, just extensions?

Only after installing an extension for that and configuring it to run a command – and it seems running that command in a venv is a further headache.

DjLint only lints templates according to their docs.

Mhh, to me it seems like they also have a formatter?
I think I haven't entirely understood the disadvantages of DjLint, except for missing experience. Could you reiterate this again, please? :)

[SilvanVerhoeven]

@jeriox

So my proposal is this:

• use djLint for template files
• use prettier for js, (s)css, md and yaml
• see configuration and changes on our current code base

Advantages:

• djLint formats code, not only indents (djHTML only indents) → ensures more consistent code style; especially helpful in this project with so many contributors with different backgrounds
• djLint seems to detect more errors – I found several issues in out code base like missing closing tags after using it
• djLint has VSCode plugin support – can be easily used on save and shows warnings in the IDE, with the same configuration as used in the pre-commit hook

What do you think of this setup?

[jeriox]

apart from the loops I'm fine with this setup (can't approve as this is my PR)