VSCode EsLint扩展并不是在混合Next.JS项目中插入JS文件，而是下一个Lint和Husky工作

Question

对于上下文，我们的项目是一个Next.JS项目，主要是JavaScript文件，以及一些随机的TypeScript文件，主要在我们的TypeScript文件夹中。最近，我们设置了Husky来预提交我们的git提交，一些设置改变了，当下一个lint正确的lints和我们的Husky设置可以处理这两种类型的文件时，EsLint的EsLint扩展名不再适用于JavaScript文件。当删除plugin:@typescript-eslint/recommended修复这个问题时，下一个lint和husky就会在TS文件中失败。

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"
  }
}

对于这样的混合项目，我发现没有解决这个问题的好资源。我不知道为什么我们有打字文件，因为他们是在我加入之前添加的。

Answer 1

这个eslint文件缺少类型记录解析器：

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