search

vuejs / eslint-plugin-vue

Official ESLint plugin for Vue.js
https://eslint.vuejs.org/
MIT License
4.45k stars 666 forks source link

Rule Proposal: vue/max-len #731

Closed sebiniemann closed 4 years ago

sebiniemann commented 5 years ago

Please describe what the rule should do: Currently, any line within <template> is forced to respect the max-len rule, without any option to ignore text-focused nodes (i.e. text nodes and phrasing content).

This does not seems to be in line with the current ignore options for max-len, as it already allows to keep long string, URLs, template literals, RegExp literals, ... together in a single line.

What category should the rule belong to?

It's a proposal to add an ignore option.

Provide 2-3 code examples that this rule should warn about: The following examples should be fine (NO warning):

Text node within a flow content:

<template>
  <p>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </p>
</template>

Phrasing node within a flow content

<template>
  <p>
    <q>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</q>
  </p>
</template>

Additional context This issue was already mentioned in another context (to deactivate eslint completely -- what should never be the recommended solution in my opinion) by @MaxMilton (https://github.com/vuejs/eslint-plugin-vue/issues/260#issuecomment-354322849):

It's particularly frustrating with the max-len eslint rule. I often have paragraphs or long elements and so I've had to disable the rule. A shame because it's useful for JS linting.

michalsnik commented 5 years ago

Hey @SebastianNiemann Thanks for posting this issue. Implementation details of the core max-len rule result in throwing an error in the Vue template as well. We could probably introduce dedicated max-len rule, with updated logic, to allow setting different values for template and JS, as well as disabling one or another. What do you think @mysticatea? Perhaps you have other idea here? :)

mysticatea commented 5 years ago

It's a good idea. We can add vue/max-len rule for additional settings.

AdsonCicilioti commented 5 years ago

Please i need this!

bastiW commented 5 years ago

Good Idea! Also searched for that

syntag commented 5 years ago

Can't wait for this to be implemented, it's definitely a must! I have eslint-disable max-len scattered throughout many of my Vue templates, which is obviously not ideal.

kamilic commented 5 years ago

Any progress ?