리액트 ESLint와 Prettier

ESLint와 Prettier

    1)  ESLint

        a.  문법 검사 도구

        b. 코드를 작성할 때 실수를 하면 에러 or 경고 메시지를 VS Code 에디터에서 바로 확인 가능

    2) Prettier

        a. 코드 스타일 자동 정리 도구

        b. JSX 작성 시 코드의 가독성을 위해 들여쓰기를 사용

        c. 자동 코드 정리를 하면 코드가 제대로 정렬되고, 세미콜론(;)이 빠진 곳에는 자동 추가, 작은따옴표는 큰 따옴표로

 

프로젝트 설정 및 ESLint 기본 설정

create-react-app prettier-react

   1) create-react-app으로 프로젝트 생성

   2) VSCode로 해당 디렉토리 열기

   3) VSCode 익스텐션 마켓플레이스에서 ESLint를 검색 후 설치

   4) 프로젝트 디렉토리에 .eslintrc 파일 생성

{
  "extends": "react-app"
}

 

Prettier 설정

   1)  VSCode 익스텐션 마켓플레이스에서 Prettier - Code Formatter 설치

   2) 설치 후, Shift + Ctrl + F 를 누르면 코드 자동 정리

 

Prettier 를 ESLint 와 연동하기

yarn add --dev prettier-eslint

Ctrl + , 키를 눌러서 환경설정을 열고, 작업 영역 설정 쪽 아래의 내용 입력

{
  "editor.formatOnSave": true,
  "javascript.format.enable": false,
  "prettier.eslintIntegration": true
}

코드가 저장될때마다 자동으로 포맷되고, prettier 에서 ESLint 와 연동되도록 설정 완료

 

ESLint 세부설정

쌍따옴표 대신에 일반 따옴표를 쓰도록 설정, 들여쓰기 크기는 두개의 공백으로 설정

{
  "extends": "react-app",
  "rules": {
    "quotes": ["error", "single", { "avoidEscape": true }],
    "indent": ["error", 2]
  }
}

코드를 다시 저장하시면, 코드가 자동 정리

 

airbnb 스타일을 적용

yarn add eslint-config-airbnb

설치 후 .eslintrc 를 다음과 같이 작성

{
  "parser": "babel-eslint",
  "extends": "airbnb",
  "plugins": ["react", "jsx-a11y", "import"],
  "rules": {
    "react/jsx-filename-extension": 0
  }
}

airbnb 코드 스타일에 이것들이 적용

1. state 나 LifeCycle API 사용하지 않는다면 함수형 컴포넌트를 사용할것
2. LifeCycle API 는 특정 순서로 작성 할 것
3. 컴포넌트는 .jsx 파일로 작성 할 것
4. 문자열 ref 는 사용하지 말 것

여기서 끄고 싶은 것들은 rules 에서 0 으로 설정

규칙이 까다롭지만 적응하고나면 코드 스타일이 깔끔하다는 것을 느낄 수 있게 될