[REACT] 엄격한 ESLint 만들기

eslint 중에서도 악명높은 airbnb 규칙을 설정해보자.

 

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

• babel-eslint: Babel과 함께 사용되는 Eslint 구문 분석기입니다. JavaScript 코드를 트랜스파일링 하기 전에 Linting 검사를 실행할 수 있습니다.
• eslint-config-airbnb: Airbnb 스타일 가이드를 따르는 Eslint 구성 파일입니다. 이 구성 파일은 Airbnb에서 사용하는 코드 스타일을 따르며, 코드 품질을 향상시키기 위한 권장 사항과 규칙을 포함합니다.
• eslint-plugin-import: Eslint에서 모듈 import 및 export 구문을 처리하는 플러그인입니다. 이 플러그인은 모듈 로딩과 관련된 문제를 식별하고 이를 해결하기 위한 규칙과 권장 사항을 제공합니다. 이는 Node.js나 웹 브라우저에서 모듈을 사용할 때 유용합니다.
• eslint-plugin-react-hooks: 리액트 함수형 컴포넌트에서 사용하는 React Hooks에 대한 규칙을 검사하는 Eslint 플러그인입니다.

 

.eslintrc

{
    "parser": "babel-eslint",
    "parserOptions": {
        "ecmaVersion": 2020,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "env": {
        "browser": true,
        "node": true,
        "es6": true
    },
    "extends": ["airbnb"],
    "plugins": ["import", "react-hooks"],
    "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/jsx-no-undef": "error",
        "react/function-component-definition": "off",
        // 🔥 모든 코드에 대해 적용되는 규칙
        "indent": ["error", 4],
        "overrides": [
            {
                // 🔥 JS 파일에서 JSX 코드에 대해 적용될 규칙
                "files": ["*.js"],
                "rules": {
                    "react/jsx-indent": ["error", 8]
                }
            }
        ],
        "quotes": "off"
    },
}

함수 부분과 JSX부분의 indent를 따로 설정해줘야 한다.

🔥 표시한 부분을 주목하자. 

기존엔 "indent": ["error", 4] 밖에 없었는데 아래 코드처럼 JSX부분이 에러가 뜬다.

놀랍게도 indent 설정은 함수와 JSX부분을 따로 설정해줘야 한다는 것이다!!!

설정 방법은 위 코드 블록과 같이 overrides 라는 설정값을 사용하면 된다.