stylelint 🎨 스타일에도 린트 적용하기

프론트엔드 개발에서 코드 스타일을 일관되게 유지하는 것은 매우 중요하다.

협업을 할수록, 여러 사람이 동일한 스타일로 코드를 작성하는 것은 나중의 유지보수를 위해서도 아주 중요한 일이다.

(동일한 스타일이면, 당연하게도 가독성이 높아진다 🙌)

 

동일한 스타일로 코드를 작성할 수 있게 ESLint가 JavaScript 코드 스타일을 검사하는 것처럼, CSS 코드 스타일을 검사해주는 도구가 바로 Stylelint다.

 

🍰 Stylelint는 CSS, SCSS, LESS 등의 스타일 코드에서 오류를 잡고, 일관된 코드 스타일을 유지하도록 도와주는 린터(Linter)이다.

 

+ scss와 함께 사용하기 위해 stylelint-config-standard-scss 플러그인을 설치할 수 있다. 

scss 설정 공식문서

Stylelint의 주요 기능

• 코드 스타일 검사
      지정한 규칙에 따라 스타일 코드가 올바르게 작성되었는지 검사
• 자동 수정 기능
      간단한 스타일 오류를 자동으로 고칠 수 있음
• 확장 가능 
      플러그인을 추가해 팀이나 프로젝트에 맞는 스타일 규칙을 정의할 수 있음
• Prettier와 연동 가능
      Prettier와 함께 사용해 코드 포매팅까지 손쉽게 설정 가능

 

style에도 적용할 수 있는 lint도구가 있는걸 알았으니, 직접 적용해보는 간단한 예제를 만들어보기로 했다.

Stylelint 직접 사용해보기

stylelint은 init tool을 제공하기 때문에, 간단하게 사용할 수 있다.

npm init stylelint

 

명령어 실행 후 create-stylelint 설치에 YES하면 필요한 패키지와 설정이 자동으로 추가된다.

.stylelintrc.json 파일이 자동으로 생성되고, npx stylelint "**/*.css" 와 같은 명령어로 stylelint를 실행할 수 있다고 안내하고 있다.

// 기본으로 생성된 .stylelintrc.json
{ "extends": ["stylelint-config-standard"] }

 

package.json에 추가된 패키지를 살펴보면, 다음과 같다. 

기본 설정이 자동으로 설치가되어 적용되었음을 확인할 수 있다.

    "stylelint": "^16.14.1",
    "stylelint-config-standard": "^37.0.0",

 

+ vscode에서 stylelint extension도 설치해주자. 설치하면 ide에서 css 파일을 열면 lint 에러를 표시해준다.

 

만약, lint 검사에서 제외하고 싶은 css가 있다면 .stylelintignore를 작성할 수 있다.

vendor/**/*.css
node_modules/
.next/
dist/

 

이번엔 실제로 스크립트를 작성하고 린트를 실행해보았다.

"scripts": {
  ...
  "lint:css": "stylelint '**/*.{css,scss,sass}'"
}

#ffffff로 표현된 색상을 #fff로 작성하라고 린트 에러가 나는 것을 확인할 수 있다.

 

--fix 옵션까지 설정하면, 자동으로 린트 에러가 발생한 css 파일이 수정된다.

"scripts": {
  ...
  "lint:css": "stylelint '**/*.{css,scss,sass}' --fix"
}

 

--fix 옵션

 

어차피 fix 옵션을 설정할 것이라면, prettier에서 해당 내용이 적용될 수 있도록 설정하면 좋다고 생각했지만, stylelint-config-prettier 플러그인이 더 이상 관리가 되지 않고 있었다.

 

대신, stylelint-prettier 라는 플러그인이 있어서 적용해봤다.

 

npm i -D stylelint-prettier

 

.stylelintrc.json에 해당 플러그인을 추가해준다.

{ 
    "extends": [
        "stylelint-config-standard",
        "stylelint-prettier/recommended"
    ]
}

 

그리고 .vscode/settings.json에 추가로 설정을 해주면, 저장할 때 stylelint가 적용되게 설정할 수 있다.

{
  "editor.formatOnSave": true, // 저장 시 자동 포매팅
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
  },
  "css.validate": false,
  "scss.validate": false,
  "stylelint.validate": ["css", "scss", ".module.scss"],
  "stylelint.enable": true,
}

 

CSS의 작성 스타일은 크게 신경쓰지는 않았던 것 같은데, 코드만큼 많이 작성하게 되는 스타일인만큼, 린트를 적용해서 통일된 스타일을 적용하면 좋은 것 같다 😎

 

+ husky의 pre-commit에도 적용한 stylelint가 돌 수 있도록 해주자

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx lint-staged
npm run lint:css

 

작성한 예제 코드 🍔

https://github.com/citron03/practice-next-15/commit/86ec1a606a618cd9604e6908f3720d2c73470ded

feat(style): add stylelint · citron03/practice-next-15@86ec1a6

 

 

🔭 참고자료

https://stylelint.io/

Home | Stylelint

https://www.npmjs.com/package/stylelint-config-standard

stylelint-config-standard

https://www.npmjs.com/package/stylelint

stylelint

https://www.npmjs.com/package/stylelint-config-prettier

stylelint-config-prettier