Vue 3 프로젝트에서 Stylelint 도입하기

Vue 3 프로젝트를 진행하면서 SCSS를 사용하게 될 경우, 코드 스타일의 일관성을 유지하고 협업 효율성을 높이기 위해 ESLint와 Prettier 뿐만 아니라 Stylelint를 도입하는 것이 중요합니다. Stylelint를 통해 SCSS 포맷을 통일화하면, 탭 사이즈 등 코드 형식을 일관되게 유지할 수 있어 작성법을 표준화하고 코드 충돌의 위험을 줄일 수 있습니다.

Stylelint 설치 및 설정

먼저, Stylelint를 설치합니다.

npm install stylelint stylelint-scss stylelint-config-standard-scss --save-dev

설치가 완료되면, 프로젝트 루트에 .stylelintrc.json 파일을 생성하고 다음과 같이 설정합니다

{
  "extends": "stylelint-config-standard-scss",
  "rules": {
    "color-hex-case": "lower",
  }
}

필요에 따라 아래와 같이 추가 설정이 가능합니다

{
    "plugins": ["stylelint-scss", "stylelint-order"],
    "extends": [
        "stylelint-config-standard-scss",
        "stylelint-config-recommended-vue/scss",
        "stylelint-config-prettier-scss"
    ],
    "customSyntax": "postcss-html",
    "rules": {
        "color-hex-case": "lower",
        "order/properties-alphabetical-order": true // 
    }
}
	

Plugin

• stylelint-scss: SCSS 문법에 대한 지원을 추가합니다. SCSS를 사용할 때 유용한 다양한 규칙을 제공합니다.
• stylelint-order: CSS 속성의 순서를 정렬하는 기능을 제공합니다. 예를 들어, 알파벳 순서로 속성을 정렬할 수 있습니다.

Extends

• stylelint-config-standard-scss: 표준 SCSS 규칙을 포함하고 있는 Stylelint 구성입니다. 기본적인 스타일 규칙을 설정하여 코드 일관성을 유지합니다.
• stylelint-config-recommended-vue/scss: Vue.js와 SCSS를 함께 사용할 때 권장되는 Stylelint 규칙을 포함합니다. Vue 파일 내에서 SCSS 스타일을 검사할 때 유용합니다.
• stylelint-config-prettier-scss: Prettier와의 호환성을 위해 일부 Stylelint 규칙을 비활성화합니다. 이를 통해 Prettier와 Stylelint 간의 충돌을 방지합니다.

추가 설정

• customSyntax: postcss-html을 사용하여 .vue 파일 내의 스타일을 분석할 수 있도록 설정합니다. 이를 통해 Vue 컴포넌트 파일에서 스타일을 검사할 수 있습니다.

Figma 색상 코드 소문자로 변환
프로젝트를 진행하면서 가장 필요했던 부분은 Figma에서 복사한 색상 코드가 대문자로 표시되는 것을 소문자로 변환하는 룰이었습니다. 이를 위해 color-hex-case 규칙을 "lower"로 설정하여 대문자로 작성된 색상 코드가 자동으로 소문자로 변환되도록 합니다.

VSCode 설정

VSCode에서 코드 저장 시 자동으로 스타일이 수정되도록 설정하면 더욱 편리합니다. 이를 위해 VSCode의 settings.json 파일에 다음 설정을 추가하세요

  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
  },