ESLint

Why?

자바스크립트 문법 첵첵해주는 도구

설치

• VScode 에서 ESlint 설치
• 터미널에 yarn or npm install eslint-config-airbnb , npm install eslint-config-prettier

create-react-app 을 하게되면 package.json에 가보면 자체적으로 eslint가 설치가 됩니다.
하지만 그 중에서도 커스텀을 하려고 airbnb를 설치하는 것이고, 본인이 prettier을 사용 하고있으면 eslint와 prettier가 겹치지 않게 설정하기위해 설치 합니다.

설정

• package.json 을 바꿔줍니다.

  "eslintConfig": {
    "extends": [
      "react-app",
      "airbnb",
      "prettier"
    ]
  },

• rules 정하기

  "eslintConfig": {
    "extends": [
      "react-app",
      "airbnb",
      "prettier"
    ],
     "rules" : {
      "no-unused-vars": 1  // 0 이면 경고/알림 사라짐, 1 이면 경고만뜸, 2 빨간줄생성
      "no-console": 0,     // console 써도 노란줄 생성 안되게끔
      "react/jsx-filename-extension": 0  // jsx 파일이 아닐때 filename 써도 되게끔하기
       
    }
  },

Tip

/ eslint-disable/

한 페이지 전체를 eslint 적용 안하고 싶을때 페이지 상단에 적으면 된다.

//eslint-disable-next-line

불가피하게 eslint 피해야 할때 해당줄 위에 주석으로 입력하면 그 다음 한줄을 eslint 봐줌