ESLint와 Prettier로 개발 환경 만들기

안녕하세요.

 

오늘은 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"
    },
  

 

참조

• eslint.org/docs/rules/