프론트엔드 개발환경 - 린트(Lint)

이지연·2022년 10월 4일
0
post-thumbnail

린트(Lint)

ESLint

  • ESLint는 ECMAScript 코드에서 문제점을 검사하고 일부는 더 나은 코드로 정정하는 린트 도구 중의 하나
  • 포맷팅, 코드 품질 역할을 수행
  • Rules(규칙): ESLint는 검사 규칙을 미리 정해 놓았다. 문서의 Rules 메뉴에서 규칙 목록을 확인할 수 있음
  • 이러한 규칙을 여러게 미리 정해 놓은 것이 eslint:recommended 설정
  • ESLint에서 기본으로 제공하는 설정 외에 자주 사용하는 두 가지가 있다.
    1. airbnb
    2. standard

Prettier(프리티어)

  • Prettier는 좀 더 일관적인 스타일로 코드를 다듬는다. 반면 코드 품질과 관련된 기능은 하지 않는 것이 ESLint와 다르다

ESLint 와 Prettier 통합

  1. eslint-config-prettier: eslint-config-prettier는 프리티어와 충돌하는 ESLint 규칙을 끄는 역할
  2. eslint-plugin-prettier: eslint-plugin-prettier는 프리티어 규칙을 ESLint 규칙으로 추가하는 플러그인이다. 프리티어의 모든 규칙이 ESLint로 들어오기 때문에 ESLint만 실행하면 된다.
  • 위의 두개를 이용하여 eslint 설정파일에 plugin을 추가해 eslint와 prettier를 같이 실행 할 수 있다

자동화

  • husky : pre-commit을 이용하여 git commit 전에 eslint를 자동으로 적용시킬 수 있다
  • lint-staged: commit stage에 올라온 파일들에 대해 파일 규칙에 따라 eslint를 동작시킬 수 있다
  • VSCode setting.json에 아래와 같이 설정해 놓으면 저장 할 때마다 eslint를 적용해서 파일을 변경해준다
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
profile
dev log

0개의 댓글