Seems not compatible with eslint-plugin-vue

[towertop]

When I turn on eslint-plugin-diff with eslint-plugin-vue at the same time, a simple .vue file content keey reporting rule 'vue/comment-directive ' error.

From their document https://eslint.vuejs.org/rules/comment-directive.html, the problematic rule uses eslint processer API rather than other regular rules.

<template>
  <div class="a-new-table"></div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'ANewTable',
  setup() {
    return {}
  },
})
</script>
<style lang="less" scoped>
.a-new-table {
  background: black;
}
</style>

No expert on eslint and git, spend a whole hour to figure out this. Hope anyone could look into it.

[paleite]

Hi, thanks for the report.
Would you be able to provide a reproduction repo so I can investigate this further? Thanks

[levchak0910]

This plugin is implemented to work via processor, but vue plugin (same as svelte, astro, etc) have their own processor, and only 1 processor can be applied per file (not 100% sure, but most likely)

1. I tried to console.log all files which are handled by this plugins and .vue files are not amongst them

// src/preprocessors.ts
const getPreProcessor = (diffFileList, staged) => (text, filename) => {
    // ...
    console.log("getPreProcessor", shouldBeProcessed, filename);
    return shouldBeProcessed ? [text] : [];
};

2. When forcing

overrides: [
    {
      files: [ "*.vue" ],
      processor: "diff/ci",
    },
]

.vue files are handled by this plugin, but not handled by eslint-plugin-vue

@paleite do you have any ideas if it possible anyhow merge these 2 plugins together?

[cakeinpanic]

Same issue with angular preprocessor plugin:@angular-eslint/template/process-inline-templates....

[Kombuchelada]

Same issue with angular preprocessor plugin:@angular-eslint/template/process-inline-templates....

We're also getting the same issue.

[Kombuchelada]

It was an error on our side. I was seeing eslint errors from the templates but its because we didn't add the plugin:diff/ci to the *.html overrides section. duh.

[hejialianghe]

有解决这个问题么

[gtbuchanan]

I tried using eslint-merge-processors to combine the processors, but that doesn't seem to work either. The errors end up being duplicated. Example:

eslint.config.mjs

import path from 'node:path';
import { fileURLToPath } from 'node:url';
import { FlatCompat } from '@eslint/eslintrc';
import tsParser from '@typescript-eslint/parser';
import { mergeProcessors } from 'eslint-merge-processors';
import diffPlugin from 'eslint-plugin-diff';
import vuePlugin from 'eslint-plugin-vue';
import vueParser from 'vue-eslint-parser';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const compat = new FlatCompat({
  baseDirectory: __dirname,
  resolvePluginsRelativeTo: __dirname,
});

export default [
  ...vuePlugin.configs['flat/recommended'],
  ...compat.extends('plugin:diff/staged'),
  {
    files: ['**/*.vue'],
    languageOptions: {
      parser: vueParser,
      parserOptions: {
        extraFileExtensions: ['.vue'],
        parser: tsParser,
      },
    },
    // The order of these doesn't seem to matter. Neither works
    processor: mergeProcessors([
      vuePlugin.processors['.vue'],
      diffPlugin.processors.staged,
    ])
  },
];

I'll try to reproduce the problem in a separate project.

Related: vuejs/eslint-plugin-vue#2356