Fall in IT.

ESLint와 Prettier로 개발 환경 만들기 본문

프레임워크/React

ESLint와 Prettier로 개발 환경 만들기

D.Y 2021. 3. 28. 18:25
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

안녕하세요.

 

오늘은 ESLint와 Prettier를 사용해서 개발환경을 만들어보겠습니다.

 

여러명이서 개발을 할때 코드 품질/포맷팅 도구의 도움을 받지않고 일관된 코드로 작성을 하기란 매우 어렵습니다.

최근에 많이 사용되는 ESLint와 Prettier를 사용해서 여러명이서 협업을 할때 일관된 코드를 작성할 수 있는 자동화된 환경을 만들어보겠습니다.

 

 

알아둬야할 키워드

  • ESLint
  • Prettier (eslint-config-prettier, eslint-plugin-prettier)
  • husky
  • lint-staged
  • git hooks

 

ESLint란?

  • lint란 보풀이란 의미로 코드상의 보풀을 제거해주는 도구를 말한다.
  • 코드에서 보풀이란
    1. 선언한 변수를 사용하지 않았거나
    2. 들여쓰기를 일관되게 하지 않았거나
    3. 긴 코드를 한줄에 적었거나
  • ESLint는 두 가지 기능을 한다.
    • 코드 포맷팅 - 일관된 코딩 컨벤션을 유지해주는 기능
    • 코드 품질 - 잠재적인 오류나 버그를 미리 찾아주는 기능

 

Prettier란?

  • Prettier는 한 가지 기능을 한다.
    • 코드 포맷팅 - 일관된 코딩 컨벤션을 유지해주는 기능
    • ESLint에서도 해주는데 왜 Prettier를 사용하는가?
      • Prettier는 ESLint와는 다르게 코드의 문맥을 어느정도 파악하고 상황에 따라서 최적의 코드 모습을 만들어준다.
      • 쉽게 말하면, 더 이쁘게 코드를 정리해준다.(ex. eslint는 글자수로 포맷팅해주는 기능 밖에 없지만 프리티어는 상황에 맞게 포맷팅해준다.)
    • 이러한 이유로 최근에는 ESLint와 Prettier를 조합해서 많이 사용하는 추세이다.

 

설치 및 사용방법

  • ESLint, Prettier는 노드 패키지로 제공되기 때문에 npm 명령어가 필요하고 node가 설치되어 있어야한다.
    • $ npm i --save-dev eslint
    • $ npm i --save-dev prettier
  • ESLint를 설치한 후에는 기본 설정파일을 만들어줘야 한다.
    • .eslintrc.json (.eslintrc.js)
    • 여기에 규칙을 등록하여 사용한다.(본인은 ESLint 공식 사이트에서 제공하는 eslint:recommended를 사용하고 이외에 더 추가할 속성은 하위에 rules로 설정하였다.)
  • Prettier는 eslint와 통합방법을 제공한다. 아래 두 플러그인을 설치하고.eslintrc.json파일에설정을 추가한다.
      • $ npm i --save-dev eslint-config-prettier
      • $ npm i --save-dev eslint-plugin-prettier
      
    {
      "env": {
        "browser": true,
        "es2021": true
      },
      "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended",
        "prettier/@typescript-eslint",
        "plugin:prettier/recommended"
      ],
      "parser": "@typescript-eslint/parser",
      "parserOptions": {
        "ecmaFeatures": {
          "jsx": true
        },
        "ecmaVersion": 12,
        "sourceType": "module",
        "project": "./tsconfig.json"
      },
      "plugins": ["react", "@typescript-eslint"],
      "rules": {
        "@typescript-eslint/no-unused-vars": "warn",
        "@typescript-eslint/no-explicit-any": "off",
        "react/no-unescaped-entities": 0,
        "react/display-name": "off"
      },
      "ignorePatterns": ["dist/", "node_modules/", "lib/", "typings/", "coverage/"]
    }
    
    
  • Prettier 포맷팅 규칙을 ESLint에 추가하여 코드 품질검사는 ESLint가 코드 포맷팅 검사는 Prettier가 처리하도록 한다.

 

자동화 방법

    • Lint 효과를 제대로 보려면 자동화를 해야한다.
    • Git hooks를 사용하여 자동화한다.
      • Git hooks는 깃 명령어 실행 전후에 뭔가를 더 실행할 수 있는 기술이다
      • husky를 사용하면 Git hooks를 간편하게 사용할 수 있다.
        • $npm i --save-dev husky
    • npm 스크립트에 husky를 등록한다.
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },  	

 

최적화 방법

  • 코드가 많아지면 모든 파일을 Lint가 검사하기 때문에 속도가 느려질 수 있다.
  • 이때 변경된 커밋만 Lint로 검사되도록 처리해야한다.
  • lint-staged를 사용하면 스테이징된 파일만 Lint검사를 수행할 수 있다.
      • $npm i --save-dev lint-staged
      "lint-staged": {
        "*.{ts,tsx}": "yarn lint"
      },
    

 

참조

 

 

0 Comments
댓글쓰기 폼