Eslint-plugin-vue: [vue/html-indent] Unexpected indentation level when element follows mustache tag.

[constantm]

Tell us about your environment

• ESLint version: v5.12.0
• eslint-plugin-vue version: 4.7.1
• Node version: v10.11.0

Please show your full configuration:

module.exports = {
  root: true,
  parserOptions: {
    sourceType: 'script',
  },
  extends: [
    'prettier',
    'prettier/standard',
    'plugin:vue/recommended',
    'standard',
  ],
  rules: {
    // Only allow debugger in development
    'no-debugger': process.env.PRE_COMMIT ? 'error' : 'off',
    // Only allow `console.log` in development
    'no-console': process.env.PRE_COMMIT
      ? ['error', { allow: ['warn', 'error'] }]
      : 'off',
    'vue/html-closing-bracket-spacing': [
      'error',
      {
        startTag: 'never',
        endTag: 'never',
        selfClosingTag: 'never',
      },
    ],
    'vue/component-name-in-template-casing': [
      'error',
      'kebab-case',
      {
        ignores: [],
      },
    ],
    'vue/html-closing-bracket-newline': [
      'error',
      {
        singleline: 'never',
        multiline: 'never',
      },
    ],
    'vue/max-attributes-per-line': [
      'error',
      {
        singleline: 1,
        multiline: {
          max: 1,
          allowFirstLine: false,
        },
      },
    ],
    'vue/html-indent': [
      'error',
      2,
      {
        attribute: 1,
        baseIndent: 1,
        closeBracket: 0,
        alignAttributesVertically: true,
        ignores: [],
      },
    ],
    'comma-dangle': ['error', 'always-multiline'],
    'space-before-function-paren': ['error', 'never'],
  },
  overrides: [
    {
      files: ['src/**/*', 'tests/unit/**/*', 'tests/e2e/**/*'],
      excludedFiles: 'app.config.js',
      parserOptions: {
        parser: 'babel-eslint',
        sourceType: 'module',
      },
      env: {
        browser: true,
      },
    },
    {
      files: ['**/*.unit.js'],
      parserOptions: {
        parser: 'babel-eslint',
        sourceType: 'module',
      },
      env: { jest: true },
      globals: {
        mount: false,
        shallowMount: false,
        shallowMountView: false,
        createComponentMocks: false,
        createModuleStore: false,
      },
    },
  ],
}

What did you do?

node_modules/eslint/bin/eslint.js --ext .js,.vue --fix src/**/*.vue

On file:

<div class="col">
  You accepted the policy {{ policyUrl ? 'at' : '' }}
                    <a :href="policyUrl" target="_blank">
                     {{ policyUrl }}
                    </a>
      on {{ acceptDate }}.
</div>

What did you expect to happen?

<div class="col">
  You accepted the policy {{ policyUrl ? 'at' : '' }}
  <a
    :href="policyUrl"
    target="_blank">
    {{ policyUrl }}
  </a>
  on {{ acceptDate }}.
</div>

What actually happened?

<div class="col">
  You accepted the policy {{ policyUrl ? 'at' : '' }}
                    <a
                      :href="policyUrl"
                      target="_blank">
                      {{ policyUrl }}
                    </a>
                    on {{ acceptDate }}.
</div>

[ckritzinger]

I'm running into the same thing. Any suggestions?

[ota-meshi]

Hello.
This problem does not seem to happen on the [demo].
In the latest version, this problem may have been fixed.

[lilosg]

Hello,

It doesnt seem to be related to mustaches, but generally with text not wrapped by a tag
Yesterday i updated my dependencies to the latest and since then i get weird behavior with indentations on vue templates.

Below is a sample of my code before updating to latest

<label class="label-checkbox">
  Text not wrapped by an element
  <input
    type="checkbox"
    class="checkbox"
    v-validate="'required'"
    data-vv-as="Accept"
    v-model="formData.accepted"
    name="accepted"
    :class="{ 'has-error': errors.has(`${scope}.accepted`) }"
    :disabled="submitting"
  >
  <div class="checkbox-indicator" />
</label>

I then run development server and received indentation warnings on above sample.

The warning was suggesting to indent the input tag 39 spaces instead of 10 it was originally at.

I let it auto fix the problem and the result was:

<label class="label-checkbox">
  Text not wrapped by an element
                                       <input
                                         type="checkbox"
                                         class="checkbox"
                                         v-validate="'required'"
                                         data-vv-as="Accept"
                                         v-model="formData.accepted"
                                         name="accepted"
                                         :class="{ 'has-error': errors.has(`${scope}.accepted`) }"
                                         :disabled="submitting"
                                       >
  <div class="checkbox-indicator" />
</label>

In order to temporary fix it i had to wrap the text with an element

<label class="label-checkbox">
  <span>Text not wrapped by an element</span>
  <input
    type="checkbox"
    class="checkbox"
    v-validate="'required'"
    data-vv-as="Accept"
    v-model="formData.accepted"
    name="accepted"
    :class="{ 'has-error': errors.has(`${scope}.accepted`) }"
    :disabled="submitting"
  >
  <div class="checkbox-indicator" />
</label>

After that the warning disappeared

[ota-meshi]

@lilisgeorge
What version are you using?
I think that it was fixed in v 5.1.0.

[lilosg]

@ota-meshi
I am using v5.1.0 on a project scaffolded with vue-cli 3

The project is setup on 2 desktop computers. One at home and the other at work.

I have updated both computer dependencies. On home pc i did npm update and npm ci to clear node_modules folder while on work pc i just did npm ci.

On my work pc i receive no errors but in my home pc I still get linting errors.

[lilosg]

@ota-meshi

Hello,
Error fixed for me. Seems like it was some kind of caching.

[constantm]

Woohoo this was indeed fixed in 5.1.0, thank you!