Wrong detect of `Parsing error: invalid-first-character-of-tag-name` in expression.

[tinymins]

Tell us about your environment

• ESLint Version:

4.16.0

• eslint-plugin-vue Version:

4.2.2

• Node Version:

v8.1.3

Please show your full configuration:

const isDev = process.env.NODE_ENV === 'development';

// http://eslint.org/docs/user-guide/configuring
module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module'
  },
  env: {
    browser: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/recommended', // or 'plugin:vue/base'
    'airbnb-base',
  ],
  // required to lint *.vue files
  plugins: [
    'vue',
  ],
  // check if imports actually resolve
  'settings': {
    'import/resolver': {
      'webpack': {
        'config': 'build/webpack.base.conf.js'
      }
    },
  },
  // add your custom rules here
  'rules': {
    // eslint rules
    'camelcase': ['error', {
      'properties': 'always'
    }],
    'function-paren-newline': ['error', 'consistent'],
    'id-match': ['error', '^(\\${0,1}[a-z]+[a-zA-Z_]*||[A-Z_0-9]+||[pk][12])$', {
      'onlyDeclarations': true,
    }],
    'max-len': ['error', {
      'code': 140,
      'ignoreTrailingComments': true,
      'ignoreStrings': true,
      'ignoreTemplateLiterals': true,
      'ignoreUrls': true,
      'ignoreComments': true
    }],
    'no-underscore-dangle': 0,
    'no-return-assign': 0,
    'object-curly-newline': ['error', {
      'consistent': true
    }],
    'one-var': ['error', {
      'initialized': 'never',
    }],
    'one-var-declaration-per-line': ['error', 'initializations'],
    'prefer-destructuring': 0,
    // allow debugger during development
    'no-debugger': isDev ? 0 : 2,
    'no-console': isDev ? 0 : 1,
    'no-unused-vars': isDev ? 0 : 1,

    // don't require .vue extension when importing
    'import/extensions': ['error', 'always', {
      'js': 'never',
      'vue': 'never'
    }],
    // allow optionalDependencies
    'import/no-extraneous-dependencies': ['error', {
      'optionalDependencies': ['test/unit/index.js']
    }],
    // allow single export
    'import/prefer-default-export': 'off',

    // vue lint configs
    'vue/attribute-hyphenation': ['error', 'always'],
    'vue/html-end-tags': 'error',
    'vue/html-indent': ['error', 2, {
      'attribute': 1,
      'closeBracket': 0,
      'ignores': []
    }],
    'vue/html-quotes': ['error', 'double'],
    'vue/html-self-closing': ['error', {
      'html': {
        'normal': 'never',
        'void': 'never',
        'component': 'never'
      },
      'svg': 'always',
      'math': 'always',
    }],
    'vue/max-attributes-per-line': [2, {
      'singleline': 10,
      'multiline': {
        'max': 2,
        'allowFirstLine': false
      },
    }],
    'vue/mustache-interpolation-spacing': ['error', 'always'],
    'vue/name-property-casing': ['error', 'kebab-case'],
    'vue/no-async-in-computed-properties': 'error',
    'vue/no-confusing-v-for-v-if': 'error',
    'vue/no-dupe-keys': 'error',
    'vue/no-duplicate-attributes': ['error', {
      allowCoexistClass:  true,
      allowCoexistStyle: true,
    }],
    'vue/no-multi-spaces': 'error',
    'vue/no-parsing-error': 'error',
    'vue/no-reserved-keys': ['error', {
      'reserved': ['$el', '$nextTick', '$route', '$router', 'asyncData'],
      'groups': [],
    }],
    'vue/no-shared-component-data': 'error',
    'vue/no-side-effects-in-computed-properties': 'error',
    'vue/no-template-key': 'error',
    'vue/no-textarea-mustache': 'error',
    // 'vue/order-in-components': ['error', {
    //   'order': [
    //     ['name', 'delimiters', 'functional', 'model'],
    //     ['components', 'directives', 'filters'],
    //     ['parent', 'mixins', 'extends', 'provide', 'inject'],
    //     'el',
    //     'template',
    //     'props',
    //     'propsData',
    //     'data',
    //     'computed',
    //     'watch',
    //     'asyncData',
    //     'onWechatReady',
    //     'LIFECYCLE_HOOKS',
    //     'methods',
    //     'render',
    //     'renderError'
    //   ],
    // }],
    'vue/require-component-is': 'error',
    'vue/require-default-prop': 'error',
    'vue/require-prop-types': 'error',
    'vue/require-render-return': 'error',
    'vue/require-v-for-key': 'error',
    'vue/require-valid-default-prop': 'error',
    'vue/return-in-computed-property': 'error',
    'vue/this-in-template': ['error', 'never'],
    'vue/v-bind-style': ['error', 'shorthand'],
    'vue/v-on-style': ['error', 'shorthand'],
    'vue/valid-template-root': 'error',
    'vue/valid-v-bind': 'error',
    'vue/valid-v-cloak': 'error',
    'vue/valid-v-else-if': 'error',
    'vue/valid-v-else': 'error',
    'vue/valid-v-for': 'error',
    'vue/valid-v-html': 'error',
    'vue/valid-v-if': 'error',
    'vue/valid-v-model': 'error',
    'vue/valid-v-on': 'error',
    'vue/valid-v-once': 'error',
    'vue/valid-v-pre': 'error',
    'vue/valid-v-show': 'error',
    'vue/valid-v-text': 'error',
  }
}

