Stylelint 적용하기

Stylelint를 사용해보자

Jun

2022년 10월 22일 · 0 분 소요

들어가며

요즘 하는 프로젝트들에는 Stylelint라는 package가 대부분 적용되어 있었습니다.

그동안 css를 작성할 때 정해진 순서와 구문을 지키면서 한땀 한땀 적어주었는데요. Stylelint가 적용되어 있다면 파일만 저장하면 자동으로 css 순서정렬과 올바르지 못한 구문을 잡아줘서 작업 효율이 올라가는 걸 경험했습니다.

프로젝트에 적용했을 때 굉장히 좋은 경험이었던 Stylelint를 소개해보려 합니다.

Stylelint란?

앞서 경험한 것을 유추해보면 알 수 있듯이 css 를 lint하는 도구입니다.
자바스크립트를 작성할 때 잘못된 구문을 잡아주는 eslint와 협업을 위해 많이 쓰이는 코드들의 스타일을 일관되게 적용해주는 prettier 이 두 가지는 많이 들어보셨을 것 같은데요.
Stylelint는 css 작성 시 이 두 가지 역할을 한다고 보시면 됩니다.

Stylelint 적용

거두절미하고 어떻게 적용하는지 알아볼까요?
vscode와 react, npm을 이용해서 설치해보겠습니다.

Stylelint 설치

vsocde에서 create-react-app으로 react 프로젝트를 하나 생성하고 실행합니다.
App.js에 className=”App” 의 안쪽 부분을 다 지운 다음 아래처럼 작성해봅니다.
src/App.css 코드를 다 지운 후 아래처럼 코딩 후 저장을 누르면 분명 font-size에 ;; 세미콜론이 두 개가 들어갔지만, 아무것도 잡아주지 않습니다.
또한 .stylelint와 .stylelint-copy 안의 속성 순서를 서로 다르게 적어도 반응하지 않습니다.
이제 이런 부분을 stylelint를 적용해서 잡아봅시다. npm으로 Stylelint를 설치합니다.
```
npm install --save-dev stylelint
```
그 후 파일을 저장했을 때 자동으로 Stylelint가 적용될 수 있게 root경로에 .vscode 폴더를 하나 만들고 settings.json 파일을 생성해 아래 코드를 넣어줍니다.
```
{
"editor.codeActionsOnSave": {
  "source.fixAll.stylelint": true // 저장했을 때 자동으로 stylelint를 적용
}
}
```
stylelint를 설치하고 재실행해도 별다른 변화가 없을 텐데요, stylelint-config-standard도 같이 설치해야 합니다.
여기서 stylelint-config-standard는 Stylelint에서 제공하는 기본적인 규칙에 대한 패키지입니다.
```
npm install --save-dev stylelint-config-standard
```
설치 후 root 경로에 .stylelintrc.json 파일을 생성합니다.
이 파일에서 stylelint의 규칙을 정할 수 있습니다. 생성 후 아래처럼 작성합니다.
```
{
"extends": ["stylelint-config-standard"]
}
```

다시 package.json으로 돌아와서 script 부분 아래에 lint:css 코드를 추가한 후 npm run lint:css 를 실행하면 터미널에서 아래처럼 App.css에 세미콜론이 두 개 들어가서 오류가 났다는 사실을 알 수 있습니다.

{
"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "lint:css": "stylelint --ignore-path .gitignore **/*.css" // 뒤에 --fix를 붙이면 실행 시 자동으로 수정
}
}

프로젝트를 재 실행한 후에 App.css 파일을 저장하면 자동으로 세미클론 2개가 들어갔던걸 1개로 고쳐주게 됩니다.

Stylelint 순서정렬

아직 속성의 순서는 바뀌지 않았는데요, 순서를 정렬시켜주는 stylelint-order 플러그인이 따로 있습니다.

stylelint-order 설치 후 .stylelintrc.json 파일에 plugins으로 추가하면 됩니다.
그리고 규칙을 적용하면 되는데 order/properties-order 여기서 사용자가 정한 순서대로 속성을 정렬시킬 수 있습니다. 배열에 원하는 순서대로 속성을 적어봅시다.
```
npm install --save-dev stylelint-order
```
```
{
"extends": ["stylelint-config-standard"],
"plugins": ["stylelint-order"],
"rules": {
  "order/order": ["custom-properties", "declarations"],
  "order/properties-order": ["width", "height", "font-size", "color"]
}
}
```
다시 App.css 파일을 열어보면 이 프로젝트에서 설정한 순서대로 적히지 않았다고 오류 표시가 됩니다. 파일을 저장하면 정했던 순서로 자동 정렬 시켜줍니다.
stylelint-order 깃헙의 Example configs를 보시면 순서를 미리 커스텀해놓은 몇 가지 패키지들이 있는데요, 따로 순서를 정하지 않고 이런 커스텀 패키지를 사용하면 빠르게 프로젝트에 적용할 수 있겠죠?
```
{
"extends": ["stylelint-config-standard", "stylelint-config-idiomatic-order"]
}
```

Stylelint Rules

Stylelint의 좋은 점만 적어놨지만, 단점도 존재합니다. 너무 많은 규칙이 적용되어 있어서 가끔은 우리가 원하는 대로 규칙을 유동적으로 바꿔주어야 한다는 것입니다.

.stylelintrc.json을 열어보면 entends 아래에 rules가 있는데요. 여기에 다양한 규칙을 넣고 빼고 할 수 있습니다. (공식 사이트 rules를 참고해보세요.)

{
  "extends": ["stylelint-config-standard"],
  "plugins": ["stylelint-order"],
  "rules": {
    // 규칙
    "order/order": ["custom-properties", "declarations"],
    "order/properties-order": ["width", "height", "font-size", "color"]
  }
}

만약 vscode에서 class selector를 .styleLint라고 카멜케이스로 코드를 작성하면 아래처럼 오류가 납니다. vscode는 친절해서 오류를 알려주는데 class selector는 케밥케이스로 사용해야 해 라고 알려줍니다.
하지만 이를 무시하고 싶다면 오른쪽에 selector-class-pattern이라고 친절하게 어떤 부분을 수정하면 되는지 표시해줍니다. 클릭해서 들어가 보면 규칙을 정규식, string으로 적을 수 있는데 null을 적으면 이 속성을 무시하게 됩니다.
```
{
"extends": ["stylelint-config-standard"],
"plugins": ["stylelint-order"],
"rules": {
  "order/order": ["custom-properties", "declarations"],
  "order/properties-order": ["width", "height", "font-size", "color"],
  "selector-class-pattern": null
}
}
```
null로 저장하면 아래처럼 오류가 안 나는 모습을 볼 수 있습니다.

마치며

오늘은 프로젝트에서 유용하게 쓰던 Stylelint를 알아보았는데요.
사용하면서도 직접적으로 설치 해 본 적은 없어서 이 기회에 직접 설치도 하고 어떤 기능들이 있는지 자세히 알아볼 수 있는 시간이었습니다.

다른 분들도 따라 해보면서 직접 프로젝트에 설치해보고 사용하시면 저처럼 계속 사용하고 싶다고 느끼실 것 같습니다 😏

읽어주셔서 감사합니다. 😎

참고문서

Stylelint