[JavaScript] ESLint와 Prettier로 협업하기 [2/2] - Prettier _Mac(맥)

 

오늘은 Prettier에 대해서 알아보고 ESLint와는 어떤 차이점이 있는지, 그리고 같이 사용함으로써 얻는 이점을 알아볼게요

 

🧐 Prettier란?

Prettier도 ESLint와 마찬가지로 코드를 예쁘게 정리해주는 도구입니다. 하지만 ESLint와의 차이점은 Prettier는 코드 품질에는 신경을 쓰지 않는다는 것입니다.

 

ESLint와의 차이점

ESLint는 컨벤션 규칙에 어긋나는 것이 있으면 오류로서 알려주지만 고쳐주지는 않습니다. 반면 Prettier는 수정까지 자동으로 이루어지기 때문에 편리합니다. 따라서 ESLint에 코드 포맷을 Prettier로 설정해주면 더 편리하게 사용할 수 있습니다.

 

 

---

 

Prettier와 ESLint 통합하기

ESLint와 prettier를 통합하기 위해 패키지를 설치해줍니다.

$ npm install eslint-config-prettier eslint-plugin-prettier

 

.eslintrc.js 파일에 아래와 같이 프리티어 설정을 해줍니다.

module.exports = {
 ...
  extends: [
  ...
    "plugin:prettier/recommended",
  ],
  ...
}

 

 

통합된 ESLint 실행해보기

 

이제 ESLint와 Prettier를 통합했으니 npm run lint로 eslint만 실행을 해주면 prettier까지 자동으로 실행이 됩니다.

 

사용하지 않는 변수는 eslint가 확인하고

불필요한 세미콜론이 여러 개 있는 코드는 prettier가 정리해 줄 겁니다.

 

$ npm run lint

ESLint를 실행해보면

 

 

사용하지 않는 변수는 터미널에서 warning으로 잡아내고

 

세미콜론은 프리티어가 자동 수정한 것을 볼 수 있습니다.

 

 

---

🛠 ESLint(+Prettier) 자동화하기

eslint 자동화는 두 가지 방법으로 할 수 있습니다.

 

• 깃 훅을 사용하는 방법 (husky, lint-staged)
• 에디터 확장도구를 사용하는 방법 (VSCode)

개인적으로 편의성이 좋은 확장도구를 추천합니다.

 

 

---

 

🔧 방법 1. 깃 훅(Git hook)을 사용하는 방법 - husky & lint-staged

소스 트래킹 도구로 깃을 사용한다면 깃 훅을 이용해서 변경한 코드만 검사할 수 있습니다. 먼저 husky와 lint-staged가 뭔지 알아봅시당

 

📍 husky로 hook 관리하기

husky는 Node.js 개발 환경에서 Git hook을 편리하게 사용할 수 있도록 도와주는 도구입니다.

 

🙋🏼‍♀️ 근데 훅(hook)이 뭐죠

여기서 말하는 깃 훅(git hook)이란, 깃 명령어 실행 전후에 뭔가를 더 실행할 수 있는 방법입니다. 

 

📍 lint-staged란?

Git의 Staged된 상태의 파일들에 특정 명령어를 실행할 수 있도록 해주는 툴입니다. Git의 Staged된 상태란 git add 명령어로 수정된 파일을 커밋하기 위해 stage 영역에 추가된 상태를 말합니다. 이 lint-staged를 이용해서 변경된 파일만 검사를 하도록 husky와 함께 사용합니다. lint-staged가 없다면 매번 모든 파일을 eslint로 검사해야 하므로 비효율적이기 때문입니다. 그래서 lint-staged를 함께 사용하는 것입니다.

 

📍 husky & lint-staged 설치 및 설정하기

npx mrm lint-staged

먼저 패키지를 설치합니다. 위의 mrm 명령어는 husky와 lint-staged를 간편하게 설정해주는 명령어입니다.

설치가 완료되면 .husky 폴더가 생성되고 package.json 파일에 다음과 같은 코드가 추가된 것을 볼 수 있습니다.

{
  "scripts": {
  	...
    "prepare": "husky install"
  },
  ...
  "devDependencies": {
    "husky": "^6.0.0",
    "lint-staged": "^11.0.0",
  },
  "lint-staged": {
    "*.js": "eslint --cache --fix"
  }
}

 

lint-staged에 "*.js"는 자바스크립트 파일만 eslint를 검사하겠다는 의미입니다. 우리는 타입스크립트도 사용하고 prettier로 사용할 거기 때문에 설정을 조금 손봐줍니다.

 

{
  "lint-staged": {
    "*.{ts,tsx}": [
      "prettier --write",
      "eslint --fix"
    ]
  }
}

 

 

📍 잘 작동되는지 테스트하기

이제 eslint와 prettier가 잘 작동하는지 깃 명령어를 사용해봅니다.

$ git add .
$ git commit -m "테스트용 빈 커밋"

 

콘솔이 아래처럼 나오면 잘 작동하는 것입니다.

 

 

---

 

🔧  방법 2. 에디터 확장도구를 사용하는 방법

두 번째 방법은 익스텐션으로 eslint를 설치하는 것입니다.

[shift + cmd + X]명령어로 익스텐션(확장)으로 들어가서 eslint를 설치해줍니다.

 

설치가 완료되면 설정파일(단축키: cmd + , ) 로 들어가서 작업 영역으로 들어갑니다.

 

설정 열기(JSON)

그리고 우측 상단에 있는 설정 열기 아이콘을 클릭해서 코드 편집 창으로 넘어간 뒤 settings.json 파일이 나오면 아래 코드를 입력해줍니다.

{
    "eslint.enable": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

 

이제 커밋까지 할 필요도 없이 cmd + s 로 저장만 하면 eslint가 실행되는 것을 볼 수 있습니다.