[FEATURE]: support max-len in Vue components

[alonsogb]

How can the project be improved?

In the Playboard team, we use the eslint-plugin-x and during development, we found out that eslint with its max-len rule and prettier didn't work together. The main problem is there are some cases that prettier doesn't want to transform the code even when the code's length surpasses the limit.

Some cases:

• Strings length (e.g: long imports paths, long attribute names in vue files, long describe() titles, long URL ). Further info
• Template Literals when there are some expressions inside prettier doesn't do a wrap transformation itself. It is a known discussion topic of the prettier formatter.

imports { foo } from 'very-long-long-long-long-long-long-long-long-long-import-path'; // ERROR: eslint max-len

const x = `${msgs?.explanation1}<br>${msgs?.explanation2}<ul><li>"${promotions[0].title}" with queries: ${promotions[0].keywords[0]}</li></ul>`// ERROR: eslint max-len

describe('very-long-long-long-long-long-long-long-long-long-long-title')// ERROR: eslint max-len

• CSS long lines. There are some cases in that you can not add a line break.

@include example( 'very-long-long-long-long-long-long-long-long-long-long-class');

• long attributes in Vue components. There are some cases that you can not add a line break in an attribute.

<div  class="example-component example-component--expanded">

<path
   d="M11 .5c-1.7.2-3.4.9-4.7 2-1.1.9-2 2-2.5 3.2-1.2 2.4-1.2 5.1-.1 7.7 1.1 2.6 2.8 5 5.3 7.5 1.2 1.2 2.8 2.7 3 2.7 0 0
/>"

How can this be solved?

• Make the linter ignore strings
• Make the linter ignore template literals
• Make the linter ignore long CSS lines inside Vue
• Make the linter ignore Vue components' attributes

Proposed solution

In Play team core repository we defined a configuration in .eslintrc.js which solved these issues.

• We ignored all the strings with the ignoreStrings flag.
• We ignored all the template literals with the ignoreTemplateLiterals flag.
• We also ignored all the URLs, because there were some big urls in the play-core repository.
• We also ignore attribute length in Vue components with the ignoreHTMLAttributeValues flag.

Customizations supported

I would suggest using our approach or something along those lines in eslint-plugin-x so everyone could have a general config that solves these issues.

Suggestions:

• Do an override in .vue files, which disabled the original max/len but used the extended one vue/max-len

{
      files: ['*.vue'],
      rules: {
        'max-len': 'off',
        'vue/max-len': [
          'error',
          {
           ignoreStrings: true,
           ignoreTemplateLiterals: true,
            ignoreUrls: true,
            ignoreHTMLAttributeValues: true
          }
        ]
      }

• Change config for max-len

{
  rules: {
      'max-len': ['error', {
                         ignoreStrings: true,
                         ignoreTemplateLiterals: true,
                         ignoreUrls: true      
                         }],
  }
}

Additional information

Previously prettier would have formatted this with one class per line. like so:

 <div class="example-component
                        example-component--expanded
                         example-component--collapsed"
  >

But it is no longer an option since prettier@2.5.0.

Further info:

• eslint max-len
• vue max-len which extends eslint config
• play eslint config

Code of Conduct

• I agree to follow this project's Code of Conduct.