Varying ESLint handling for mjs, js, and ts files

Question

My project uses ESM (.mjs) files for server-side code, CommonJS (.js) for tooling, and TypeScript (.ts) for the client.

When viewing CommonJS files in VS Code, errors are being shown for requires..."Require statement not part of import statement.eslint@typescript-eslint/no-var-requires."

This is a good rule for the .ts files but not for CommonJS.

Here's my ESLint config from my package.json...

 "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended",
      "@vue/typescript/recommended",
      "@vue/prettier",
      "@vue/prettier/@typescript-eslint"
    ],
    "parserOptions": {
      "ecmaVersion": 2020
    },
    "rules": {
      "prettier/prettier": [
        "error",
        {
          "semi": false
        }
      ]
    },
    "overrides": [
      {
        "files": [
          "**/__tests__/*.{j,t}s?(x)",
          "**/tests/unit/**/*.spec.{j,t}s?(x)"
        ],
        "env": {
          "jest": true
        }
      }
    ]
  },

Any thoughts as to how I should structure it applies TypeScript rules to .ts, CommonJS rules to .js and ESM rules to .msj?

Answer 1

The ESLint Docs suggest using overrides and specifying the files array for the file types you'd like to handle.