VSCode EsLint Extension Does Not Lint in JS Files in a Mixed Next.JS Project, but next lint and Husky Work

Question

For context, our project is a Next.JS project with mostly JavaScript files, and a few scattering of random TypeScript Files, mostly in our API folder. Recently we set up Husky to pre-commit our git commits, and some of the settings changed and while next lint correctly lints, and our Husky settings work with both types of files, the VSCode extension for EsLint no longer works on JavaScript files. While removing plugin:@typescript-eslint/recommended fixes that issue, next lint and husky then fails with TS files.

eslintrc.json:

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:prettier/recommended",
    "plugin:@next/next/recommended",
    "plugin:import/recommended",
    "prettier",
    "plugin:@typescript-eslint/recommended"
  ],
  "settings": {
    "react": {
      "version": "detect"
    },
    "import/resolver": {
      "typescript": {}
    }
  },
  "plugins": ["react", "prettier"],
  "rules": {
    "react/prop-types": 0,
    "react/react-in-jsx-scope": "off",
    "react/display-name": "off",
    "no-unused-vars": 2,
    "no-undef": 2,
    "import/order": [
      "error",
      {
        "groups": ["builtin", "external", "internal"],
        "pathGroups": [
          {
            "pattern": "react",
            "group": "external",
            "position": "before"
          },
          {
            "pattern": "next/*",
            "group": "external",
            "position": "before"
          }
        ],
        "pathGroupsExcludedImportTypes": ["react", "next/*"],
        "alphabetize": {
          "order": "asc",
          "caseInsensitive": true
        }
      }
    ],
    "prettier/prettier": [
      "error",
      {
        "endOfLine": "auto"
      }
    ]
  },
  "globals": {
    "React": "writable"
  },
  "env": {
    "browser": true,
    "node": true,
    "es6": true,
    "jest": true
  },
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  }
}

package.json:

{
  "name": "our-organization",
  "version": "2.0.0",
  "private": true,
  "scripts": {
    "dev": "next dev && next export",
    "build": "next build",
    "start": "NODE_ENV=production next start -p 8080",
    "lint": "next lint",
    "prettier-fix": "prettier --write .",
    "find:unused": "npx next-unused",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook",
    "test": "jest --json --outputFile=./test-results/report.json",
    "prepare": "husky install"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "**/*.{js,jsx,ts,tsx}": [
      "next lint .",
      "prettier --write ."
    ]
  },
  "dependencies": {
    "@analytics/google-analytics": "^0.5.2",
    "@apollo/client": "^3.4.15",
    "@contentful/rich-text-plain-text-renderer": "^15.6.2",
    "@contentful/rich-text-react-renderer": "^15.3.6",
    "@emotion/cache": "^11.5.0",
    "@emotion/react": "^11.5.0",
    "@emotion/server": "^11.4.0",
    "@emotion/styled": "^11.3.0",
    "@mui/icons-material": "^5.0.1",
    "@mui/lab": "^5.0.0-alpha.48",
    "@mui/material": "^5.0.3",
    "@mui/styles": "^5.0.1",
    "@mui/x-data-grid": "^5.0.1",
    "@testing-library/user-event": "^13.2.1",
    "algoliasearch": "^4.10.5",
    "analytics": "^0.7.14",
    "apollo-link-rest": "^0.8.0-beta.0",
    "bad-words": "^3.0.4",
    "contentful": "^9.0.0",
    "date-fns": "^2.25.0",
    "dateformat": "^4.5.1",
    "formik": "^2.2.9",
    "graphql": "^15.6.0",
    "graphql-anywhere": "^4.2.7",
    "javascript-time-ago": "^2.3.8",
    "next": "^11.1.2",
    "next-instantsearch": "^0.3.15",
    "qs": "^6.10.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-iframe": "^1.8.0",
    "react-instantsearch-dom": "^6.22.0",
    "react-markdown": "^7.0.1",
    "react-player": "^2.9.0",
    "react-scripts": "^5.0.0",
    "react-share": "^4.4.0",
    "react-show-more-text": "^1.5.0",
    "react-to-print": "^2.13.0",
    "serverless-mysql": "^1.5.4",
    "sharethis-reactjs": "^1.6.0",
    "swr": "^1.0.1",
    "universal-cookie": "^4.0.4",
    "yup": "^0.32.9"
  },
  "devDependencies": {
    "@babel/core": "^7.15.5",
    "@babel/plugin-proposal-export-default-from": "^7.14.5",
    "@next/eslint-plugin-next": "^11.1.2",
    "@storybook/addon-actions": "^6.3.10",
    "@storybook/addon-essentials": "^6.3.10",
    "@storybook/addon-jest": "^6.3.10",
    "@storybook/addon-links": "^6.3.10",
    "@storybook/react": "^6.3.10",
    "@testing-library/dom": "^8.5.0",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^12.1.0",
    "@typescript-eslint/eslint-plugin": "^5.11.0",
    "babel-jest": "^27.2.0",
    "babel-loader": "^8.2.2",
    "babel-plugin-react-require": "^3.1.3",
    "eslint": "^7.32.0",
    "eslint-config-next": "^12.0.10",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.24.2",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.25.1",
    "husky": "^7.0.4",
    "jest": "^27.2.0",
    "jest-html-reporters": "^2.1.6",
    "jest-transform-graphql": "^2.1.0",
    "lint-staged": "^12.1.2",
    "prettier": "^2.4.0",
    "tsconfig-paths-webpack-plugin": "^3.5.1",
    "typescript": "^4.4.3"
  },
  "engines": {
    "node": ">=14.17.0",
    "npm": ">=6.0.0"
  }
}

I have found no good resources on addressing this issue for mixed projects like this. I do not know why we have typescript files as they were added before I joined.

Answer 1

This eslint file is missing the typescript parser:

"parser": "@typescript-eslint/parser",