Bug: <template> cannot be placed not in first place of SFC

[Grawl]

If I place <template> tag in first place of SFC, eslint-plugin-vue-pug-sfc shows me the right error in the right place. I'm very happy to finally lint my Pug code in Vue SFC!

But if I place <template> after <script>, error shows me the wrong place of lint warning. It shows the place where warning will be if template placed on the first place of SFC.

Info

Tool	Version
Plugin	1.0.0-alpha.15
Eslint	v6.8.0
Node	v14.18.0
OS	mac

Eslint config

module.exports = {
	root: true,
	env: {
		node: true,
	},
	parserOptions: {
		parser: 'babel-eslint',
	},
	extends: [
		'plugin:vue/vue3-essential',
		'eslint:recommended',
		'plugin:vue-pug-sfc/recommended',
	],
	plugins: [
		'vue',
	],
}

Input

<script>
import { defineComponent } from 'vue'

export default defineComponent({
	data: () => ({
		list: [
			'a', 'b', 'c',
		],
	}),
})
</script>
<template lang='pug'>
div
	span(v-for='item in list') {{ item }}
</template>

Output or Error

error: Elements in iteration expect to have 'v-bind:key' directives (vue-pug-sfc/require-v-for-key) at src/App.vue:3:7:
  1 | <script>
  2 | import { defineComponent } from 'vue'
> 3 |
    | ^
  4 | export default defineComponent({
  5 |   data: () => ({
  6 |           list: [

Expected Output

error: Elements in iteration expect to have 'v-bind:key' directives (vue-pug-sfc/require-v-for-key) at src/App.vue:14:7:


  12 | <template lang='pug'>
  13 | div
> 14 | 	span(v-for='item in list') {{ item }}
             ^
  15 | </template>

Additional Context

I created a repository to demonstrate this bug (and other/future bugs maybe), here is two commits I pushed:

1. init shows the right place of lint warning because template tag is placed on the first place
2. demonstrate eslint-plugin-vue-pug-sfc bug shows misplaced lint warning because template tag is placed after script

[Shinigami92]

Are you interested in creating a PR and take credits to fix this bug? 🙂

[Grawl]

I am not sure I can fix this by myself

[Shinigami92]

@Grawl I would assume it has something todo with this part

eslint-plugin-vue-pug-sfc/src/utils/index.ts

Lines 198 to 231 in afec94f

	let start: number = pugTemplateElement.startTag.range[1];
	if (pugTokens[0]?.type === 'newline') {
	start++;
	}
	let end: number = start;
	for (let index: number = 0; index < pugTokens.length; index++) {
	const token: lex.Token = pugTokens[index]!;
	const previousToken: lex.Token | undefined = pugTokens[index - 1];
	if (previousToken) {
	if (token.loc.start.line !== previousToken.loc.end.line) {
	// Take `\n` and attribute wrapping into account
	start += token.loc.start.column;
	if (previousToken.type === 'attribute') {
	start++;
	}
	} else {
	const diff: number = token.loc.start.column - previousToken.loc.end.column;
	// Take attribute separators and such into account
	start += diff;
	}
	}
	end = start + tokenLength(token, previousToken);
	// @ts-expect-error: Add range to token
	token.range = [start, end];
	//// @ts-expect-error: Access range
	// console.log(token.type, token.range, rawText.slice(start, end));
	start = end;

[Shinigami92]

Please try https://github.com/Shinigami92/eslint-plugin-vue-pug-sfc/releases/tag/1.0.0-alpha.17

[Grawl]

I can confirm this bug is fixed https://github.com/Grawl/eslint-plugin-vue-pug-sfc-demo/tree/476454ac8929f776db25cbfe4bed99e2d35ec95c