EsLint, prettier세팅

eslint-config-airbnb-typescript) + Prettier + React(next.js) + TypeScript 설정

1. 설치

// exlint 관련 설치
yarn add -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser

// .eslintrc
{
  "env": {
    "browser": true,
    "es2021": true,
    "es6": true,
    "jest": true
  },
  "extends": [
    "next",
    "next/core-web-vitals",
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "airbnb",
    "airbnb/hooks"
  ],
  "overrides": [],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "ecmaFeatures": {
      "tsx": true,
      "jsx": true
    }
  },
  "plugins": [
    "import",
    "react",
    "@typescript-eslint",
    "prettier",
    "jest",
    "jest-dom"
  ],
  "rules": {
    "prettier/prettier": "error",
    "react/react-in-jsx-scope": "off",
    "import/no-unresolved": "error",
    "react/jsx-filename-extension": [1, { "extensions": [".ts", ".tsx"] }],
    "react/jsx-props-no-spreading": "off",
    "react/prefer-stateless-function": 0,
    "react/jsx-one-expression-per-line": 0,
    "no-nested-ternary": 0,
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never"
      }
    ],
    "react/function-component-definition": [
      2,
      { "namedComponents": "arrow-function" }
    ],
    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": ["error"],
    "jsx-a11y/label-has-associated-control": [
      2,
      {
        "labelComponents": ["CustomInputLabel"],
        "labelAttributes": ["label"],
        "controlComponents": ["CustomInput"],
        "depth": 3
      }
    ]
  },

  "settings": {
    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx"]
    },
    "import/resolver": {
      "typescript": { "alwaysTryTypes": true }
    },
    "next": {
      "rootDir": "packages/refactoring-env-setting"
    }
  }
}




//package.json에 추가
{
	"scripts":{ 
    "lint": "eslint './src/**/*.{ts,tsx,js,jsx}'",
    "lint:fix": "eslint --fix './src/**/*.{ts,tsx,js,jsx}'"
    }
}

// prettier 설치
yarn add -D prettier
// eslint와 충돌을 막아주는 config, plugin 설치
yarn add -D eslint-config-prettier eslint-plugin-prettier
// .prettierrc 파일 작성

//typescript, eslint, prettier를 사용할 때 yarn berry를 사용하면 PnP 사용 때문에 해당 모듈을 찾지 못하는 경우가 있다. 그러므로 아래 작업을 진행한다.
yarn dlx @yarnpkg/sdks vscode

2. error

• yarn lint 실행시 에러 발생
  • yarn add eslint-plugin-jest
    - yarn add exlint-plugin-jest-dom
  • yarn add jsx-a11y
    - yarn add eslint-plugin-jsx-a11y
  • yarn add eslint-plugin-react