ESLint - Vue - Linting errors with HeadlessUI using "reserved" names

[OliverRC]

I have been doing some ESLint setup on an existing project and am getting errors on some of the HeadlessUI components.

Some examples

error  Name "Dialog" is reserved in HTML  vue/no-reserved-component-names
error  Name "Menu" is reserved in HTML  vue/no-reserved-component-names
error  Name "Switch" is reserved  vue/no-reserved-component-names

This is quite interesting; while it's okay for me to alias the components, it makes copying and using code a bit harder.
Ignoring the linting error also feels a little heavy-handed.
EDIT: In fact, it does not even look like you can disable this in eslint-plugin-vue
https://eslint.vuejs.org/rules/no-reserved-component-names.html
https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-reserved-component-names.js#L114

What do you think the best approach here is?

[adamwathan]

Hey! If using that lint plugin is important for your team I would just alias the components when importing. We often alias Headless UI imports in our project as HeadlessDialog for example to avoid conflicts with a styled Dialog component that uses the headless one under the hood.

[OliverRC]

Cool! Not a bad approach.
Edit: a follow up question is do you do this on ALL imports or only they ones that may conflict / fire the lint errors?

However, it does someone reduce the DX of copying Headless/TailwindUI docs code somewhat, but I guess that's the price you pay.

Maybe the deeper question (and this is more opinionated), but how do you feel about ESLint and linters?
Is it worth doing?

Right now, I am not seeing immense value, but I may not see the full picture.

[adamwathan]

We don't really use them a ton, especially nothing super opinionated. We don't actually do any Vue here aside from maintaining this library though so just haven't faced this particular pain point.

I've made a note to think about whether to just add aliased exports for everything by default, maybe that would be a nicer overall DX since even we're often aliasing things, even if it means longer component names.

[OliverRC]

I played around with aliasing, but it was not that much fun, and I didn't much care for it 😛

So, instead, I did some hacking around, and I was able to configure ESLint to modify the way it reports the reserved component names.

In .eslintrc.cjs (yes I know I need to move to new config)

module.exports = {
  root: true,
  extends: ["plugin:vue/vue3-essential", "eslint:recommended", "@vue/eslint-config-typescript", "@vue/eslint-config-prettier/skip-formatting"],
  parserOptions: {
    ecmaVersion: "latest",
  },
  rules: {
    "vue/no-reserved-component-names": "warn",
  },
};

I felt like I should keep the rule there so reduced it to a warning but you can set it to any of these (default is "error")
0 = off, 1 = warn, 2 = error

In the long run, avoiding conflicts with standard HTML elements might be nice going forward.
I don't mind longer component names too much, although you do lose some of the conciseness Headless has right now.