What did you do? Please include the actual source code causing the issue.

            <div class="pull-down-touching-tip__text">
              {{ scope.distance < fireDistance ? '继续下拉刷新' : '松手刷新' }}
            </div>

What did you expect to happen?

No error.

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

[mysticatea]

Thank you for the report.

This is a correct error as according to HTML spec:

• invalid-first-character-of-tag-name error.
• Tag open state's Anything else step.

To make valid HTML, you should use < instead of the <.
Or you can ignore the error by the option of vue/no-parsing-error rule: https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/no-parsing-error.md#wrench-options

[tinymins]

No this is NOT html, it's in {{}}, which means it is a inline JavaScript expression.

[mysticatea]

It's still in HTML.

[tinymins]

Thanks for reply. So what should I do to compare two numbers and use conditional operator correctly in vue template?

[tinymins]

The expression {{ scope.distance < fireDistance ? 'Pull to refresh' : 'Release to refresh' }} in template, will be rendered into Pull to refresh or Release to refresh due to scope.distance and fireDistance. There is no spec in the result. I can't understand why lint report an error here. 😕

[mysticatea]

To be valid HTML, {{ scope.distance < fireDistance ? 'Pull to refresh' : 'Release to refresh' }}.

But HTML spec allows {{ scope.distance < fireDistance ? 'Pull to refresh' : 'Release to refresh' }} as well due to well-defined error recovery logic. It's the reason why vue/no-parsing-error rule has the options to ignore HTML parse errors.

[tinymins]

Actually, {{ scope.distance < fireDistance ? 'Pull to refresh' : 'Release to refresh' }} can not pass the compiler.

It is really a great feature to detect specs in real HTML, and I need this very much. Some members in my team are always careless about use &lt. They think 'OH IT WORKS!', which makes me feel very annoying. That's why I do not want to disable it globally.

[mysticatea]

Oh? {{ scope.distance < fireDistance ? 'Pull to refresh' : 'Release to refresh' }} works fine in my environment.

[tinymins]

Full file index.vue:

<template>
  <div>A is {{ a > b ? 'larger than' : 'smaller or equals with' }} B</div>
</template>

<script>
export default {
  data() {
    return {
      a: Math.random(),
      b: Math.random(),
    };
  },
};
</script>

You can try this code.

[tinymins]

Here's the expected result.

[mysticatea]

I know that HTML syntax is very tolerant. Browsers/Parsers work fine even if HTML parse error. But HTML parse errors still exist, so the rule reports it and has the options which are to ignore HTML parse errors.

OK, I opened an issue to add option which ignores HTML syntax errors in mustaches in vue-eslint-parser repo.

[mysticatea]

I re-thought about this, I decided that I don't add that option.

It messes the code easily by removing a space. Inside of mustaches is still HTML.

<!-- Oops, this is not a mustache, there is `<fireDistance>` tag. -->
{{ scope.distance <fireDistance ? 'Pull to refresh' : 'Release to refresh' }}

I'd like to recommend to use < (note it requires semicolon) for <.

Thank you.