prefer-template autofix adds extra spaces inside placeholders.

Tell us about your environment

Node version: v14.5.0 npm version: v6.14.5 Global ESLint version: v7.3.1 (Currently used)

What parser (default, Babel-ESLint, etc.) are you using?

parser: default (unconfigured)

Please show your full configuration:

Configuration

{
  "rules": {
    "prefer-template": "error"
  }
}

What did you do? Please include the actual source code causing the issue, as well as the command that you used to run ESLint.

var foo = 'a';
var baz = 'bar' + foo;
var quz = foo + 'bar';
var quuz = 'bar'  +  foo;

eslint --fix main.js

What did you expect to happen? I expected to get the following file:

var foo = 'a';
var baz = `bar${foo}`;
var quz = `foo${bar}`;
var quuz = `bar${foo}`;

What actually happened? Please include the actual, raw output from ESLint. I got the following file:

var foo = 'a';
var baz = `bar${  foo}`;
var quz = `${foo  }bar`;
var quuz = `bar${    foo}`;

Essentially, the spaces around the concatenation operator end up inside the placeholder. For example, in quux’s definition, there are two spaces on each side of the +, and there are four spaces inside the resulting placeholder.
ESLint’s output is as follows:

/path/to/my/project/main.js
  3:11  error  Parsing error: Unexpected character '`'

✖ 1 problem (1 error, 0 warnings)

Which I find strange, since the resulting code is valid JS.

Are you willing to submit a pull request to fix this bug? Yes, if I knew where the bug would most likely be. I haven’t looking in ESLint’s codebase before.

[mdjermanovic]

You should also set "parserOptions": { "ecmaVersion": 2015 } (or higher).

[kaicataldo]

Agreed that the output looks weird, but I don’t know if removing all the whitespace is necessarily more correct in this case. Each autofixer is intended to make as small a change as possible, and to enforce the style you’re expecting you can use template-curly-spacing.