린트, Prettier 기초 개념 정리

인프런 프론트엔드 개발환경의 이해와 실습 강의(린트)를 듣고 정리해봤다.

린트

코드의 오류, 스타일을 점검하고 일부 수정한다.

• 포맷팅 ex) 들여쓰기, 코드 라인 최대 너비
• 코드 품질 ex) 전역변수 자제, 사용하지 않는 변수 쓰지 않기

환경 설정

.eslintrc.js 파일로 환경설정을 할 수 있다.

// .eslintrc.js
module.exports = {
  rules: {
    "no-unexpected-multiline": "error",
  },
}

rules에 규칙들을 적용한다. 값은 "off", "warn", "error" 3가지이다.
규칙목록
규칙들 중 자동 수정이 가능한 것들이 있다.

extends

바벨의 프리셋처럼 잘 설정해놓은 config들을 가져다 쓸 수 있다.

// .eslintrc.js
module.exports = {
  extends: [
    "eslint:recommended", // 미리 설정된 규칙 세트을 사용한다
  ],
}

이외에 airbnb, standard 설정을 많이 쓴다.

초기화하기

npx eslint --init을 통해 쉽게 구성할 수 있다. 질문의 답하면 그에 맞게 자동으로 .eslintrc.js파일을 생성해준다.

Prettier

코드를 일관된 스타일로 다듬는다. 코드 품질과 관련된 기능은 없다.

ESLint와 통합하기

npm i -D eslint-config-prettier

eslint-config-prettier는 프리티어와 충돌하는 ESLint규칙을 끈다.

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

검사할 때 포매팅은 프리티어가, 코드 품질은 ESLint가 검사하도록 한다.

npx prettier app.js --write && npx eslint app.js --fix

npm i -D eslint-plugin-prettier

eslint-plugin-prettier는 프리티어 규칙을 ESLint규칙으로 추가한다. ESLint만 실행하면 된다.

프리티어는 이 두패키지를 다 사용하는 설정을 제공해준다. 얘를 extends에 추가해준다.

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

자동화하기

깃 훅 사용

1) husky를 설치해준다. (공식 문서 참조하기 - 잘 안될때가 많음)
2) package.json을 다음과 같이 설정한다.

"scripts": {
    // ...생략
    "prepare": "husky install",
    "lint-staged": "lint-staged"
  },
  "lint-staged": {
    "**/*.{tsx,ts,jsx,js}": [
      "eslint --fix",
      "prettier --write"
    ]
  },

3) husky를 사용해 pre-commit에서 lint-staged 를 실행해준다. 커밋 이전에 lint가 동작한다.

에디터 extension

ESLint 익스텐션을 활용해 작업 중에도 계속 Lint룰의 위반여부를 확인할 수 있다.

정리

개발환경을 세팅할 때 git hook을 활용해 lint 를 자동으로 commit 전에 처리하게 하자.