Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
2 tasks done
NVolcz opened this issue Nov 14, 2024 · 0 comments
Open
2 tasks done

Comments

@NVolcz
Copy link

NVolcz commented Nov 14, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant