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

[NVolcz]

Checklist

• [x] I have tried restarting my IDE and the issue persists.
• [x] 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: https://github.com/vuejs/eslint-plugin-vue/blob/16c877892ba58b2cd1e68612553c1e8c2715d8ea/lib/rules/block-lang.js#L60-L89 It seems that this assumption was valid when Vetur was used for the official vscode extension: https://github.com/vuejs/eslint-plugin-vue/blob/16c877892ba58b2cd1e68612553c1e8c2715d8ea/docs/rules/block-lang.md?plain=1#L57-L62 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 :slightly_smiling_face:

[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. https://github.com/vuejs/eslint-plugin-vue/blob/16c877892ba58b2cd1e68612553c1e8c2715d8ea/lib/rules/block-lang.js#L87

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.

[FloEdelmann]

Hmm, I think that we can remove that special handling and change the note to tell people to set allowNoLang to true (or leave it as default) if they use Vetur. But you are right that this could be considered a breaking change, so I'm fine with basing this off the v10 branch.