eslint로 프로젝트 점검하기

 

프로젝트 에러를 잡을 때 엄격하게 하기 위해서 eslint를 이용해서 프로젝트를 점검해보자.

아래 명령어를 설치해주고 

npm i -D babel-eslint eslint-config-airbnb eslint-plugin-import

npm i -D eslint-plugin-react-hooks

.eslintrc 파일도 아래와 같이 parser babel-eslint를 추가하여 babel이 코드를 해석해서 최신문법도 에러를 발생시키지 않게 하자. extends 부분도 airbnb(airbnb사가 강한규제로 유명함)로 설정하여 스타일을 강한 규제에 놓이도록 하자.

{
    "parser": "babel-eslint",
    "parserOptions": {
        "ecmaVersion": 2020,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "env": {
        "browser": true,
        "node": true,
        "es6": true
    },
    "extends": [
        "airbnb"
    ],
    "plugins": [
        "import",
        "react-hooks"
    ]
}

아래명령어도 추가 설치.(a11y는 접근성을 의미(accessibility)

npm i -D eslint-plugin-jsx-a11y

.eslintrc에다가 아래코드를 추가한다. 기능들을 끄는 역할

그리고 차례차례 넘기면서 코드들이 오류가 없는지 확인한다.

 "rules": {
    "jsx-a11y/label-has-associated-control": "off",
    "jsx-a11y/anchor-is-valid": "off",
    "no-console": "off",
    "no-underscore-dangle": "off",
    "react/forbid-prop-types": "off",
    "react/jsx-filename-extension": "off",
    "react/jsx-one-expression-per-line": "off",
    "object-curly-newline": "off",
    "linebreak-style": "off",
    "no-param-reassign": "off"
  }

 

 

 

 

 

 

 

 

 

 

<출처 조현영: [리뉴얼] React로 NodeBird SNS 만들기>

https://www.inflearn.com/course/%EB%85%B8%EB%93%9C%EB%B2%84%EB%93%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%A6%AC%EB%89%B4%EC%96%BC/dashboard

[리뉴얼] React로 NodeBird SNS 만들기 - 인프런 | 강의