vuejs/eslint-plugin-vue

Erroneous `padded-blocks` violation triggered by a comment inside a function

Closed this issue · 2 comments

Checklist

  • I have tried restarting my IDE and the issue persists.
  • I have read the FAQ and my problem is not listed.

Tell us about your environment

  • ESLint version: 8.57.0, 9.29.0
  • eslint-plugin-vue version: 9.33.0, 10.2.0
  • Vue version: 3.5.16
  • Node version: 20.19.1, 22.12.0
  • Operating System: macOS / StackBlitz

Please show your full configuration:

import pluginVue from 'eslint-plugin-vue'
import stylistic from '@stylistic/eslint-plugin'
import {
  defineConfigWithVueTs,
  vueTsConfigs,
} from '@vue/eslint-config-typescript'

export default defineConfigWithVueTs(
  pluginVue.configs['flat/essential'],
  vueTsConfigs.recommendedTypeChecked,
  {
    plugins: {
      '@stylistic': stylistic,
    },
    rules: {
      '@stylistic/padded-blocks': ['error', 'never'],
      '@stylistic/semi': ['error', 'never'],
      'no-console': ['error'],
    },
  },
)

What did you do?

<script lang="ts" setup>
const test = () => {
  // eslint-disable-next-line no-console
  console.log('hello')
}
</script>

<script lang="ts">
/**
 * This docstring causes the padded-blocks rules to trigger on line 2 above.
 */
export default {}
</script>

<template>
  <div @click="test" />
</template>

What did you expect to happen?

I expected there to be no lint violations.

What actually happened?

/home/projects/stackblitz-starters-gaeg8amk/FailComponent.vue
  2:20  error  Block must not be padded by blank lines  @stylistic/padded-blocks

✖ 1 problem (1 error, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

Repository to reproduce this issue

https://stackblitz.com/edit/stackblitz-starters-gaeg8amk?file=PassComponent.vue,FailComponent.vue

This isn't reported by a vue-eslint-plugin rule.
You might want to open an issue in the eslint-stylistic repository instead.

After looking into it further, it seems to be an issue with vue-eslint-parser. The comments array is parsed in a different order—script comes before script setup, which doesn't match the user's definition. See PassingComponent and FailComponent.

As a temporary workaround, you can swap the order of the two <script> blocks. I'll investigate further and open an issue in the vue-eslint-parser repository to track this.