React Prettier, ESLint, lefthook 적용하기

1. React에서 Prettier와 ESLint, Lefthook 사용하기

• ESLint 사용 이유
  : 코딩 스타일을 준수하기 위해 사전에 정의된 스타일과 맞지 않을 경우 에러나 경고를 띄우면서 제대로된 코드를 작성할 수 있도록 도와줌.
  • 여러개의 설정 파일을 사용할 수 있어 Monorepo인 경우 매우 유용
  • 현재 lint 대상의 파일이 위치한 폴더 안에 설정 파일이 있는지 확인 후 없으면 상위 폴더를 한 단계씩 거슬러 올라가면서 파일 탐색.
  • 만일 root:true인 파일을 만난 경우, 더이상 상위 폴더로 올라가지 않음
• Prettier 사용 이유
  : 세부 설정을 유지하면서, 코드를 자동으로 정리해 주는 도구로 코딩 스타일을 보다 쉽게 지킬 수 있도록 도와줌. 파일 저장시 자동 적용.
• Lefthook 사용 이유
  : commit할 때 formatter와 linter가 자동으로 실행될 수 있게 도와줌.

2. ESLint 설정

• 설정 파일 이름 : .eslintrc (파일 포맷 형식에 따라 .eslintrc.json 등으로 사용)

• package.json 설정 : eslintConfig 속성을 통해 ESLint를 설정

  • 소규모 프로젝트일 경우 추천.
  • 프로젝트가 커짐에 따라 파악이 어려워, 유지보수가 힘들어질 수 있음.

  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },

• root 옵션 : true인 경우 상위 폴더로 올라가지 않음. 공통 설정과 프로젝트 별 설정을 분리해서 관리하도록 도와줌.

  • .eslintrc.json

  {
   	"root": true
   }

  • packages/p1/.eslintrc.json

  {
   	"root": false
   }

  • packeages/p2/.eslintrc.json

  {
   	"root": false
   }

• plugins 옵션 : 기본적으로 제공되는 규칙외에 추가적인 규칙을 사용할 수 있도록 만들어주는 다양한 플러그인

  {
  	...
  	plugins: ['react-hooks']
  }

• extends 옵션 : 기업들이 공개해 둔 설정을 그대로 가져와 기반으로 설정할 수 있음.

  # ex1. airbnb 기업 설정 가져오기
  {
  	...
  	"extends": ["airbnb"]
  }
  # ex2. eslint 추천 설정 사용하기
  {
   extends: [
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
    'react-app',
  ],
  }

• rule 옵션 : extends 옵션을 통해 설정된 규칙을 덮어쓰고 싶은 경우 사용

• paser, paserOptions 옵션 : ESLint가 자바스크립트의 확장 문법이나 최신 문법으로 작성한 코드를 lint하기 위해 paser를 사용.

• ignorePatterns 옵션, .eslintignore 파일 : 기본적으로 node_modules 폴더나 .으로 시작하는 설정 파일은 무시하는데, 다른 추가적인 파일을 무시하고 싶은 경우 ignorePatterns나 .eslintignore파일을 활용.

  • igfnorPatterns

  {
  	"ignorePatterns": ["build", "dist"]
  }

  • .eslintignore (.gitignore과 유사)

  build
  dist

  • .gitignore파일에 있는 경로를 무시하도록 설정

  #ESLint 커맨드 실행시
  $ eslint --ignore-path .gitignore .

3. Prettier 설정

• .prettierrc 파일 설정

   # Prettier 설치 -> $ npm install --save-dev prettier
    # file 생성 -> .prettierrc
    # 원하는 규칙 생성
    {
      "printWidth": 80,
      "tabWidth": 2,
      "useTabs": false,
      "semi": true,
      "singleQuote": true,
      "trailingComma": "all",
      "bracketSpacing": true,
      "arrowParens": "avoid",
      "proseWrap": "never",
      "endOfLine": "auto"
    }

4. package.json 설정

• 포맷팅

	"scripts":{
        ...
        "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
        "format": "prettier --write \"src/**/*.ts\""
      }
      # 이후 num run format과 num run lint로 실행 가능

5. lefthook 설정

• lefthook.yml

    pre-commit:
      commands:
      es-linter:
        run: npm run lint
      prettier:
        run: npm run format

• lefthook 적용

  	$ lefthook install

💌 42polar_코딩컨벤션_notion