`prefer-template` configuration to ignore if resulting line would be over a configurable length.

What rule do you want to change? prefer-template Does this change cause the rule to produce more or fewer warnings? Fewer errors/warnings (depending on configuration) How will the change be implemented? (New option, new default behavior, etc.)? New option Please provide some example code that this change will affect:

const userInfoString = `theExpectedStart-${user.name}`
  + (user.hasPet ? `-${user.petName} : '')
  + (user.hasAddress ? `-${user.city}` : '')

What does the rule currently do for this code? It gives an error What will the rule do after it’s changed? Not give an error when the rule is configured to ignore string concatenation for lines which would be over the configured length Are you willing to submit a pull request to implement this change? If I have time.

prefer-template (used as a rule in popular style guides such as the airbnb style guide) often encourages very long lines (even greater than max-len when "ignoreTemplateLiterals": true is set)

For example, if we want to display user information in a kebab-case string, we might do something like

// works when the `max-len` rule has the `"ignoreTemplateLiterals": true` option:
const userInfoString = `theExpectedStart-${user.name}${user.hasPet ? `-${user.petName} : ''}${user.hasAddress ? `-${user.city}` : ''}`

This 135-character line constructs a string like theExpectedStart-harts-vancouver ( "ignoreTemplateLiterals": true is also part of the airbnb style guide)

The following would be much more readable, but currently not configurable to not throw a linting error:

const userInfoString = `theExpectedStart-${user.name}`
  + (user.hasPet ? `-${user.petName} : '')
  + (user.hasAddress ? `-${user.city}` : '')

There are currently some workarounds:

// eslint-disable-next-line prefer-template
const userInfoString = `theExpectedStart-${user.name}`
  + user.hasPet ? `-${user.petName} : ''
  + user.hasAddress ? `-${user.city}` : ''

// construct the string with multiple statements:
let userInfoString=`theExpectedStart-${user.name}`
if (user.hasPet) {
  userInfoString=`${userInfoString}-${user.petName}`
}
if (user.hasAddress) {
  userInfoString=`${userInfoString}-${user.city}`
}

But a configurable option to prefer-template would be preferable. Something like "ignoreForLinesOverLength": 80, for example, which would disable the rule for situations like

const userInfoString = `theExpectedStart-${user.name}`
  + (user.hasPet ? `-${user.petName} : '')
  + (user.hasAddress ? `-${user.city}` : '')

[btmills]

To add yet another alternative, this is how Prettier wraps long template strings:

const userInfoString = `theExpectedStart-${user.name}${
  user.hasPet ? `-${user.petName}` : ""
}${user.hasAddress ? `-${user.city}` : ""}`;

In my experience, the nudge to refactor long template strings with complex expressions inside leads to more legible code once I’ve rearranged it. When there’s no better alternative, a disable comment is appropriate. I think the rule is doing the right thing here, and line length isn’t its responsibility.

[nzakas]

There isn’t enough support on the team to add an additional option, so closing.