How to use additional plugins? (eg, Vuetify, SonarJS, etc...)

[phoenix-oes]

I prefer to use antfu's eslint config when possible, but right now I'm migrating Vue/Vuetify 2 apps to Vue/Vuetify 3. Previously, I used the Vuetify eslint plugin, which helped catch a lot of the errors in this process.

However, antfu's eslint config doesn't come with the Vuetify plugin, and I can't see an obvious way to add it.

I found this issue, which seemed to imply I could simply add ...vuetify.configs['flat/recommended'], to the bottom of the first block in eslint.config.mjs, but now ESLint throws:

TypeError: Key "rules": Key "vuetify/grid-unknown-attributes": Could not find plugin "vuetify".

(eslint-plugin-vuetify is of course installed and vuetify is imported`)

What is the right way to add a plugin, using this config?

[phoenix-oes]

Answering my own question. Here's how I got it to work:

At the top:

import { FlatCompat } from '@eslint/eslintrc';

const compat = new FlatCompat();

At the bottom:

  // Legacy config
  ...compat.config({
    extends: [
      'plugin:sonarjs/recommended-legacy',
      'plugin:vuetify/recommended',
    ],
    rules: {
      'sonarjs/todo-tag': 'warn',
      'sonarjs/no-commented-code': 'warn',
    },
  }),
);

I don't know if this is the optimal way to do this, but it seems to work.