1

Whenever i have many CSS classes for an element, my VS Code prints only one of them on each line, is there any way to mitigate this? By, for instance printing 3-4 classes on each line?

 <input class="
            shadow
            appearance-none
            border
            rounded
            w-full
            py-2
            px-3
            text-gray-700
            leading-tight
            focus:outline-none
            focus:shadow-outline
            form__input
"/>
Ryan Wheale
  • 26,022
  • 8
  • 76
  • 96
Bowis
  • 541
  • 8
  • 31
  • Is that how it's displayed on the screen too? – LarryBud Jun 30 '21 at 17:34
  • 2
    @LarryBud :))) ofcourse not. It's about the linter. Depends on what linter the OP uses in vscode. There are settings that you can edit for this. – Mihai T Jun 30 '21 at 17:38
  • I use ESLint, I saw that the printWidth can be altered, but i could not find a setting for showing multiple css classes on multiple lines – Bowis Jun 30 '21 at 17:45
  • 2
    Try putting `// prettier-ignore` or `// eslint-disable-next-line` above the code. May need to use `` for HTML or maybe `{/* prettier-ignore */}` for JSX depending on your situation? – Ryan Wheale Jun 30 '21 at 20:06
  • @RyanWheale That did not seem to work! The html in question is within a Vue template (in a Nuxt.JS project), so I would say that `` should work! – Bowis Jun 30 '21 at 20:38
  • 1
    https://stackoverflow.com/questions/54395111/how-disable-eslint-warning-for-a-specific-line-in-a-template-in-a-vue-file-in-v – Ryan Wheale Jun 30 '21 at 21:26
  • 2
    Try **`"html.format.wrapAttributes"`** in your settings. Also, ESLint won't format HTML, but prettier does format it, and it wraps the attributes. You may need to use a plugin for prettier if you don't like them being wrapped, because prettier is an Opinionated formater, it doesn't give you any options to change things. – JΛYDΞV Jul 01 '21 at 04:19

0 Answers0