Bug in template-curly-spacing rule

Tell us about your environment This is a standard Vue project created by Vue-CLI v4.2.0

• ESLint Version: 6.8.0
• Node Version: 13.13.0
• npm Version: 6.13.6

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

Please show your full configuration:

Configuration

// https://eslint.org/docs/user-guide/configuring

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true,
  },
  extends: [
    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
    'plugin:vue/recommended',
    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
    '@vue/standard',
  ],
  // add your custom rules here
  rules: {
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'semi': 'off',
    'brace-style': ['error', 'allman'],
    'object-curly-newline': ["error", {
        "ObjectExpression": { "multiline": true, "minProperties": 2, "consistent": true },
        "ObjectPattern": { "multiline": true },
        "ImportDeclaration": "never",
        "ExportDeclaration": { "multiline": true, "minProperties": 3 }
    }],
    "object-property-newline": ["error", {"allowAllPropertiesOnSameLine": false}],
    "comma-dangle": ["error", {
        "arrays": "only-multiline",
        "objects": "only-multiline",
        "imports": "never",
        "exports": "never",
        "functions": "never"
    }],
    'no-trailing-spaces': 'off',
    'quotes': 'off',
    'one-var': ['error', {'uninitialized': 'always', 'initialized': 'never'}],
    'no-v-html': 'off',
    "vue/max-attributes-per-line": ["error", {
      "singleline": 10,
      "multiline": {
        "max": 6,
        "allowFirstLine": true
      }
    }],
    "vue/order-in-components": ["error",
      {
        "order": [
          "el",
          "name",
          "parent",
          "functional",
          ["delimiters", "comments"],
          ["components", "directives"],
          "extends",
          "mixins",
          "inheritAttrs",
          "model",
          ["props", "propsData"],
          "data",
          "filters",
          "computed",
          "watch",
          "LIFECYCLE_HOOKS",
          "methods",
          ["template", "render"],
          "renderError"
        ]
      }
    ],
    'vue/singleline-html-element-content-newline': 'off',
    'vue/html-closing-bracket-spacing': 'off',
  }
} 

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

<template>
  <div>test</div>
</template>

<script>
export default
{
  name: 'Application',
  data ()
  {
    return {
      box: null,
    };
  },
  created ()
  {
    this.box = `<svg width="48" height="48" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
      <g fill="#1976D2" stroke="none" stroke-width="1">
      <rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" transform="rotate(0 50 50) translate(0 -30)"/>
      <rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" transform="rotate(30 50 50) translate(0 -30)"/>
      <rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" transform="rotate(60 50 50) translate(0 -30)"/>
      <rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" transform="rotate(90 50 50) translate(0 -30)"/>
      <rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" transform="rotate(120 50 50) translate(0 -30)"/>
      <rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" transform="rotate(150 50 50) translate(0 -30)"/>
      <rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" transform="rotate(180 50 50) translate(0 -30)"/>
      <rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" transform="rotate(210 50 50) translate(0 -30)"/>
      <rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" transform="rotate(240 50 50) translate(0 -30)"/>
      <rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" transform="rotate(270 50 50) translate(0 -30)"/>
      <rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" transform="rotate(300 50 50) translate(0 -30)"/>
      <rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" transform="rotate(330 50 50) translate(0 -30)"/>
      </g>
      </svg>`;    
  }
}
</script> 

node ./node_modules/eslint/bin/eslint.js --ext .js,.vue src

What did you expect to happen? There should be no linting errors.

What actually happened? Please include the actual, raw output from ESLint.

Z:\1>npm run build

> composite@1.0.6 build Z:\1
> node --preserve-symlinks --preserve-symlinks-main ./node_modules/@vue/cli-serv
ice/bin/vue-cli-service.js build

-  Building for production...

 ERROR  Failed to compile with 1 errors                                 17:11:23

 error  in ./src/App.vue

Module build failed (from ./node_modules/eslint-loader/index.js):
TypeError: Cannot read property 'range' of null
Occurred while linting Z:\1\src\App.vue:11
    at SourceCode.getTokenBefore (Z:\1\node_modules\eslint\lib\source-code\token
-store\index.js:298:18)
    at checkSpacingBefore (Z:\1\node_modules\eslint\lib\rules\template-curly-spa
cing.js:60:42)
    at TemplateElement (Z:\1\node_modules\eslint\lib\rules\template-curly-spacin
g.js:119:17)
    at Z:\1\node_modules\eslint\lib\linter\safe-emitter.js:45:58
    at Array.forEach (<anonymous>)
    at Object.emit (Z:\1\node_modules\eslint\lib\linter\safe-emitter.js:45:38)
    at NodeEventGenerator.applySelector (Z:\1\node_modules\eslint\lib\linter\nod
e-event-generator.js:254:26)
    at NodeEventGenerator.applySelectors (Z:\1\node_modules\eslint\lib\linter\no
de-event-generator.js:283:22)
    at NodeEventGenerator.enterNode (Z:\1\node_modules\eslint\lib\linter\node-ev
ent-generator.js:297:14)
    at CodePathAnalyzer.enterNode (Z:\1\node_modules\eslint\lib\linter\code-path
-analysis\code-path-analyzer.js:634:23)
    at Z:\1\node_modules\eslint\lib\linter\linter.js:936:32
    at Array.forEach (<anonymous>)
    at runRules (Z:\1\node_modules\eslint\lib\linter\linter.js:931:15)
    at Linter._verifyWithoutProcessors (Z:\1\node_modules\eslint\lib\linter\lint
er.js:1157:31)
    at Z:\1\node_modules\eslint\lib\linter\linter.js:1281:29
    at Array.map (<anonymous>)

 @ ./src/main.js 5:0-28 7:17-20
 @ multi ./src/main.js

 ERROR  Build failed with errors.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! composite@1.0.6 build: `node --preserve-symlinks --preserve-symlinks-ma
in ./node_modules/@vue/cli-service/bin/vue-cli-service.js build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the composite@1.0.6 build script.
npm ERR! This is probably not a problem with npm. There is likely additional log
ging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     z:\temp\npm\_logs\2020-05-02T14_11_23_489Z-debug.log

Z:\1>

Are you willing to submit a pull request to fix this bug?

This issue seems to occur when JavaScript template strings (those enclosed in backticks) do not contain any interpolations. The fix is to add if(!token) return; on line 118 in eslint/lib/rules/template-curly-spacing.js

[tmcdos]

I tried both v7.0.0 and v6.0.5 of Vue-ESLint-parser - no difference, the error is still there. I will post the issue on their tracker, too.

[eslint-deprecated[bot]]

Unfortunately, it looks like there wasn’t enough interest from the team or community to implement this change. While we wish we’d be able to accommodate everyone’s requests, we do need to prioritize. We’ve found that issues failing to reach accepted status after 21 days tend to never be accepted, and as such, we close those issues. This doesn’t mean the idea isn’t interesting or useful, just that it’s not something the team can commit to.

Thanks for contributing to ESLint and we appreciate your understanding.