search

EvgenyOrekhov / eslint-config-hardcore

The most strict (yet practical) ESLint config. 53 plugins. 1342 rules. React, Vue, Node, and pure JS/TS.
https://www.npmjs.com/package/eslint-config-hardcore
MIT License
416 stars 13 forks source link

Do not recommend default exports #847

Closed EvgenyOrekhov closed 10 months ago

EvgenyOrekhov commented 10 months ago

export default should be banned completely, but unfortunately many frameworks rely on it.

Even though import/no-default-export rule remains disabled, I recommend avoiding default exports, if possible.

Reasons:

  1. If default exported name doesn't match file name
    1. autocomplete doesn't work
    2. confusion increases
  2. If a module has both named exports and a default export
    1. confusion increases
  3. You can export the same thing as a named export and as a default export
    1. if you want to increase clutter and confusion, sure why not?
  4. If you used default export but then had to export another thing, you either have to use named exports together with a default export, or you have to change default export to a named export
    1. if you love refactoring...
  5. If declaration and default export are separate
    1. good luck connecting the dots
  6. Have to use .default in some cases (like with dynamic import())
  7. You can accidentally use a different name in each import site
    1. I don't blame you

Ref #846 Ban default exports

EvgenyOrekhov commented 10 months ago

Hello @alexkramer98!

Would appreciate your input on default exports in Vue 3/Nuxt 3.

I can see at least one rule that requires you to use export default - vue/require-direct-export.

  1. Is vue/require-direct-export rule valid for single-file components only? Or for other types of components and Vue modules as well?
  2. What about Nuxt? Does it recommend using export default?
  3. Should we just disable the import/no-default-export rule for Vue 3/Nuxt 3 entirely, or only for some specific files/folders?
alexkramer98 commented 10 months ago

Hi! Off the top of my head, the default export is only a convention in Vue files. For other files, such as composables, it's optional. This is the case for both Vue and Nuxt. There might be other exceptions that I'm overlooking right now so I'll try to get back to you about that tomorrow.

alexkramer98 commented 10 months ago

I haven't found any other exceptions when it comes to Vue. With Nuxt, for the server directory (api, middleware, routes, plugins), they do use a default export in the documentation, but not for server/utils for example.

For both Vue and Nuxt, single file components can either be defined using the composition api or the options api. The composition api uses no export at all, and the options api uses a default export.

I would recommend to either disable import/no-default-export for Vue/Nuxt all together, or to disable the rule for .vue files and the server directory. I believe vue/require-direct-export is appropriate where the default export is used.