[ESLINT] 초기 프로젝트 셋팅에 필요한 개발환경 구성

pnpm add -D eslint prettier typescript

pnpm add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser

pnpm add -D eslint-config-prettier eslint-plugin-prettier

# 스타일 가이드
pnpm add -D eslint-config-airbnb 
 
# 리엑트 관련 Plugins
pnpm add -D eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y eslint-plugin-import

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module",
    "project": "./tsconfig.json",
    "createDefaultProgram": true
  },
  "plugins": ["react", "@typescript-eslint"],
  "extends":[
    "airbnb",
    "airbnb/hooks",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:react/recommended",
    "plugin:prettier/recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "rules": {
    // var 금지
    "no-var": "warn",
    // 일치 연산자 사용 필수
    "eqeqeq": "warn",
    // 컴포넌트의 props 검사 비활성화, propstype 사용하지 않아도 경고 띄우지 않음
    "react/prop-types": 0,
    // 불필요한 세미콜론 사용 시 에러 표시
    "no-extra-semi": "error",
    // 한 파일 내 export 문이 하나일 경우 default export 사용 권장 경고 비활성화
    "import/prefer-default-export": 0,
    // 파일 경로가 틀렸는지 확인하는 옵션 끄기
    // "import/no-unresolved": ["error", { "caseSensitive": false }],
    "import/no-unresolved": 0,
 
    // jsx 파일 확장자 .jx, jsx, ts, tsx 허용
    "react/jsx-filename-extension": [2, { "extensions": [".js", ".jsx", ".ts", ".tsx"] }],
    // 함수의 형태 정의 arrow-function , function-declaration 중 
    "react/function-component-definition": [2, { "namedComponents": ["arrow-function"] }],
    // JSX 속성이나 자식 요소에서 항상 중괄호를 사용해야 하는지를 검사
    "react/jsx-curly-brace-presence": ["warn", { "props": "always", "children": "always" }],
    // props spreading 허용하지 않는 경고 표시 (커스텀 속성의 경우 무시)
    "react/jsx-props-no-spreading": [1, { "custom": "ignore" }],
    // 줄바꿈 문자 스타일 검사
    "linebreak-style": 0,
    // 확장자에 대한 검사
    "import/extensions": 0,
    // import React from "react' 제거
    "react/react-in-jsx-scope": 0,
    // 한줄에 하나의 표현식만을 허용하는지를 확인합니다.
    "react/jsx-one-expression-per-line": 0,
    // 중첩된 삼항 연산자를 사용제어
    "no-nested-ternary": 0,
    // 화살표 함수의 파라미터가 하나일대 괄호 생략 
    "arrow-parens": ["warn", "as-needed"],
    // 테스트 또는 개발환경을 구성하는 파일에서는 devDependency 사용 허용
    "import/no-extraneous-dependencies": 0,
    // 콘솔 사용 시 발생하는 경고 비활성화
    "no-console": "off",
    "prettier/prettier": [
      "error", {
        "semi": false,
        "printWidth": 80,
        "tabWidth": 2,
        "useTabs": false,
        "singleQuote": true,
        "trailingComma": "all",
        "bracketSpacing": true,
        "quoteProps": "as-needed",
        "arrowParens": "avoid",
        "endOfLine": "auto"
      }
    ]
  },
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  }
}