WebStrom에서 React 프로젝트 ESlint 설정하기

오류

Error: Error while loading rule '@typescript-eslint/dot-notation': You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.
Occurred while linting C:\Users\whddl\Desktop\codecamp-frontend\class\pages\index.tsx

.eslintrc.js 설정

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ["plugin:react/recommended", "standard-with-typescript"],
  overrides: [],
  parserOptions: {
    project: "tsconfig.json",
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: ["react"],
  rules: {},
};

tsconfig.json 설정

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ["plugin:react/recommended", "standard-with-typescript"],
  overrides: [],
  parserOptions: {
    project: "tsconfig.json",
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: ["react"],
  rules: {},
  ignorePatterns: [".eslintrc.js"],
};

package.json 설정

{
  "name": "class",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "generate": "graphql-codegen"
  },
  "dependencies": {
    "@apollo/client": "^3.7.3",
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@material-ui/core": "^4.12.4",
    "@next/font": "13.1.1",
    "antd": "4.22.8",
    "axios": "^1.2.2",
    "eslint": "^8.0.1",
    "graphql": "^16.6.0",
    "next": "12.1.0",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@graphql-codegen/cli": "^3.0.0",
    "@graphql-codegen/typescript": "^3.0.0",
    "@types/node": "17.0.2",
    "@types/react": "17.0.2",
    "@typescript-eslint/eslint-plugin": "^5.0.0",
    "eslint-config-standard-with-typescript": "^34.0.0",
    "eslint-plugin-import": "^2.25.2",
    "eslint-plugin-n": "^15.0.0",
    "eslint-plugin-promise": "^6.0.0",
    "eslint-plugin-react": "^7.32.2",
    "typescript": "*"
  }
}

해결

기본으로 설정된 tsconfig.json의 parserOptions에 project: "tsconfig.json" 추가했더니 오류가 사라졌다.

parserOptions: {
    project: "tsconfig.json",
    ...
}

기존에는 .eslintrc.js에서 extends가 "standard" 였지만 typescript가 포함이 되면서 "standard-with-typescript"가 되었다. (원래는 ESlint와 typescript는 별개였다.) 그래서 typescript가 추가가 되었기 때문에 tsconfig.json의 위치를 알려줘야 한다.