Parsing error: Unexpected token . eslint

[thisVioletHydra]

Describe the bug

Dear @antfu pls help me understand how to conver my old eslint config (vue) to new flat version, I tried using the minimum number of rules, when testing everything works like a diamond, but when testing vue sfc files, eslint catches an error Parsing error: Unexpected token . eslint i use SFC script setup +typescript +postcss

see Reproduction repo

old worked conf

/**
     * -----------------------
     * RULES FOR VUE3
     * -----------------------
     */

require('@rushstack/eslint-patch/modern-module-resolution');
const path = require('node:path');
const _tsconfig = require('./tsconfig.json');
const _alias = _tsconfig.compilerOptions.paths;
const arrayType = ['.js', '.mjs', '.jsx', '.ts', '.d.ts', '.tsx', '!.json'];

module.exports = {
  root: true,

  overrides: [{
    rules: {

      'vue/max-attributes-per-line': 0,
      'perfectionist/sort-vue-attributes': 0,
      'vue/singleline-html-element-content-newline': 0,
      'vue/html-self-closing': [
        1,
        {
          html: {
            void: 'always',
            normal: 'never',
            component: 'always',
          },
          svg: 'always',
          math: 'always',
        },
      ],
      'id-length': [2, { exceptions: ['f', 't'] }],

      'unicorn/prevent-abbreviations': 0,

    },
    env: {
      browser: true,
      es6: true,
      node: true,
      jest: true,
      'vue/setup-compiler-macros': true,
    },
    files: ['*.vue', '*.html'],
    parser: 'vue-eslint-parser',
    parserOptions: {
      extraFileExtensions: ['.vue'],
      sourceType: 'module',
      ecmaVersion: 'latest',
      parser: '@typescript-eslint/parser',
      ecmaFeatures: { jsx: true },
      project: path.resolve(__dirname, 'tsconfig.json'),
      tsconfigRootDir: path.resolve(__dirname),
      '<i18n>': '@typescript-eslint/parser',
    },
    extends: [
      'plugin:vue/vue3-recommended',
      'plugin:vue/vue3-essential',
      '@vue/eslint-config-typescript/recommended',
    ],
    plugins: ['unicorn', 'import', 'promise', 'vue'],
    settings: {
      'import/parsers': { '@typescript-eslint/parser': ['.ts', '.tsx'] },

      'import/extensions': arrayType,
      'import/resolver': {
        typescript: {
          alwaysTryTypes: true,
          project: './tsconfig.json',
        },
        alias: true,

        node: { extensions: arrayType },

        'eslint-import-resolver-custom-alias': {
          alias: _alias,
          extensions: arrayType,
        },
      },

      'prettier-vue': {
        SFCBlocks: {
          template: true,
          script: true,
          style: true,

          customBlocks: {
            docs: { lang: 'markdown' },
            config: { lang: 'json' },
            module: { lang: 'js' },
            comments: false,
          },
        },
        usePrettierrc: true,

        fileInfoOptions: {
          withNodeModules: false,
        },
      },
    },
  },],
}  

new flat

 import { parseForESLint as tsParser } from '@typescript-eslint/parser';
import { parseForESLint as vueParser } from 'vue-eslint-parser';

export default antfu(

  {
    languageOptions: {
      // parser: (code, options) => vueParser(code, options),

      parserOptions: {
        // parser: vueParser,
        // parser: tsParser,
        // parser: 'vue-eslint-parser',

        // extraFileExtensions: ['.vue'],
        // sourceType: 'module',
        // ecmaVersion: 'latest',
        // parser: '@typescript-eslint/parser',
      },
    },
    files: ['**/*.vue'],
    ignores: ['**/*.css', '**/*.scss', '**/*.sass', '**/*.less', '**/*.stylus', '**/*.styl', '**/*.pcss', '**/*.postcss'],
    rules: {
      'style/indent': [0],
      'vue/script-indent': [2, 2, { baseIndent: 1 }],
      'vue/html-indent': [2, 2, { baseIndent: 1 }],
      'vue/attributes-order': [
        2,
        {
          alphabetical: false,
          order: [
            'DEFINITION',
            'LIST_RENDERING',
            'CONDITIONALS',
            'RENDER_MODIFIERS',
            'GLOBAL',
            ['UNIQUE', 'SLOT'],
            'TWO_WAY_BINDING',
            'OTHER_DIRECTIVES',
            'OTHER_ATTR',
            'EVENTS',
            'CONTENT',
          ],
        },
      ],
      'vue/block-tag-newline': [2],
      'vue/component-name-in-template-casing': [
        2,
        'PascalCase',
        {
          ignores: ['component', 'client-only', 'keep-alive'],
          registeredComponentsOnly: true,
        },
      ],
      'vue/component-tags-order': [2, { order: ['template', 'script', 'style'] }],
      'vue/block-order': [2, { order: ['template', 'script', 'style'] }],
      'vue/html-comment-content-spacing': [2, 'always', { exceptions: ['*'] }],
      'vue/multi-word-component-names': [0, { ignores: [] }],
      'vue/no-template-key': [2],
      'vue/no-unsupported-features': [2],
      'vue/no-unused-vars': [0],
      'vue/no-useless-v-bind': [
        2,
        {
          ignoreIncludesComment: false,
          ignoreStringEscape: false,
        },
      ],
      'vue/no-v-for-template-key': [0],
      'vue/no-v-for-template-key-on-child': [0],
      'vue/padding-line-between-blocks': [2],
      'vue/prefer-template': [2],
      'vue/require-v-for-key': [2],

      'vue/script-setup-uses-vars': [1],
      'vue/v-on-function-call': [2, 'never', { ignoreIncludesComment: false }],
      'vue/valid-v-for': [2],
    },
  };
}
)

Reproduction

https://github.com/thisVioletHydra/flat-eslint-and-postcss

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (12) x64 Intel(R) Core(TM) i7-10750H CPU @ 2.60GHz
    Memory: 6.12 GB / 15.83 GB
  Binaries:
    Node: 20.11.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.15.1 - C:\ProgramData\chocolatey\bin\pnpm.EXE
  Browsers:
    Edge: Chromium (121.0.2277.112)
    Internet Explorer: 11.0.22621.1

Used Package Manager

pnpm

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guide.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• [X] The provided reproduction is a minimal reproducible of the bug.

[thenbe]

Generally, you should only need to bring over your rules from your old config, the rest of the boilerplate can be discarded. Example of where to place your custom rules for vue files: https://github.com/lainbo/vite-base-lite/blob/9d5719c5d0e5acfc410e3c6ce908e2174a32cacd/eslint.config.js#L3-L13

Also see this section in the docs about the overrides key.

More examples here: https://github.com/search?type=code&q=path%3Aeslint.config.js+antfu+%2Ffiles.*vue%2F

[thisVioletHydra]

its strange i removed eslint-ts-patch from my project i renamed back eslint.config.ts to .JS format and vue parser now work i think issue done... 🤔