vue/block-lang do not support enforcement of lang attritbutes for default langauges

[NVolcz]

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: 9.11.1
• eslint-plugin-vue version: 9.28.0
• Vue version: 3.5.10
• Node version: v20.14.0
• Operating System: Ubuntu
• vscode: 1.95.2

Please show your full configuration:

import { includeIgnoreFile } from "@eslint/compat";
import js from "@eslint/js";
import eslintConfigPrettier from "eslint-config-prettier";
import tailwind from "eslint-plugin-tailwindcss";
import pluginVue from "eslint-plugin-vue";
import globals from "globals";
import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const gitignorePath = path.resolve(__dirname, ".gitignore");

export default [
  {
    files: ["src/**/*.js", "src/**/*.vue"],
  },
  includeIgnoreFile(gitignorePath),
  js.configs.recommended,
  ...pluginVue.configs["flat/recommended"],
  ...tailwind.configs["flat/recommended"],
  eslintConfigPrettier,
  {
    languageOptions: {
      globals: {
        ...globals.node,
      },
    },
    rules: {
      "no-unused-vars": "warn",
      "tailwindcss/no-custom-classname": "off",
      "vue/no-v-html": "off",
      "vue/multi-word-component-names": "off",
      "vue/block-lang": [
        "error",
        {
          script: {
            lang: "js",
          },
        },
      ],
    },
  },
];

What did you do?
When using vscode with the "Vue - official" (vue.volar) extension in a Vite setup the Intellisense does not assume that the default language is JavaScript. In order to work around this limitation I was thinking of using the 'vue/block-lang` to enforce that a language is specified for every script block.

Formatting files like:

<script setup lang="js">
</script>

What did you expect to happen?
I expected rule to honor my settings to require script blocks to specify lang="js".

What actually happened?

The rule outputs errors regarding the default language is specified:

  11:15  error  Do not explicitly specify the default language for the 'lang' attribute of '<script>'  vue/block-lang

Based on my understanding of the rule's code, if an default language is specified, then omitting the language is preferred:

eslint-plugin-vue/lib/rules/block-lang.js

Lines 60 to 89 in 16c8778

	function normalizeOption(blockName, option) {
	/** @type {Set<string>} */
	let lang
	if (Array.isArray(option.lang)) {
	lang = new Set(option.lang)
	} else if (typeof option.lang === 'string') {
	lang = new Set([option.lang])
	} else {
	lang = new Set()
	}
	let hasDefault = false
	for (const def of DEFAULT_LANGUAGES[blockName] || []) {
	if (lang.has(def)) {
	lang.delete(def)
	hasDefault = true
	}
	}
	if (lang.size === 0) {
	return {
	lang,
	allowNoLang: true
	}
	}
	return {
	lang,
	allowNoLang: hasDefault || Boolean(option.allowNoLang)
	}
	}

It seems that this assumption was valid when Vetur was used for the official vscode extension:

eslint-plugin-vue/docs/rules/block-lang.md

Lines 57 to 62 in 16c8778

	::: warning Note
	If the default language is specified for `lang` option of `<template>`, `<style>` and `<script>`, it will be enforced to not specify `lang` attribute.
	This is to prevent unintended problems with [Vetur](https://vuejs.github.io/vetur/).
	See also [Vetur - Syntax Highlighting](https://vuejs.github.io/vetur/guide/highlighting.html).
	:::

It would be nice if the Vue vscode extension were better at handling the lang attribtue but I also feel that this rule shouldn't be as opinionated as it is now.

Repository to reproduce this issue

[waynzh]

the Intellisense does not assume that the default language is JavaScript.

In my personal use case, I've never encountered this. If the lang attribute is not specified, it defaults to js. Perhaps you could provide a reproduction for Vue - Official as well, as it might be a bug there.

As for the vue/block-lang rule, we could probably consider not validating whether it duplicates the default value anymore, since we don't need to be compatible with Vue 2's vetur in v10? @FloEdelmann What do you think?

[FloEdelmann]

I don't think that adding lang="js" should be the default when enabling this rule, because it looks so similar to lang="ts". Having a clear visual distinction between these two is quite useful in my opinion.

However, I think that it should already be possible to enforce always adding the lang attribute with the allowNoLang rule option, isn't it?

I agree the docs are not super clear about this, so a PR to improve them is certainly welcome 🙂

[waynzh]

I don't think that adding lang="js" should be the default when enabling this rule

I agree. So, the issue that @NVolcz must add lang=“js” explicitly to make Volar recognize it as js file can be reported to them.

enforce always adding the lang attribute with the allowNoLang rule option, isn't it?

Actually, no. The test case in the following image is incorrect.

Because If the value of lang is the default value, such as lang="js", it would override the user's allowNoLang: false config.

eslint-plugin-vue/lib/rules/block-lang.js

Line 87 in 16c8778

allowNoLang: hasDefault || Boolean(option.allowNoLang)

According to the documentation's note, this is due to compatibility with vetur. So, the current point of enhancement is whether we should consider refactoring this part of the logic, that is, not considering whether it duplicates the default value.