prettier, eslint, styleLint에 대해

이번 아티클에서는 코드 품질 관리를 위한 도구인 Prettier, ESLint, Stylelint에 대해 자세히 알아보겠습니다.

Prettier, ESLint, Stylelint 소개

lint 란?

텍스트 파일에서 발견되는 실수나 오류, 스타일 문제를 지적해주는 프로그램을 말한다.

Prettier

코드 스타일을 자동으로 정리해주는 코드 포맷터

코드의 들여쓰기, 세미콜론, 따옴표 등을 일관된 스타일로 정리해줍니다.

이는 여러 사람이 작업하는 프로젝트에서 코드 스타일이 일치하도록 보장하는 데 유용합니다.

ESLint

JavaScript 코드의 문법 오류와 코딩 스타일을 검사하는 도구

개발 중 실수로 발생할 수 있는 코드 문제나 잠재적 에러를 미리 짚어주며, 코드의 품질을 높이는 데 기여합니다.

사용자는 규칙을 직접 설정하여 프로젝트의 요구 사항에 맞게 ESLint를 조정할 수 있습니다.

Stylelint

CSS/SCSS 코드의 문법 오류와 스타일 규칙을 검사하는 도구

CSS 코드의 오류를 찾고, 스타일 규칙을 강제하여 프로젝트 내에서 일관된 스타일을 유지하도록 도와줍니다.

이 세 가지 도구를 함께 사용하면 코드의 품질을 일관되고 체계적으로 관리할 수 있습니다.

Prettier, ESLint, Stylelint 설정 및 적용

이제 Prettier, ESLint, Stylelint를 실제로 프로젝트에 적용해보겠습니다.

yarn을 사용하는 경우를 기준으로 설명하겠습니다.

(* Yarn은 npm과 비슷한 패키지 매니저로, 종종 더 빠른 설치 속도와 향상된 성능으로 선호되기도 합니다.)

1. 설치

yarn add --dev prettier eslint stylelint

yarn을 통해 필요한 패키지들을 설치한다.

2. Prettier 파일 생성

Prettier 설정

1. Prettier를 설치

   (npm) npm install --save-dev prettier

   (yarn) yarn add --dev prettier

2. 프로젝트 루트에 .prettierrc 파일 생성 후 Prettier 설정을 지정

// Prettier 설정 예시
{
  "singleQuote": true,
  "semi": true,
  "tabWidth": 2,
  "trailingComma": "all"
}

1. package.json 파일에 "format": "prettier --write ." 스크립트를 추가하여 Prettier를 실행할 수 있습니다.

ESLint 설정

🚨 yarn create vite를 사용하여 React 및 Vue 등을 프로젝트를 생성한 경우, 자동으로 eslint가 설정된다.

→ 따로 설치 할 필요 x

1. ESLint를 설치

   (npm) npm install --save-dev eslint

   (yarn) yarn add --dev eslint

2. eslint --init을 실행하여 ESLint 설정 파일(.eslintrc.json)을 생성합니다.

3. 필요에 따라 ESLint 규칙을 수정합니다.

{
  "extends": "eslint:recommended",
  "rules": {
	  // 다음과 같이 eslint 추가 규칙 설정
    "no-unused-vars": "warn",
    "no-console": "off"
  }
}

1. package.json에 "lint": "eslint ." 스크립트를 추가하여 ESLint를 실행할 수 있습니다.

Stylelint 설정

1. Stylelint와 표준 규칙 세트를 설치

   (npm) npm install --save-dev stylelint stylelint-config-standard

   (yarn) yarn add --dev stylelint

2. .stylelintrc.json 파일을 만들어 Stylelint 설정을 지정합니다. 예를 들어:

{
  "extends": "stylelint-config-standard",
  "rules": {
  // StyleLint의 표준 구성을 다음과 같이 확장
    "color-no-invalid-hex": true
  }
}

1. package.json에 "lint:css": "stylelint '**/*.{css,scss,sass}'"를 추가하여 Stylelint를 실행할 수 있습니다.

사용 방법

이제 다음 명령어를 사용하여 코드 검사와 포맷팅을 실행할 수 있습니다:

• 코드 린트 실행:

  yarn lint
  
  
  
  

  이 명령어는 ESLint와 StyleLint를 사용하여 자바스크립트와 CSS 파일을 검사합니다.

• 코드 포맷팅 실행:

  yarn format
  
  
  
  

  이 명령어는 Prettier를 사용하여 프로젝트 내의 모든 코드 파일을 자동으로 포맷팅합니다.

→ Prettier, ESLint, Stylelint 적용 완료!

추가 정보: Git Hooks와 통합

Prettier, ESLint, Stylelint를 더욱 효과적으로 활용하기 위해 Git Hooks와 통합할 수 있습니다.

Git Hooks를 사용하면 개발자가 코드를 커밋하거나 푸시할 때 자동으로 코드 스타일 검사와 수정이 이루어집니다. 이를 통해 코드 품질 관리 프로세스를 더욱 체계화할 수 있습니다.

결론

Prettier, ESLint, Stylelint는 웹 개발에 필수적인 도구입니다. 이 도구들을 사용하면 코드의 일관성과 가독성을 높일 수 있으며, 잠재적인 오류를 사전에 발견하고 수정할 수 있습니다. 이를 통해 더 나은 코드를 작성하고 유지보수할 수 있습니다. 이 글을 통해 Prettier, ESLint, Stylelint의 기능과 설정 방법을 이해하셨기를 바랍니다.