I have the following config, custom rule, and template:
export default [
{
files: ['**/*.{js,vue}'],
languageOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
parser: vueEslintParser,
},
plugins: { example: exampleRules },
rules: {
'example/warn-something': 'warn',
}
}
]
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.parserServices.defineTemplateBodyVisitor(context, {
return {
'VAttribute[name="class"]' (node) {
console.log('found VAttribute with class attribute. node:', node)
context.report({
node,
message: 'found VAttribute with class attribute',
})
}
}
}
}
<template>
<div :class="['style-dark']"></div>
</template>
The parser does not parse the <template>
section. I'd like to find out why 'VAttribute[name="class"]' (node)
is not called.
a) Is there a way to set breakpoints and debug rules? I haven't found anything online about it.
b) Is the parser configured correctly? The docs say to use a string parser: 'vue-eslint-parser'
, but it errors. Other sources say to use an import parser: vueEslintParser
.
c) How to get access to parserServices
? I saw this used a few ways but it ends up undefined here.
Any help appreciated.
a) Is there a way to set breakpoints and debug rules? I haven't found anything online about it.
Didn't find a debugger solution but could add console logs. Need to turn caching is off or delete existing cache so any saved edits would be reloaded when running lint again.
b) Is the parser configured correctly? The docs say to use a string parser:
'vue-eslint-parser'
, but it errors. Other sources say to use an import parser: vueEslintParser.
The docs are using a string but it wasn't working and had to use an import to get it to work.
import vueEslintParser from 'vue-eslint-parser'
export default [{
languageOptions: {
parser: vueEslintParser,
c) How to get access to
parserServices
? I saw this used a few ways but it ends up undefined here.
The code snippet in the docs didn't work for some reason. Looking at existing rules and defineTemplateBodyVisitor
is wrapped by a util of the same name. Digging into it, found context.getSourceCode()
which worked.
return context.getSourceCode().parserServices.defineTemplateBodyVisitor({ ... })