ESLint와 Prettier

린트란?

코드의 가독성, 유지보수를 포함해서 품질을 유지하기 위해서는 자동화된 도구를 사용하여 코드 스타일을 관리하고 오류를 검출해야 한다.
이를 위해 ESLint와 같은 린트 도구를 사용할 수 있다.
린트 도구가 검사해주는 항목은 크게 두 가지이다.

• 포맷팅 : 일관성과 관련 (프리티어의 몫)
• 코드 품질 : 잠재적 오류 색출과 관련 (ESLint의 몫)

ESLint 설치와 사용법

• 설치

npm i -D eslint

• 린트의 rules에 대한 레퍼런스를 참고하여 환경설정 파일을 만든다

// root에 환경설정 파일인 .eslintrc.js 생성
{
  "extends": "eslint:recommended",
  "rules": {
    "no-console": "warn",
    "semi": ["error", "always"],
    "quotes": ["error", "single"]
  },
  "env": {
    "browser": true,
    "node": true
  }
}

프리티어

프리티어는 다양한 언어를 지원하며, 코드의 들여쓰기, 따옴표, 줄바꿈, 공백 등을 자동으로 조정하여 일관된 스타일을 유지할 수 있도록 도와주는 도구이다. 또한 여러 사람이 협업하는 경우, 개발자 간의 코드 스타일 차이로 인한 불일치를 방지할 수 있어 유용하다.
ESLint의 역할 중 포매팅과 겹치는 부분이 있지만 코드 품질과 관련된 기능은 하지 않는다는 점에서 ESLint와의 차이가 있다.

프리티어 설치와 사용법

• 설치

npm i -D prettier

• 프리티어 돌리기

npx prettier app.js --write

• ESLint와 프리티어 한 큐에 돌리기

npm i -D eslint-config-prettier

// .eslintrc.js
{
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ]
}

자동화하기

린트 도구는 코딩때마다 수시로 돌려줘야 하기 때문에, 자동화 하는 것이 좋다. husky라는 라이브러리를 이용하면 커밋 전이나, remote 푸시 전 등 git 액션의 특정 상황에서 훅을 발동시킬 수 있다.

• 설치

npm i -D husky

• package.json에 추가

{
  "husky": {
    "hooks": {
      "pre-commit": "echo \"이것은 커밋전에 출력됨\""
    }
  }
}

커밋 전 모든 코드를 린트로 검사를 돌리면, 프로젝트가 커짐에 따라 속도가 저하될 수 있다. 스테이징에 올라간 코드만 검사하게 해주는 라이브러리 lint-staged를 사용해보자.

• 설치

npm i -D lint-staged

• package.json

{
  "lint-staged": {
    "*.js": "eslint --fix" //스테이징에 올라간 js확장자 녀석들만 린트로 검사
  }
}
...
...
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged" // 커밋 메세지 작성전에 lint-staged를 실행. 이제 커밋하면 모든 파일을 검사하는 것이 아니라 변경되거나 추가된 파일만 검사한다.
    }
  }
}

번외

• CRA + TypeScript 에서 eslint + prettier 적용