Parsing is incompatible with typescript-eslint v2

As noted here, there is some kind of problems with applying Vue ESLint rules on SFC together with typescript-eslint v2. Can you take a look at this and provide some insight on how the problem can be solved?

In my case, I get a Parsing error: '>' expected in every single Vue SFC, plus multiple template related errors. I’m using Quasar, with app-extension-typescript, just to give some context.

This seems related to the fact that the code actually read and linted is a transformation of the original one. For example, v-on are listeners on click events (@click.left="$emit('something')") and the parser is probably complaining about the click word being used into JS.

[amritk]

I am stuck on this as well, have tried many things but can’t seem to figure this one out.

// .eslintrc.js:

module.exports = {
    root: true,
    env: {
        browser: true,
        node: true
    },
    parser: 'vue-eslint-parser',
    parserOptions: {
        extraFileExtensions: ['.vue'],
        parser: '@typescript-eslint/parser',
        project: './tsconfig.json',
        sourceType: 'module'
    },
    extends: [
        '@nuxtjs',
        '@nuxtjs/eslint-config-typescript',
        'eslint:recommended',
        'plugin:nuxt/recommended',
        'plugin:@typescript-eslint/recommended',
        'plugin:vue/recommended'
    ],
    plugins: [
        'vue',
        '@typescript-eslint'
    ],
    rules: {
        'nuxt/no-cjs-in-config': 'off',
        '@typescript-eslint/camelcase': [1, { properties: 'never' }],
        '@typescript-eslint/explicit-function-return-type': 0,
        '@typescript-eslint/interface-name-prefix': [2, 'always'],
        '@typescript-eslint/member-delimiter-style': [2, { multiline: { delimiter: 'none' }}],
        '@typescript-eslint/explicit-member-accessibility': 0,
        '@typescript-eslint/no-explicit-any': 1,
        '@typescript-eslint/no-non-null-assertion': 0,
        "@typescript-eslint/no-var-requires": 0,
        'arrow-parens': [2, 'as-needed'],
        'brace-style': [2, 'stroustrup'],
        'comma-dangle': [2, 'never'],
        'curly': [2, 'all'],
        'import/order': [2, { 'newlines-between': 'never' }],
        'indent': [2, 4, { 'SwitchCase': 1 }],
        'max-len': [1, {
            'code': 120,
            'ignoreUrls': true,
            'ignoreStrings': true,
            'ignoreTemplateLiterals': true,
            'ignoreRegExpLiterals': true
        }],
        'new-parens': 2,
        'no-console': [1, { allow: ['warn', 'error', 'info'] }],
        'no-irregular-whitespace': 2,
        'no-multiple-empty-lines': [2, { max: 1 }],
        'no-new': 0,
        'no-trailing-spaces': 2,
        'no-unused-expressions': 2,
        'no-undef-init': "error",
        'no-var': 2,
        'object-shorthand': 2,
        'object-curly-newline': [2, {
            'ObjectExpression': { 'multiline': true, 'minProperties': 4, 'consistent': true },
            'ImportDeclaration': 'never',
            'ExportDeclaration': 'never'
        }],
        'object-curly-spacing': [2, 'always'],
        'one-var-declaration-per-line': 2,
        'padded-blocks': 0,
        'prefer-arrow-callback': 2,
        'prefer-const': 2,
        'quotes': [2, 'single'],
        'semi': [2, 'never'],
        'space-before-function-paren': [2, 'always'],
        'vue/html-indent': [2, 4],
        'vue/max-attributes-per-line': ['error', {
            'singleline': 1,
            'multiline': {
                'max': 1,
                'allowFirstLine': false
            }
        }]
    }
}

[IlCallo]

I confirm issues are finally gone 😃