Support `eslint-plugin-vue`'s disable comments

[FloEdelmann]

In Vue Single File Components (*.vue files), "HTML comments" can be used to disable ESLint rules: https://eslint.vuejs.org/rules/comment-directive.html

<template>
  <!-- eslint-disable-next-line vue/max-attributes-per-line -->
  <div a="1" b="2" c="3" d="4" />
</template>

Unfortunately, those comments are not detected by eslint-plugin-eslint-comments.

(Note: This issue is the same as #136, which was auto-closed as stale without a warning, but is still relevant.)

[GrantGryczan]

This applies to CSS, SCSS, etc. linting in Vue too, by the way.

<template></template>

<style scoped>
/* eslint-disable-next-line vue-scoped-css/require-selector-used-inside */
.unused {
  filter: brightness(0);
}
</style>

<style scoped lang="scss">
// eslint-disable-next-line vue-scoped-css/require-selector-used-inside
.also-unused {
  filter: brightness(0);
}
</style>

This should, but currently doesn't, warn for the missing reasons on both eslint-disable comments.

[KonstantinFilipov]

I had the same need - reporting the use of HTML comments inside .vue files.
Unfortunately, it seems the creator may have had different intentions, so someone will need to evaluate exactly what changes should be made.
Here is my fix:

eslint-plugin-eslint-comments/lib/internal/get-all-directive-comments.js

Lines 61 to 112 in dbe7edb

	return result.concat(
	sourceCode
	.getInlineConfigNodes()
	.map((node) => ({
	node,
	range: sourceCode.getRange(node),
	}))
	.filter(
	({ range }) =>
	// The node has intersection of the directive comment.
	// So, we need to skip it.
	!result.some(
	(comment) =>
	comment.range[0] <= range[1] &&
	range[0] <= comment.range[1]
	)
	)
	.map(({ node, range }) => {
	const nodeText = sourceCode.text.slice(range[0], range[1])
	const commentValue = extractCommentContent(nodeText)
	const directiveComment = utils.parseDirectiveText(commentValue)
	return {
	directiveComment,
	node,
	range,
	}
	})
	.filter(
	({ directiveComment }) =>
	directiveComment != null &&
	![
	"eslint-disable",
	"eslint-disable-line",
	"eslint-disable-next-line",
	"eslint-enable",
	].includes(directiveComment.kind)
	)
	.map(
	({ directiveComment, node, range }) =>
	/** @type {DirectiveComment} */ ({
	kind: directiveComment.kind,
	value: directiveComment.value,
	description: directiveComment.description,
	node,
	range,
	get loc() {
	return sourceCode.getLoc(node)
	},
	})
	)
	)

    return result.concat(
        sourceCode
            .getInlineConfigNodes()
            .concat(sourceCode.ast.templateBody.comments) // <-- add line: to append all html comments to the result
            .map((node) => ({
                node,
                range: sourceCode.getRange(node),
            }))
            .filter(
                ({ range }) =>
                    // The node has intersection of the directive comment.
                    // So, we need to skip it.
                    !result.some((comment) => comment.range[0] <= range[1] && range[0] <= comment.range[1]),
            )
            .map(({ node, range }) => {
                const nodeText = sourceCode.text.slice(range[0], range[1]);
                const commentValue = extractCommentContent(nodeText);
                const directiveComment = utils.parseDirectiveText(commentValue);

                return {
                    directiveComment,
                    node,
                    range,
                };
            })
            .filter(({ directiveComment }) => {
                return (
                    directiveComment != null &&
                        ['eslint-disable', 'eslint-disable-line', 'eslint-disable-next-line', 'eslint-enable']  // <-- change: we need the comments that include disable, not exclude, so "!" is removed
                        .includes(
                            directiveComment.kind,
                        )
                );
            })
            .map(
                ({ directiveComment, node, range }) =>
                /** @type {DirectiveComment} */ ({
                    kind: directiveComment.kind,
                    value: directiveComment.value,
                    description: directiveComment.description,
                    node,
                    range,
                    get loc() {
                    return sourceCode.getLoc(node);
                    },
                }),
            ),
    );