Mixed JS and TS - Eslint no longer throwing error for js and jsx files

Question

I have my .eslintrc.js as such:

module.exports = {
  root: true,
  parser: "@babel/eslint-parser",
  parserOptions: {
    requireConfigFile: false,
    babelOptions: {
      presets: ["@babel/preset-react"],
    },
  },
  plugins: ["react", "react-hooks"],
  rules: {
    "no-console": "off",
    "react-hooks/exhaustive-deps": "off",
    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": "off",
    "@no-restricted-globals": "off",
  },
  overrides: [
    {
      files: ["**/*.ts", "**/*.tsx"],
      env: { browser: true, es6: true, node: true },
      extends: [
        "eslint:recommended",
        "plugin:@typescript-eslint/eslint-recommended",
        "plugin:@typescript-eslint/recommended",
      ],
      parser: "@typescript-eslint/parser",
      parserOptions: {
        ecmaFeatures: { jsx: true },
        ecmaVersion: 2018,
        sourceType: "module",
        project: "./tsconfig.json",
      },
      plugins: ["@typescript-eslint"],
      rules: {
        "no-console": "off",
        "react-hooks/exhaustive-deps": "off",
        "no-unused-vars": "warn",
        "@typescript-eslint/no-unused-vars": "warn",
        "@no-restricted-globals": "off",
        "@typescript-eslint/no-explicit-any": "off",
        "@typescript-eslint/ban-ts-comment": "off",
      },
    },
  ],
};

This works fine where it throws error finely for ts and tsx files. But after setting this up, my eslint doesn't throw any error for js and jsx files anymore. How can I set it up so that it throws error for both accordingly and properly?

Answer 1

I decided to use the same parser for both my Javascript and Typescript files. My configuration now looks something like this:

module.exports = {
  root: true,
  ignorePatterns: ["node_modules", "dist", "build", ".eslintrc.js"],
  overrides: [
    {
      files: ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"],
      env: { browser: true, es6: true, node: true },
      extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
      parser: "@typescript-eslint/parser",
      parserOptions: {
        ecmaFeatures: { jsx: true },
        ecmaVersion: 2018,
        sourceType: "module",
        project: "./tsconfig.json",
      },
      plugins: ["@typescript-eslint", "react", "react-hooks"],
      rules: {
        // TURNED OFF
        "react-hooks/exhaustive-deps": "off",
        "no-console": "off",
        "@no-restricted-globals": "off",
        "no-case-declarations": "off",
        "@typescript-eslint/no-explicit-any": "off",
        "@typescript-eslint/ban-ts-comment": "off",
        "@typescript-eslint/no-var-requires": "off",

        // WARNING
        "no-unused-vars": "warn",
        "no-empty": "warn",
        "no-dupe-else-if": "warn",
        "no-unsafe-optional-chaining": "warn",
        "no-useless-escape": "warn",
        "@typescript-eslint/no-unused-vars": "warn",
        "@typescript-eslint/no-this-alias": "warn",
      },
    },
  ],
};

I'm not entirely sure this is the best practice but this works for now. If anyone has any input on this, feel free to leave a comment so I can improve my .eslintrc.js