How to configure, develop and debug ESLint rule for VueJS

I’d like to create a custom ESLint rule for Vue, which runs inside a <template> tag.

The following questions are related to a single issue of the parser not seemingly parsing. Why this is, is unknown, and I’m looking for ways to debug it or get it to work.

a) What is the correct way to configure eslint.config.js? I saw the documentation and many examples with parser: 'vue-eslint-parser', but in my case got the following error

TypeError: Key “languageOptions”: Key “parser”: Expected object with parse() or parseForESLint() method.

However, also saw recommendations to use an import instead, for those where using a string caused an error. Here’s the config below. Should this be done differently?

import exampleRules from './example/eslint-plugin-rules.js'
import vueEslintParser from 'vue-eslint-parser'

export default [
  {
    files: ['**/*.{js,vue}'],
    languageOptions: {
      ecmaVersion: 'latest',
      sourceType: 'module',
      parser: vueEslintParser,
    },
    plugins: { example: exampleRules },

    rules: {
      'example/warn-something': 'warn',
    }
  }
]

b) How are custom rules usually developed? I did the tutorial which worked fine. I also saw RuleTester, which is good for testing a rule. But is there a way to develop, step through, and debug in say VSCode? Is there a way to see console.log statements or stop at a breakpoint?

Below is a simplified custom rule with a minimal method for handling an element with a class attribute. The context in create(context) does not seem to have parserServices, which are used by a lot of the rules in eslint-plugin-vue. I’ve seen this create method developed a couple ways: one returns an object of methods, another returns the result from defineTemplateBodyVisitor(context, {}). What is the difference?

export default {
  meta: {
    type: 'suggestion',  // Can be 'problem', 'suggestion', or 'layout'
    docs: {
      description: 'find a node with attribute class',
      category: 'Best Practices',
      recommended: false,
    },
    fixable: null, // This rule doesn't have an auto-fix.
    schema: [], // No options for this rule.
  },
  create (context) {
    // return context.getSourceCode().parserServices.defineTemplateBodyVisitor(context, {
    return {
      'VAttribute[name="class"]' (node) {
        console.log('found VAttribute with class attribute. node:', node)
      },
    }
  }
}

c) Below is a simplified Vue <template>. I believe the method 'VAttribute[name="class"]'(node) above should be invoked when traversing the AST. Does that look correct?

<template>
  <div :class="['style-dark']"></div>
</template>

I tried a slightly more complicated custom rule and template but it doesn’t seem to work, and developing/debugging does not seem straightforward. Appreciate any answers or advice.