feat(eslint): migrate to `ESLint` 9 flat config

[beatrizsmerino]

feat(eslint): migrate to ESLint 9 flat config

⏱️ Estimate	📊 Priority	📏 Size	📅 Start	📅 End
2h	P3	S	24-01-2026	24-01-2026

📸 Screenshots

Current	Expected
N/A — This change has no visual impact.	N/A — This change has no visual impact.

📝 Summary

• Migrate from ESLint 8 to ESLint 9
• Migrate from legacy .eslintrc.js to flat config eslint.config.js
• Update all ESLint plugins to ESLint 9 compatible versions

💡 Why this change?

• ESLint 8 is approaching end of active support; ESLint 9 is the current major version
• Flat config is the new standard; legacy .eslintrc.* format is deprecated
• Current plugins require ESLint 9 compatible versions for latest features
• .eslintignore is deprecated in favor of ignores in flat config

✅ Benefits

• Simpler, more explicit configuration without cascading confusion
• Native ESM support and better module composition
• Single configuration file replaces .eslintrc.* + .eslintignore
• Access to latest ESLint rules and plugin features

📋 Steps

Phase 1: Update ESLint and plugins

• Update ESLint to v9 as devDependencies:
  • eslint

npm install -D eslint@9

• Update ESLint plugins to ESLint 9 compatible versions as devDependencies:
  • eslint-plugin-vue
  • eslint-plugin-prettier
  • eslint-config-prettier

npm install -D eslint-plugin-vue@latest eslint-plugin-prettier@latest eslint-config-prettier@latest

• Install new required packages as devDependencies:
  • @eslint/js
  • globals

npm install -D @eslint/js globals

Phase 2: Create flat config

• Create eslint.config.js:

import eslint from "@eslint/js";
import pluginVue from "eslint-plugin-vue";
import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
import globals from "globals";

export default [
  {
    ignores: [
      "dist/**",
      "node_modules/**",
      "*.min.js",
    ],
  },
  eslint.configs.recommended,
  ...pluginVue.configs["flat/recommended"],
  eslintPluginPrettierRecommended,
  {
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.node,
      },
      ecmaVersion: "latest",
      sourceType: "module",
    },
    rules: {
      // Add your custom rules here
      "vue/multi-word-component-names": "off",
      "vue/no-v-html": "off",
      // ... migrate rules from .eslintrc.js
    },
  },
];

Phase 3: Migrate rules

• Migrate all rules from .eslintrc.js to eslint.config.js
• Update rule format where needed (some rules changed in ESLint 9)
• Remove deprecated rules

Phase 4: Update package.json scripts

• Update ESLint script (if needed):

"eslint:fix": "eslint \"**/*.{js,cjs,mjs,vue}\" --fix"

Phase 5: Clean up

• Remove .eslintrc.js file
• Remove .eslintignore file (use ignores in config)

🧪 Tests

• Verify ESLint auto-fix runs without errors:

npm run eslint:fix

• Check all files are linted correctly
• Check Vue files are linted correctly
• Test pre-commit hook works correctly

📌 Notes

• This issue requires completing the Vite migration first
• ESLint 9 is not compatible with @vue/cli-plugin-eslint
• Flat config uses ES modules, so "type": "module" is needed in package.json

🔗 References

Files to create

• eslint.config.js

Files to modify

• package.json

Files to remove

• .eslintrc.js
• .eslintignore

Documentation

• https://eslint.org/docs/latest/use/configure/configuration-files-new
• https://eslint.org/docs/latest/use/configure/migration-guide
• https://eslint.vuejs.org/user-guide/#usage

Related Issues

• feat(typescript): add TypeScript support #1059
• feat(eslint): add plugins for sorting keys and imports #1055
• feat(vite): migrate from Vue CLI to Vite #1056