Skip to content

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

Open
@NVolcz

Description

@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:

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:
::: 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions