[React] 프로젝트에 eslint 적용 시 발생한 이슈

이슈 원인

React 프로젝트에 처음으로 ESLint를 적용하던 중 생긴 오류로 화살표 함수로 생성된 함수형 컴포넌트에 발생한 오류

해결 방법

eslintrc 설정파일의 rules에 react/function-component-definition을 추가하여 함수형 컴포넌트의 정의 방식을 지정해주자.

rules:{
	'react/function-component-definition':[2, {namedcomponents:'arrow-function'}]
}

추가 이슈

init을 활용해 eslint 코드 컨벤션 설정하기

Parsing error: Unexpected token =eslint 해결하기

npm install eslint babel-eslint --save-dev

module.exports = {
  "extends": [
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "parser": ["@typescript-eslint/parser", "babel-eslint"],
  "plugins": ["@typescript-eslint"],
  "overrides": [
    {
      "files": ["*.js", "*.jsx"],
      "rules": {
        "@typescript-eslint/explicit-function-return-type": "off"
      }
    }
  ]
}

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "plugins": ["prettier"],
    "extends": ["airbnb-base", "eslint:recommended", "plugin:prettier/recommended"],
    "overrides": [
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "rules": {
        "prettier/prettier": "error"
    }
}

참고 사이트

Parsing error: Unexpected token =eslint 해결하기

ESLint 적용 시 생긴 이슈_Function component is not a function declaration

[협업] Prettier & ESLint, Airbnb Style Guide로 코드 컨벤션 설정하기