Add ESLint Processor to differentiate Vue SFC <script> langs to apply different rules, parsers, etc.

[DrJume]

Tell us about your environment

• ESLint version: 8.17.0
• eslint-plugin-vue version: 9.1.0
• Node version: 16.15.1

The problem you want to solve.

It would be awesome to be able to filter .vue with lang="ts" in ESLint overrides.
Currently, it seems to be not possible.

But if there was an ESLint Processor for Vue, it would be possible to filter for the <script> lang (or even <template>?):
https://eslint.org/docs/user-guide/configuring/plugins#specifying-processor.

Your take on the correct solution to problem.

Implement an ESLint Processor for Vue SFCs.
Something like the following could be possible?

.eslintrc.js

{
    plugin: 'vue',
    processor: 'vue/sfc-processor',
    parser: 'vue-eslint-parser', // why not 'vue/parser'?
    overrides: [
        {
            files: ['*.vue'],
            rules: {
                // ...
            }
        },
        {
            files: ['**/*.vue/*.ts'],
            parser: '@typescript-eslint/parser',
            extends: [
                'plugin:@typescript-eslint/recommended',
                'plugin:@typescript-eslint/recommended-requiring-type-checking',
            ]
        }
    ]
}

Additional context

Addresses:

• fix: get the real filename to avoid rule invalidation #1852
• Looking for champion to better support Vue in typescript-eslint #1296
• @typescript-eslint/eslint-plugin crashes when applying rules to Vue SFC <script> not parsed with @typescript-eslint/parser vue-eslint-parser#156
• fix: add overrides from eslint-recommended also for .vue files eslint-config-typescript#40

[DrJume]

Just wanted to ask, if this issue is still relevant. Will this be implemented in v10 or is it too complex? Is there anything I could help with?

[ota-meshi]

Using ESLint's processor gives the code block a virtual filename that doesn't exist, making it impossible to provide TypeScript type information. So for now I don't think using a processor will work.

For now, if you want to configure a rule with only lang="ts", I think the only way is to analyze the file yourself.

e.g.

const glob = require('fast-glob');

const scriptTs = 'lang="ts"';
const vueTsFiles = glob
  .sync(['**/*.vue', '!**/node_modules/**'], {cwd: path.resolve()})
  .filter((filePath) => fs.readFileSync(filePath, 'utf8').includes(scriptTs));

module.exports = {
  overrides: [
    ...
    {
      files: vueTsFiles,
      parser: 'vue-eslint-parser',
      parserOptions: {
        parser: '@typescript-eslint/parser',
        ...
      },
      extends: [...],
      rules: {...}
    }
  ]
};

[DrJume]

Thank you very much for your thorough answer 💚

[languanghao]

Using ESLint's processor gives the code block a virtual filename that doesn't exist, making it impossible to provide TypeScript type information. So for now I don't think using a processor will work.

For now, if you want to configure a rule with only lang="ts", I think the only way is to analyze the file yourself.

e.g.

const glob = require('fast-glob');

const scriptTs = 'lang="ts"';
const vueTsFiles = glob
  .sync(['**/*.vue', '!**/node_modules/**'], {cwd: path.resolve()})
  .filter((filePath) => fs.readFileSync(filePath, 'utf8').includes(scriptTs));

module.exports = {
  overrides: [
    ...
    {
      files: vueTsFiles,
      parser: 'vue-eslint-parser',
      parserOptions: {
        parser: '@typescript-eslint/parser',
        ...
      },
      extends: [...],
      rules: {...}
    }
  ]
};

Thank you for your answer, it works!