eslint-plugin-vue-pug icon indicating copy to clipboard operation
eslint-plugin-vue-pug copied to clipboard

vue/html-quotes conflicting with template strings in pug

Open la-magra opened this issue 2 years ago • 1 comments

Unsure if this conflict should be reported here or in https://github.com/vuejs/eslint-plugin-vue .

Given a valid pug template that uses template strings (https://pugjs.org/language/attributes.html#multiline-attributes):

<template lang="pug">
a(
  :href=`
    thing
    + more
    + '&more='
    + very_long
  `
)
  | thing
</template>

and a basic eslint config with the following plugins:

plugin:vue/recommended
@vue/standard
plugin:vue-pug/recommended // we are on vue2

We get: vue/html-quotes: Expected to be enclosed by double quotes.

And upon running with --fix, the file gets mauled savagely:

<template lang="pug">
a(
  :href=`"
    thing
    + more
    + '&other='
    + other
  `"
)
  | thing
</template>

So far we have been running with //- eslint-disable vue/html-quotes and //- eslint-enable ... over the concerned blocks.

la-magra avatar Nov 29 '22 01:11 la-magra

This probably requires forking the vue/html-quotes rule from eslint-plugin-vue, the check in there is pretty simple.

It's probably best to always allow backtick quotes because disallowing them (if the user wants to) is probably more of a no-multiline-attribute rule that requires way different fixing code.

rashfael avatar Nov 29 '22 16:11 rashfael