React + ESLint + airbnb + vscode 세팅

시작하기 전에

• npx create-react-app my-app 으로 React 프로젝트가 생성되어있는 상태를 전제로 한다.
• prettier를 사용하지 않으므로, 관련 패키지 및 vscode 확장프로그램을 삭제한다.

eslint 설치

프로젝트 폴더 내에서 cli에 다음과 같은 명령어를 친다.

npx install-peerdeps --dev eslint-config-airbnb

eslint를 포함한 lint관련 패키지들이 자동으로 설치된다.

eslint 설정파일 생성

1. 프로젝트의 최상위 경로에 .eslintrc.js 파일을 만든다. package.json 과 같은 경로에 만들면 된다.

2. 생성한 파일에 다음 코드를 작성하고 저장한다.

module.exports = {
  "env": {
    "browser": true,
    "es2020": true,
  },
  "extends": ["airbnb", "airbnb/hooks"],
  "rules": {
    "react/jsx-filename-extension": [1, { "extensions": ["js", "jsx"] }],
    // 확장자로 js와 jsx 둘다 허용하도록 수정
    "arrow-parens": ["warn", "as-needed"],
    // 화살표 함수의 파라미터가 하나일때 괄호 생략
    "no-unused-vars": ["off"],
    // 사용하지 않는 변수가 있을때 빌드에러가 나던 규칙 해제
    "no-console": ["off"],
    // 콘솔을 쓰면 에러가 나던 규칙 해제
    "import/prefer-default-export": ["off"],
    // export const 문을 쓸때 에러를 내는 규칙 해제
    "react-hooks/exhaustive-deps": ["warn"],
    // hooks의 의존성배열이 충분하지 않을때 강제로 의존성을 추가하는 규칙을 완화
    "react/jsx-props-no-spreading": ["warn"],
    // props spreading을 허용하지 않는 규칙 해제
    "react/prop-types": ["off"],
    // props의 타입체크를 처리하려면 prop-types보단 차라리 typescript를 사용하는게 낫다.
    'no-underscore-dangle': ['off'],
    // camelCase를 따르는게 좋긴 하지만 `_`를 어쩔수 없이 써야하는 상황을 위해(가령 백엔드가 mongoDB)
  },
  "settings": {
    "import/resolver": {
      "node": {
        "moduleDirectory": ["node_modules", "."]
      }
    }
  }
};

airbnb의 lint규칙 중 마음에 안드는게 있을 경우, rules에 규칙을 추가해서 덮어쓰면 된다.

vscode에서 eslint설치, 자동수정 기능

1. vscode 편집기의 확장 프로그램으로 ESLint를 설치한다.

2. 프로젝트의 최상위 폴더에 .vscode 라는 폴더를 만든다. 마찬가지로 package.json, .eslintrc.js, 파일과 같은 경로상에 만들면 된다.

3. 생성한 .vscode 폴더에 settings.json 라는 파일을 만든다.

4. 생성한 settings.json 파일에 다음과 같이 작성하고 저장한다.

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
  },
  "editor.formatOnSave": false,
  "[javascript]": {
    "beatify.enable": false,
    "editor.formatOnSave": false,
  }
}

settings.json에서 source.fixAll.eslint는 ESlint에 의한 자동 수정기능을 활성화시킬지 여부를 설정하는 속성이다.
editor.formatOnSave 속성은 prettier에 의한 자동 포맷 기능을 활성화시킬지 여부를 설정하는 속성이다. 개인적으로는 prettier를 비활성화하고 사용하지만, 안그러길 원하는 사람들도 있을테니, 해당 프로젝트에 한해서 비활성화 되도록 저 설정을 넣는것도 방법일 것 같다.

.vscode 폴더는 작업환경별 설정을 위한 폴더이다.
즉 vscode 전체의 설정을 고치는게 아니라 해당 폴더를 가지고 있는 프로젝트에서만 특정 설정값을 사용하도록 만든다.
이는 vscode 앱의 설정을 함부로 고치지 않아도 되도록 도와주는 것 뿐 아니라,
이 .vscode 폴더를 포함해서 프로젝트 전체를 git을 통해서 다른 사람들과 공유하게 될때, 모든 팀원들이 같은 vscode 환경설정을 사용할수 있도록 하기도 한다.

jsconfig.json으로 절대경로 설정

.env 파일에 baseURL 넣는 방법은 deprecated 되었다. 그렇게 하지말고 새로운 방법을 써보자.

프로젝트 최상위경로에 jsconfig.json 파일을 만들고 다음과 같이 작성 후 저장한다.

{
  "compilerOptions": {
    "baseUrl": "."
  },
  "include": ["."]
}

이제 src 경로에 있던 어떤 파일을 import 할때 이렇게 쓰면 된다.

import myComponent from 'src/components/myComponent';
import store from 'src/store';