用于解析的自定义 VueJS ESLint 规则<tempate>部分不起作用

Question

我有以下配置、自定义规则和模板：

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>

解析器不会解析

<template>

部分。 我想知道为什么

'VAttribute[name="class"]' (node)

没有被调用。

a) 有没有办法设置断点和调试规则？我在网上没有找到任何相关信息。

b) 解析器配置是否正确？文档说使用字符串

parser: 'vue-eslint-parser'

，但它是错误的。其他消息来源说使用导入

parser: vueEslintParser

。

c) 如何访问

parserServices

？我看到这使用了几种方法，但它最终在这里未定义。

任何帮助表示赞赏。

Answer 1

a) 有没有办法设置断点和调试规则？我还没找到 网上有任何关于它的信息。

没有找到调试器解决方案，但可以添加控制台日志。需要关闭缓存或删除现有缓存，以便再次运行 lint 时重新加载任何保存的编辑。

b) 解析器配置是否正确？文档说使用字符串 解析器：

'vue-eslint-parser'

，但它出错了。其他消息来源说使用 导入解析器：vueEslintParser。

文档正在使用字符串，但它不起作用，必须使用导入才能使其工作。

import vueEslintParser from 'vue-eslint-parser'

export default [{
  languageOptions: {
    parser: vueEslintParser,

c) 如何访问

parserServices

？我看到这用了几种方法但是 它最终在这里未定义。

文档中的代码片段由于某种原因不起作用。查看现有规则，

defineTemplateBodyVisitor

被同名的 util 包装。 深入研究，发现

context.getSourceCode()

有效。

return context.getSourceCode().parserServices.defineTemplateBodyVisitor({ ... })