Module generates eslint config with the old commonJS syntax

[aleksey-hoffman]

The module generates eslint config with the old commonJS syntax

When you init a new project:

npm create vite@latest

And then setup the Vue / configure with vue-create template

Instead of generating modern .js config file with modern export default syntax, the module creates commonJS ./eslintrc.cjs file with the old commonJS module.exports = {} syntax, with a require() monkey patch at the top:

/* eslint-env node */
require("@rushstack/eslint-patch/modern-module-resolution")

module.exports = {
  root: true,
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-typescript'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  }
}

It doesn't make any sense and it's not clear why it does that. Please shine some light on this issue

[cexbrayat]

Hi @aleksey-hoffman

I'm not an expert on this, but I think it's because ESLint did not allow a flat config for a long time so this was a workaround when create-vue was initially created by @sodatea . Maybe it would be possible to do better now, I haven't checked.

If you think that can be improved, feel free to open a PR, we would gladly review and merge it 👍

[aleksey-hoffman]

@cexbrayat thanks for the reply, I suppose you are right about the workaround. Since the latest Node.js versions support modern ES syntax, and a large portion of projects are being migrated to ES syntax now, I suppose we could make this change in create-vue v4.0.0 once ESlint v9 comes out - @sodatea what do you think, mate?

ESlint v9 will have full support for ES modules

[haoqunjiang]

Let's keep an eye on https://github.com/vuejs/eslint-plugin-vue/pull/2407

[JoostKersjes]

ESLint v9 is now released and PR https://github.com/vuejs/eslint-plugin-vue/pull/2407 is merged. Seems like this can now be resolved with a PR?

[cexbrayat]

@JoostKersjes Sure, feel free to open one and we'll gladly review it, thanks! 👍

[JoostKersjes]

A new version for @vue/create-eslint-config is where most of the work lies, so this is what I've been looking into. Not sure if PR's are accepted there though.

[cexbrayat]

@JoostKersjes We're always happy to get PRs, feel free to open one

[JoostKersjes]

@cexbrayat Hey, I think the create-eslint-config PR ready for review now. Could you do that or find someone for it?

[jez9999]

I'd definitely like to see the project scaffolds using the flat config format ASAP. It greatly reduces the complexity of configuring ESLint, as well as setting a bunch of reasonable defaults the old system didn't and organizing things better. I want to get rid of the ./eslintrc.cjs in my current Vue project but I'm not exactly sure how to do it whilst retaining the same functioality and settings the current setup gives.

[Yordan-Ramchev]

If someone is in a rush to use flat config, ESLint has a migration tool https://www.npmjs.com/package/@eslint/migrate-config

[haoqunjiang]

Flat config support added in the latest release.