search

it-at-m / refarch-templates

All templates for the Reference Architecture of it@M
MIT License
8 stars 4 forks source link

[Feature] Add linting of CSS code #470

Open devtobi opened 1 month ago

devtobi commented 1 month ago

Relevant template

refarch-frontend, refarch-webcomponent

Problem description (optional)

Currently we only have ESLint for JavaScript code and Prettier for formatting in place. Since custom Vue SFCs can also include custom CSS code we should make sure this code gets linted as well. We should check if some kind of CSS linting is maybe part of vite itself and if not add an additional tool.

CSS Linting will allow us to write cleaner and more maintable CSS code and improve Responsive Design by disallowing certain antipatterns for modern CSS.

Desired solution

There are different CSS linters available. A proper solution has to be selected and integrated into the templates. Then the linting script should be extended to also run the CSS lint check.

Considered alternatives (optional)

No response

Additional context (optional)

No response

No duplicate

Code of Conduct

devtobi commented 1 month ago

It looks like the most suitable (and active) solution to lint CSS code is https://stylelint.io, its available as npm dependency and offers a plugin for VSCode and JetBrains-based IDEs.