Conflicts with ESLint & Prettier rules

[FarhanShares]

Describe the bug After upgrading to the latest versions of ESlint & Prettier which has new rules set, specially large number of multiple class on an element now gets formatted one per line.

<div
      class="
        font-bold
        text-gray-500
        px-4
        py-3
        mx-auto
        flex
        items-center
        justify-center
        custom-class-name
      "
      />

Headwind does it's job & set the classes in one line. That makes the linter add some red lines.

To Reproduce Steps to reproduce the behavior:

1. yarn create nuxt-app example-headwind
2. Choose TailwindCSS / WindiCSS as the UI framework
3. Choose Eslint & Prettier
4. Write a long list of classes on an element
5. Use Headwind

Expected behavior Headwind needs to respect the linters.

Desktop (please complete the following information):

• OS: Arch Linux
• Browser: Chrome
• Version: Latest (at the time of writing)

Additional Info: Related dependencies: "eslint": "^7.22.0", "eslint-config-prettier": "^8.1.0", "eslint-plugin-nuxt": "^2.0.0", "eslint-plugin-prettier": "^3.3.1", "eslint-plugin-vue": "^7.7.0", "nuxt-windicss": "^0.4.4", "prettier": "^2.2.1",

[iKlsR]

Yh unfortunately I had to disable the plugin as its mutilating my class strings and making my commits very noisy when I touch older files, it's either this or it adds an extra space somewhere inside.

[rynz]

I was about to create this very issue, Headwind orders correctly but on one line breaking the multi-line consistency. It would be amazing if it respected multi-line classes, especially for readability.

[ltroya-as]

any solution to this?

[Lukas-Sachse]

Quick-Fix:

1. set "headwind.runOnSave" : false

2. trigger Headwind manually by:

Pressing CMD + Shift + T on Mac Pressing CTRL + ALT + T on Windows

3. only run Eslint & Prettier on Save

For me this is currently the best solution, until this problem is really solved

[iKlsR]

I've been using this plugin, https://github.com/Acidic9/prettier-plugin-tailwind for now

[LTroya]

@iKlsR are all the classes in one line or are they separated by their own line?

[iKlsR]

It seemed fine at first but now its back to the same, guess the root of the problem lies with eslint and I'm not sure how to disable this rule.

[LTroya]

@iKlsR I have done it by disabling prettier but it gives me some problem formatting .js files, in order to keep all my classes in one line

 plugins: ['prettier'],
  // add your custom rules here
  rules: {
    'prettier/prettier': 'off',
  },

Other files like .vue and .jsx work just fine. I know this is not the best solution but I am still figuring out how to solve the problem

[vinayakkulkarni]

Unfortunately I had to uninstall headwind cause of Prettier 2.3.0

Let's see how people respond to suggestion by @adamwathan

https://github.com/prettier/prettier/issues/10918#issuecomment-851049185

[frederikwagner]

Not exactly the best solution, but downgrading to version 2.1.1 of prettier prevented the newline class attributes for me and headwind formatting works as expected. If you can live without v2.2.x, this might be the solution for you.

Note I had to restart VSCode for this to take effect.

Here are my eslint and prettier dependencies:

"eslint": "^7.8.1", "eslint-config-prettier": "^6.11.0", "eslint-plugin-prettier": "^3.1.4", "eslint-plugin-vue": "^6.2.2", "prettier": "2.1.1",

[ortzinator]

This is fixed in Prettier 2.5 https://prettier.io/blog/2021/11/25/2.5.0.html#collapse-html-class-attributes-onto-one-line-11827httpsgithubcomprettierprettierpull11827-by-jlongsterhttpsgithubcomjlongster