Can't get @volar-plugins/eslint to work

[rchl]

Per #2204 I've tried to convert one project to use @volar-plugins/eslint but it doesn't seem to work for me.

The project is at: https://github.com/rchl/lsp-log-parser/commits/test/volar-eslint (the test/volar-eslint branch).

I've created a linting issue in the pages/index.vue in the template (some attributes are not wrapped correctly). You can see the issue by running yarn lint but Volar doesn't show it.

Tested in VSCode with Takeover enabled.

[johnsoncodehk]

It seems the reason is that it has the same project path with in different parserOptions, you can use the following config to avoid the problem.

module.exports = {
    root: true,
    env: {
        browser: true,
        commonjs: true,
        es2020: true,
        node: true,
    },
    extends: 'eslint:recommended',
    parserOptions: {
        sourceType: 'module',
+        extraFileExtensions: ['.vue'],
+        project: './tsconfig.json',
+        tsconfigRootDir: __dirname,
    },
    // add your custom rules here
    rules: {
        'array-bracket-spacing': 'error',
        'brace-style': 'error',
        'comma-dangle': ['error', 'always-multiline'],
        'comma-spacing': 'error',
        'computed-property-spacing': 'error',
        curly: 'error',
        'dot-notation': 'error',
        'eol-last': 'error',
        eqeqeq: 'error',
        'func-call-spacing': 'error',
        indent: [
            'error', 4, {
                SwitchCase: 1,
            },
        ],
        'keyword-spacing': 'error',
        'linebreak-style': 'error',
        'no-console': [
            'error', {
                allow: ['assert', 'warn', 'error', 'info', 'time', 'timeEnd'],
            },
        ],
        'no-constructor-return': 'error',
        'no-multi-spaces': ['error', { ignoreEOLComments: true }],
        'no-multiple-empty-lines': ['error', { max: 1 }],
        'no-tabs': 'error',
        'no-template-curly-in-string': 'error',
        'no-trailing-spaces': 'error',
        'no-var': 'error',
        'no-whitespace-before-property': 'error',
        'object-curly-spacing': ['error', 'always'],
        'one-var-declaration-per-line': ['error', 'always'],
        'prefer-const': 'error',
        'quote-props': ['error', 'as-needed'],
        quotes: ['error', 'single'],
        'padded-blocks': ['error', 'never'],
        semi: ['error', 'never'],
        'space-before-blocks': 'error',
        'space-before-function-paren': ['error', 'never'],
        'space-in-parens': 'error',
        'space-infix-ops': 'error',
    },
    overrides: [
        {
            files: ['*.ts'],
            extends: 'plugin:@typescript-eslint/recommended',
-            parserOptions: {
-                project: './tsconfig.json',
-                tsconfigRootDir: __dirname,
-            },
            rules: {
                indent: 'off',
                'no-extra-parens': 'off',
                'no-extra-semi': 'off',
                quotes: 'off',
                semi: 'off',
                '@typescript-eslint/ban-ts-comment': 'off',
                '@typescript-eslint/explicit-function-return-type': 'off',
                '@typescript-eslint/explicit-module-boundary-types': 'off',
                '@typescript-eslint/indent': [
                    'error', 4, {
                        SwitchCase: 1,
                        FunctionDeclaration: { parameters: 'first' },
                        FunctionExpression: { parameters: 'first' },
                        CallExpression: { arguments: 'first' },
                    },
                ],
                '@typescript-eslint/member-delimiter-style': 'error',
                '@typescript-eslint/no-empty-interface': ['error', { allowSingleExtends: true }],
                '@typescript-eslint/no-explicit-any': 'off',
                '@typescript-eslint/no-extra-parens': 'error',
                '@typescript-eslint/no-extra-semi': 'error',
                '@typescript-eslint/no-require-imports': 'error',
                '@typescript-eslint/no-unnecessary-qualifier': 'error',
                '@typescript-eslint/no-useless-constructor': 'error',
                '@typescript-eslint/quotes': ['error', 'single', { avoidEscape: true, allowTemplateLiterals: false }],
                '@typescript-eslint/restrict-plus-operands': 'error',
                '@typescript-eslint/semi': ['error', 'never'],
            },
        },
        {
            files: ['*.vue'],
            extends: [
                'plugin:vue/recommended',
                'plugin:@typescript-eslint/recommended',
            ],
            parser: 'vue-eslint-parser',
            parserOptions: {
                parser: '@typescript-eslint/parser',
-                extraFileExtensions: ['vue'],
-                project: './tsconfig.json',
-                tsconfigRootDir: __dirname,
            },
            rules: {
                '@typescript-eslint/ban-ts-comment': 'off',
                'vue/arrow-spacing': 'error',
                'vue/block-spacing': 'error',
                'vue/brace-style': 'error',
                'vue/comma-dangle': ['error', 'always-multiline'],
                'vue/component-name-in-template-casing': ['error', 'kebab-case', {
                    registeredComponentsOnly: false,
                }],
                'vue/eqeqeq': 'error',
                'vue/html-closing-bracket-newline': 'off',
                'vue/html-indent': ['error', 4],
                'vue/html-self-closing': [
                    'error', {
                        html: { normal: 'never' },
                    },
                ],
                'vue/key-spacing': 'error',
                'vue/keyword-spacing': 'error',
                // 'vue/max-attributes-per-line': ['error', {
                //     singleline: 100,
                //     multiline: {
                //         max: 1,
                //         allowFirstLine: false,
                //     },
                // }],
                'vue/multi-word-component-names': 'off',
                'vue/multiline-html-element-content-newline': ['error', {
                    ignores: ['pre', 'textarea', 'a', 'nuxt-link'],
                }],
                'vue/no-deprecated-scope-attribute': 'error',
                'vue/no-v-for-template-key': 'off',
                'vue/no-v-html': 'off',
                'vue/object-curly-spacing': ['error', 'always'],
                'vue/script-indent': ['error', 4, { switchCase: 1 }],
                'vue/singleline-html-element-content-newline': 'off',
                'vue/space-infix-ops': 'error',
                'vue/valid-v-slot': 'error',
                'vue/v-slot-style': 'error',
            },
        },
    ],
}

@JoshuaKGoldberg I found that when I remove https://github.com/typescript-eslint/typescript-eslint/blob/3ce2549466741de3624fce6b6c9729bca60767cc/packages/typescript-estree/src/create-program/getWatchProgramsForProjects.ts#L244, the problem is gone somehow, I guess the WatchProgram cached with config file path but missed distinguish extraFileExtensions?

[rchl]

@johnsoncodehk note how those suggested changes affect the linting results when running yarn lint. One apparent difference is that semicolons are now expected in the script block.

It would be ideal if Volar wouldn't require volar-specific changes as that can affect linting from the command line (CI).

[johnsoncodehk]

It seems to be a TypeScript ESLint bug but I'm not sure, @volar-plugins/eslint differs from ESLint one of the times maybe it's the order in which .ext is processed, I think if you use ESLint CLI to process .ts inputs before .vue Inputs will have the same problem.

[JoshuaKGoldberg]

This might be a bug in typescript-eslint, yeah. Could you file an issue on us please? We'd be happy to investigate!

[johnsoncodehk]

@JoshuaKGoldberg For sure. Will take a time to make a reproduction, thank you for your reply.

[johnsoncodehk]

Closed due to @volar-plugins/eslint being replaced by @volar/eslint.

Refs: volarjs/services#72, volarjs/volar.js#171