저는 CSS를 작성할 때, 필요한 속성이 있으면 브라우저에서 테스트해보고 작성해 넣는 습관이 있습니다.
해당 요소를 (맥북기준) cmd + shift + C 키로 선택하고 필요한 속성을 넣어보고 적절한 경우 복사해서 CSS파일에 붙여넣습니다.
이경우 문제점이 있는데, 개발자 도구에서 style을 수정 할 때 해당 속성을 넣고싶은 위치에 넣기가 불편하고 여러가지 넣다보면 속성의 순서가 뒤죽박죽이 되는 현상이 발생합니다.
그래서 제가 일본기업에 근무할 때는
npm run fmt:stylelint
이러한 스크립트로 뒤죽박죽이 된 속성을 정렬하고, css 코드를 정리를 해주었습니다.
최근 개인용 웹페이지를 작성하던 도중 이것이 생각나서 한번 찾아보게 되었습니다.
stylelint란?
stylelint 는 CSS 코드의 정적 분석 도구로서, 스타일 시트의 코드 품질을 향상시키고 일관성을 유지하는 데 도움을 주는 라이브러리 입니다.
제가 적용한 코드로 예시를 잠깐 보여드리면
위가 적용후, 아래가 적용전 입니다.
보기 조금 불편하지만 살펴보면, padding-top 이 2번째 라인에 있었지만 첫번째 라인으로 올라왔습니다. color 또한 3번째 라인에서 마지막 라인으로 순서를 변경시켰습니다.
또, 들여쓰기도 줄어든 것을 볼 수 있습니다.
이런식으로 명령어 한번으로 프로젝트의 모든 css파일을 정리, 정렬해 줄 수 있습니다. (color 의 rgb도 소문자로 바꼈네요)
적용 방법
설치
일단 stylelint 라이브러리를 install 해 주어야 합니다.
// package.json
{
"devDependencies": {
...
"stylelint": "^13.8.0",
"stylelint-config-prettier": "^8.0.2",
"stylelint-config-recess-order": "^2.3.0",
"stylelint-config-standard": "^20.0.0",
"stylelint-order": "^4.1.0",
"stylelint-scss": "^3.18.0"
}
}stylelint-config-prettier
stylelint 와 prettier 를 통합하여 코드 포맷팅을 관리하는 데 사용
stylelint-config-recess-order
stylelint-order 플러그인의 설정을 미리 정의한 구성(config) 파일입니다.
stylelint-config-standard
이 플러그인은 CSS의 표준 스타일 가이드에 따라 코드를 검사하고 포맷팅하는 데 사용됩니다. 들여쓰기, 공백, 따옴표 등의 규칙을 적용하여 일관성을 유지합니다.
stylelint-order
stylelint 에서 코드 스타일의 순서를 검사하고 관리하기 위한 플러그인
stylelint-scss
SCSS 파일에서 특정 규칙을 적용하도록 도와주는 플러그인
위의 라이브러리들을 설치해줍니다.
(package.json을 수정 후, npm install 해줍니다.)
.stylelintrc.json 파일 작성
설치가 끝나면
.stylelintrc.json 파일을 작성해 줍니다.
{
"plugins": ["stylelint-scss", "stylelint-order"],
"extends": [
"stylelint-config-standard",
"stylelint-config-prettier",
"stylelint-config-recess-order"
],
"rules": {
... 필요한 rule 추가
}
}
plugins 로 해당 라이브러리를 사용하는 것을 알리고,
extends 로 기존 스타일 가이드나 설정을 확장해줍니다.
작성이 끝나면
package.json 에 script 추가
{
"scripts": {
...
"fmt:stylelint": "stylelint --fix '**/*.scss'",
...
},
}(저는 scss를 사용하고 있기 때문에 **/*.scss 로 작성했지만, css를 사용하신다면 scss가 아닌 css로 작성하면 될 것 입니다.)
위 json파일을 참고하여 scripts를 작성해 줍니다.
실행
그리고 이제 시작해주면 되는데,
npm run fmt:stylelint
위 명령어를 실행해 주면,
이렇게 대량의 scss파일이 정리가 됩니다!
stylelint는 제가 일본에 있을 때도 사용했던 라이브러리라 조금 쉽게 설정할 수 있었습니다.
뿐만아니라, git에 commit 할 때, 해당 포맷이 지켜지지 않으면 에러가 발생하게 하는 등의 작업도 가능합니다.
(아직 제가 설정해본적은 없어서 나중에 해볼까 합니다.)
긴 글 읽어 주셔서 감사합니다.
