fix: get the real filename to avoid rule invalidation

[FuckingUsername]

Checklist

• I have tried restarting my IDE and the issue persists.
• I have read the FAQ and my problem is not listed.

Tell us about your environment

• ESLint version: 8.12.0
• eslint-plugin-vue version: 8.6.0
• Node version: 16.13.2
• Operating System: MacBook Pro/12.3

Please show your full configuration:

const { defineConfig } = require('eslint-define-config');

module.exports = defineConfig({
  root: true,
  env: {
    browser: true,
    node: true,
    es2021: true,
  },
  extends: [
    require.resolve('./es'),
    require.resolve('./vue'),
  ],
  plugins: [
    'vue',
    '@typescript-eslint',

    // This plugin is used to rename `.vue` file with `lang="js"` to `.jsvue` code-block through eslint plugin's `preprocess`
    'vue-lang',
  ],
  overrides: [
    {
      files: ['**/*.js', '**/*.jsx', '**/*.jsvue '],
      parser: 'vue-eslint-parser',
      parserOptions: {
        parser: 'espree',
        ecmaVersion: 'latest',
        sourceType: 'module',
        ecmaFeatures: {
          jsx: true,
        },
      },
    },
    {
      files: ['**/*.ts', '**/*.tsx', '**/*.vue'],
      parser: 'vue-eslint-parser',
      parserOptions: {
        parser: '@typescript-eslint/parser',
        project: './tsconfig.json',
        extraFileExtensions: ['.vue'],
        ecmaVersion: 'latest',
        sourceType: 'module',
        ecmaFeatures: {
          jsx: true,
        },
      },
      extends: [
        require.resolve('./typescript'),
      ],
    },
  ],
});

What did you do?

Our projects are migrating from JS to TS in stages, at the stage where Vue files exist with both languages, it is difficult to set up an ESLint configuration that includes TS rules, so i rename .vue file with lang="js" to .jsvue code-block through the eslint-plugin's preprocess hook, then we can apply the rules separately.

What did you expect to happen?

I hope the eslint-plugin-vue can verify the .jsvue code-block normally, because i specified that the .jsvue code-block is parsed with the vue-eslint-parser.

What actually happened?

The following rules are invalid

• vue/require-direct-export
• vue/multi-word-component-names
• vue/html-indent

Why this happened?

The above rules are invalid because they are not considered to be in the Vue file.

Because the eslint-plugin-vue use the context.getFilename() to get the filename, and uses it as a condition for judging whether it is a Vue file, but exceptions may be caused in the following cases:

• Use the eslint-plugin's preprocess hook to rename the code-block:

  const processor = {
    preprocess(text, filename) {
      // ...
      const isTSLang = false;
  
      if (isTSLang) {
        return vueProcessor.preprocess(text)
      }
  
      return [{
        text,
        filename: filename.replace(/\.vue$/, `.jsvue`), // change ext
      }];
    },
  };

  In this case, the filename obtained by context.getFilename() is **/*.jsvue, which results in eslint-plugin-vue being judged as not a Vue file.

• Use the ESLint CLI to lint text, in this case, the filename obtained by context.getFilename() is <input> or <text>, if not specified.

How to fix

Since [email protected], the context.getPhysicalFilename() method is provided to the user to obtain t the full path of the file on disk without any code block information, we can use the context.getPhysicalFilename() method to avoid misjudging the file as not a Vue file.

References

• Expose true filename to rules eslint/eslint#11989
• Use getPhysicalFilename() instead of getFilename() if available (ESLint 7.28+) import-js/eslint-plugin-import#2160

[ota-meshi]

I think this change will not work in markdown. So we can't merge this change.
I think you have your own plugin, so I think it's a good idea to implement new rules there.

[FuckingUsername]

i think the rules should compatible with virtual filenames，if i specify other file types to use vue parser

[ota-meshi]

I'm not sure what you want to claim.
When used with eslint-plugin-markdown, the block's virtual filename extension uses .vue.

[FuckingUsername]

the block-code can re-specify the extension. If it is specified as a non-vue extension, but still use vue parsing, some rules are invalid because the extension is not .vue