francoismassart/eslint-plugin-tailwindcss

Formatting HTML files?

ledermann opened this issue · 10 comments

ledermann commented

I'm using this plugin for my Vue.js projects, it works fine for SFC files. Thanks for your great work, @francoismassart!

But: In my Ruby on Rails projects (containing lots of .html.erb or .html.slim files) the plugin does not work - maybe because these files don't contain JavaScript code and therefore are not processed by ESLint.
I tried adding eslint-plugin-html, but this didn't help.

Are there any plans for eslint-plugin-tailwindcss to support HTML files?

BTW: Headwind (VSCode extension) does process HTML files (and .html.erb, .html.slim, too) and therefore sorts Tailwind classes successfully.

francoismassart commented

Hi @ledermann
I did take a look on this feature and I think it'll be possible to do it via another parser.

I would go for @angular-eslint/template-parser as parser. It is one of the recommended choice for HTML on https://astexplorer.net/

  • the project is active
  • popular (based on weekly downloads)
  • light in KB

BTW What version of eslint-plugin-tailwindcss are you using ?

Also, could you provide some examples of .html.erb & .html.slim files ?

francoismassart commented

If slim is like http://slim-lang.com/ then it won't be shipped soon

but for .html.erb
I tested the folllowing on AST Explorer and it looks ok

<ul>
   <% @products.each do |p| %>
      <li><%=  @p.name %></li>
   <% end %>
</ul>
ledermann commented

Great - would be happy to see support for ERB.

Slim would be nice too, but I see that this is an exotic language not supported by any parser in astexplorer.net.

BTW: Headwind can handle .slim files like the following example, but perhaps it takes a different approach that doesn't require full parsing.

ul class="px-4 mt-4"
   - @products.each do |p|
      li= p.name

I'm using latest version of eslint-plugin-tailwindcss, so currently 3.1.2.

francoismassart commented

@ledermann & @paallaire can you provide feedback on this, please 😉

ledermann commented

@francoismassart Sorry for late answer. Just made a test repo using 3.2.2-beta.0, see here:
https://github.com/ledermann/test-eslint-plugin-tailwindcss

Result: .html, .html.erb and .js are checked successfully - which is great!

.html.slim is not processed, which is sad, but it seems there is no parser for this exotic template language.

francoismassart commented

You can use v2.0.1 or v3.3.1

  • 🎉1
albertpratomo commented

Hi @francoismassart, first of all thanks for the great plugin!

In my tailwind.config.js, this is the content part:

content: [
        './index.html',
        './src/**/*.{vue,ts}',
        './src/lang/**/*.js',
],

Meaning I have src/lang/en-GB.js file which contains content like this:

home: {
    title: 'Welcome to home',
    class: 'flex flex-col md:flex-row px-6',
},

Would it be possible to lint these .js file as well? Because I also put a lot of tailwind classes there.
Thanks!

  • ❤️1
francoismassart commented

Hi @albertpratomo,
it could be parsed if you "trick" it to do it by using a function call which belongs to the callees

you could use a lib like the awesome https://www.npmjs.com/package/@netlify/classnames-template-literals which is enabled by default

import ctl from '@netlify/classnames-template-literals'
...
home: {
    title: 'Welcome to home',
    class: ctl('flex flex-col md:flex-row px-6'),
},

or you could create a dummy one like so:

...
const yolo = (classes) => classes
...
home: {
    title: 'Welcome to home',
    class: yolo('flex flex-col md:flex-row px-6'),
},

Make sure to configure eslint-plugin-tailwindcss to parse your callee... see callees here https://github.com/francoismassart/eslint-plugin-tailwindcss#optional-shared-settings

Does it help?

albertpratomo commented

Hi @francoismassart, thanks for the help!

I would like to keep the content of en-GB.js as simple as possible, because this file might be updated by our translator (non-technical).

Would it be possible to keep the file just at it is (a string), and still have it parsed?

home: {
    title: 'Welcome to home',
    class: 'flex flex-col md:flex-row px-6',
},