Stylelint 설정으로 코드 스타일 자동화 및 정리하는 방법

CSS 및 CSS-in-JS 코드의 일관성을 유지하고 자동으로 정렬하기 위해 stylelint를 설정하는 과정을 진행하던 중 작성되었습니다.

 

협업을 통해 코드를 짜다보면 팀 내 코드 스타일을 통일하는 과정이 중요하다. 그래서 주로 pretteir 나 lint를 사용하는데 stylelint 도 그중 하나로 팀 내 코드 스타일을 통일하고 코드 품질을 높이는 데 도움을 준다.

 

1. Stylelint란?

 

Stylelint는 스타일시트(CSS, SCSS, CSS-in-JS 등)를 분석하고 오류를 찾아내는 린터(Linter)이다. 이를 사용해서 코드 품질을 유지하고 코드 스타일을 통일할 수 있다.

 

제공하는 주요 기능:

• 문법 검사: CSS 및 SCSS, CSS-in-JS에서 발생할 수 있는 문법 오류를 자동으로 찾기.
• 코드 일관성 유지: 코드 스타일 규칙을 정의하여 일관된 스타일을 유지할 수 있도록함.
• 자동 수정: 잘못된 스타일을 자동으로 수정하는 기능을 통해 코드 정리 및 최적화 가능.

stylelint는 특히 팀 협업 시 코드 리뷰에서 발생할 수 있는 불필요한 논쟁을 줄이고 코드 일관성을 높이는 데 큰 도움이 된다.

 

---

2. Stylelint 설치

프로젝트에서 stylelint를 사용하기 위해 필요한 패키지를 설치해야 한다.

아래 명령어를 통해 stylelint와 관련된 패키지를 추가할 수 있다.

 

우리 프로젝트는 yarn을 사용하여 stylelint 및 관련 플러그인을 설치했다.

yarn add --dev stylelint stylelint-config-standard stylelint-order stylelint-scss postcss-styled-syntax

 

설치되는 패키지에 대한 설명:

• stylelint: 코드 스타일을 검사하고 오류를 찾아내는 핵심 패키지
• stylelint-config-standard: 스타일 검사 규칙을 제공하는 기본 구성
• stylelint-order: CSS 속성의 정렬을 관리하는 플러그인
• stylelint-scss: SCSS 문법을 지원하는 플러그인
• postcss-styled-syntax: CSS-in-JS 코드를 처리하기 위한 PostCSS 구문 분석기

---

3. Stylelint 설정 파일 작성

stylelint의 설정 파일인 .stylelintrc.json을 프로젝트 루트에 추가한다.

여기에 기본 규칙과 플러그인, 코드 스타일 규칙을 정의할 수 있다.

{
  "extends": ["stylelint-config-standard"],
  "customSyntax": "postcss-styled-syntax",
  "plugins": ["stylelint-order", "stylelint-scss"],
  "rules": {
    "order/properties-alphabetical-order": true
  }
}

 

설정한 규칙들 :

• extends: stylelint-config-standard를 사용해 기본적인 스타일 규칙을 상속.
• customSyntax: postcss-styled-syntax로 CSS-in-JS 코드도 검사한다.
• plugins: stylelint-order로 속성 정렬을, stylelint-scss로 SCSS 구문을 검사한다.
• rules:
  • order/properties-alphabetical-order: 속성들을 알파벳 순서대로 정렬하도록 설정한다.

---

4. VSCode 설정

VSCode 편집기에서 파일 저장 시 자동으로 코드 스타일이 정리되도록 설정할 수 있다. 자동 저장이 아니라 스크립트를 사용해서도 가능하지만 난 저장 시 정리되는 게 편리하다고 생각해서 이 방식을 택했다.

 

settings.json 파일에 저장할 때 stylelint를 자동으로 적용하고, stylelint가 typescriptreact 파일도 검사하도록 설정했다.

{
	,,,
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": "explicit"
  },
  "stylelint.validate": ["css", "typescriptreact"],
  "stylelint.configFile": ".stylelintrc.json",
  "stylelint.packageManager": "yarn",
}

 

설정 설명 :

• stylelint.validate: CSS 및 typescriptreact 파일을 검사한다.
• editor.codeActionsOnSave: 파일을 저장할 때 Stylelint를 자동으로 실행해 코드를 정리하고 오류를 수정한다.
• stylelint.configFile: stylelint의 설정 파일 위치를 지정함.
• stylelint.packageManager: 패키지 관리 도구로 yarn을 사용.

---

5. VSCode 플러그인 설치

VSCode에서 Stylelint를 원활히 사용하려면 Stylelint 플러그인을 설치할 수도 있다.

Stylelint - Visual Studio Marketplace

 

---

 

이렇게 stylelint를 설정하면, CSS와 CSS-in-JS 파일의 코드 스타일을 통일하고 파일 저장 시 자동으로 정리하는 환경을 만들 수 있다. 그리고 코드 일관성을 유지하면서 협업 효율성을 높인다.

 

개인적으로 초기에 이런 세팅이 DX를 높이는 일 중 하나라고 생각한다. 초기 세팅이 조금 귀찮을 수도 있지만 꼭 시도해 보길 바란다.