[bug] insert custom ESlint rules in eslint.config.ts can not work

[gaomingzhao666]

Hey, everyone.

I created a simple skeleton vue3/vite app with a little bit basic component Header.vue and Navbar.vue, and the rule multi-word-component-names is set as error as default, so the Header.vue actually throwed a error, I want to change the rule as off, here is my code in eslint.config.ts:

❌can not work

import { globalIgnores } from 'eslint/config'
import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
import pluginVue from 'eslint-plugin-vue'
import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'

// To allow more languages other than `ts` in `.vue` files, uncomment the following lines:
// import { configureVueProject } from '@vue/eslint-config-typescript'
// configureVueProject({ scriptLangs: ['ts', 'tsx'] })
// More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup

export default defineConfigWithVueTs(
  {
    name: 'app/files-to-lint',
    files: ['**/*.{ts,mts,tsx,vue}'],
  },
    // custom eslint rules
  {
    rules: {
      'vue/multi-word-component-names': 'off',
    },
  },

  globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),

  pluginVue.configs['flat/essential'],
  vueTsConfigs.recommended,
  skipFormatting,
)

The code above can not work properly, and I found it's only be work properly when I put the custom rules object in ABOSOLUTE RIGHT back to vueTsConfigs.recommended as the code below after I searched something on Google:

✔can work

import { globalIgnores } from 'eslint/config'
import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
import pluginVue from 'eslint-plugin-vue'
import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'

// To allow more languages other than `ts` in `.vue` files, uncomment the following lines:
// import { configureVueProject } from '@vue/eslint-config-typescript'
// configureVueProject({ scriptLangs: ['ts', 'tsx'] })
// More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup

export default defineConfigWithVueTs(
  {
    name: 'app/files-to-lint',
    files: ['**/*.{ts,mts,tsx,vue}'],
  },

  globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),

  pluginVue.configs['flat/essential'],
  vueTsConfigs.recommended,

  // custom eslint rules
  {
    rules: {
      'vue/multi-word-component-names': 'off',
    },
  },
  skipFormatting,
)

Must be right back of vueTsConfigs.recommended can be work, even in back of but not right back of can not work like the code below:

❌ can not work

import { globalIgnores } from 'eslint/config'
import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
import pluginVue from 'eslint-plugin-vue'
import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'

// To allow more languages other than `ts` in `.vue` files, uncomment the following lines:
// import { configureVueProject } from '@vue/eslint-config-typescript'
// configureVueProject({ scriptLangs: ['ts', 'tsx'] })
// More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup

export default defineConfigWithVueTs(
  {
    name: 'app/files-to-lint',
    files: ['**/*.{ts,mts,tsx,vue}'],
  },

  globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),

  pluginVue.configs['flat/essential'],
  vueTsConfigs.recommended,
  skipFormatting,

    // custom eslint rules
  {
    rules: {
      'vue/multi-word-component-names': 'off',
    },
  },
)

Is it a bug or just regulated as it, kindly thanks for every comment and help.

[gaomingzhao666]

Here is my package.json, I created this project just few days ago so I don't think there have something compatibility problems.

    {
      "name": "reservation-app",
      "version": "0.0.0",
      "private": true,
      "type": "module",
      "scripts": {
        "dev": "vite",
        "build": "run-p type-check \"build-only {@}\" --",
        "preview": "vite preview",
        "build-only": "vite build",
        "type-check": "vue-tsc --build",
        "lint": "eslint . --fix",
        "format": "prettier --write src/"
      },
      "dependencies": {
        "@tailwindcss/vite": "^4.1.5",
        "@vueuse/core": "^13.1.0",
        "clsx": "^2.1.1",
        "pinia": "^3.0.2",
        "tailwind-merge": "^3.2.0",
        "tailwindcss": "^4.1.5",
        "vue": "^3.5.13",
        "vue-router": "^4.5.1"
      },
      "devDependencies": {
        "@tsconfig/node22": "^22.0.1",
        "@types/node": "^22.15.3",
        "@vitejs/plugin-vue": "^5.2.3",
        "@vue/eslint-config-prettier": "^10.2.0",
        "@vue/eslint-config-typescript": "^14.5.0",
        "@vue/tsconfig": "^0.7.0",
        "eslint": "^9.26.0",
        "eslint-plugin-vue": "~10.1.0",
        "jiti": "^2.4.2",
        "npm-run-all2": "^8.0.1",
        "prettier": "3.5.3",
        "tw-animate-css": "^1.2.9",
        "typescript": "~5.8.3",
        "vite": "^6.3.4",
        "vite-plugin-vue-devtools": "^7.7.6",
        "vue-tsc": "^2.2.10"
      }
    }

[xuxing409]

same error

[fewbadboy]

✔can work in my ENV

import { globalIgnores } from 'eslint/config'
import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
import pluginVue from 'eslint-plugin-vue'
import pluginVitest from '@vitest/eslint-plugin'
import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'

export default defineConfigWithVueTs(
  {
    name: 'app/files-to-lint',
    files: ['**/*.{ts,mts,tsx,vue}'],
  },

  // @ts-ignore
  globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),

  pluginVue.configs['flat/essential'],
  vueTsConfigs.recommended,

  {
    ...pluginVitest.configs.recommended,
    files: ['src/**/__tests__/*'],
  },
  skipFormatting,

  {
    rules: {
      '@typescript-eslint/no-explicit-any': 'off',
      '@typescript-eslint/no-unused-expressions': 'off',
      '@typescript-eslint/no-empty-object-type': 'off',
      '@typescript-eslint/no-unused-vars': 'off',
      'vue/no-unused-vars': ['off'],
      'vue/multi-word-component-names': ['off'],
      'vue/html-self-closing': [
        'error',
        {
          html: {
            void: 'always',
            normal: 'never',
            component: 'always',
          },
          svg: 'always',
          math: 'always',
        },
      ],
    },
  },
)