CSS 정적 분석 도구 중 하나인 stylelint는 많이 사용되는 CSS 린트 툴 중 하나로 최신 CSS 문법을 지원하며 규칙을 쉽게 추가할 수 있다.
npm 명령어를 사용해서 설치할 수 있다.
$ npm install --save-dev stylelint stylelint-config-recommended
이후 package.json
에 script
를 추가해서 npm 명령어로 stylelint를 실행할 수 있다.
"scripts": {
"stylelint": "stylelint ./*.css" // 현재 프로젝트 내의 모든 CSS를 실행
}
설정은 package.json
의 stylelint
, stylelint.config.js
, .stylelintrc.{js, json, yml}
를 이용해서 적용할 수 있다. 사용 가능한 규칙들과 더 자세한 내용은 공식 문서를 참조하면 된다.
stylelint-config-recommend
: stylelint에서 권장하는 규칙을 제공하는 설정 확장 모듈
예시) stylelint-config-recommend을 적용한 후 색상명을 이름으로 사용할 수 없는 규칙을 추가
/* .stylelintr.json */
{
"extends": ["stylelint-config-recommended"],
"rules": {
"color-named": "never"
}
간단한 예제를 작성한 후 $ npm run stylelint
를 CLI에서 실행하면 Unexpected named color "pink"
와 Unexpected named color "black"
를 검출한다.
Stylelint는 더 편한 사용을 위해서 에디터와의 통합을 지원한다. 이를 통해서 CLI에서 실행하지 않고도 에디터상에서 파일을 저장함과 동시에 Stylelint를 실행할 수 있다. 주로 사용되는 VSC에 Stylelint를 통합해보자. 그외의 에디터와의 통합은 공식 문서를 참조하면 된다.
VSC에 통합하기 위해서는 VSC의 Stylelint extendsion을 설치하면 된다.
설치 완료하고 stylelint extendsion이 Enable
되면 VSC 에디터 레벨에서 피드백을 확인할 수 있다.
마지막으로 자동 수정(Autofix)를 적용해보자. 모든 규칙이 자동 수정이 가능하지는 않고 공식 문서의 rules에 정리되어 있는 규칙들 중에서 Autofixable
라고 명시되어 있는 규칙들만 자동 수정이 적용된다.
자동 수정을 적용하기 위해서 package.json
의 script
에 --fix
옵션을 추가해준다.
"scripts": {
"stylelint": "stylelint ./*.css --fix" // 현재 프로젝트 내의 모든 CSS를 실행
}
위 예제는 자동 수정이 불가능한 규칙이기 때문에 정상 동작하는지 확인해보기 위해서 추가적인 세미콜론을 허용하지 않는 no-extra-semicolons
규칙을 추가하겠다.
"rules": {
"color-named": "never",
"no-extra-semicolons": true
}
CLI에서 $ npm run stylelint
를 실행하면 Autofixable
이 명시된 규칙만 수정된다.
에디터와 통합했기 때문에 굳이 CLI에서 실행할 필요없이 에디터 상에서 파일 저장시 stylelint가 자동으로 실행되도록 할 수도 있다. 이를 위해서 Preference - Setting
이나 Command + , -> open setting
클릭 으로 Setting.json
으로 이동한 후 아래의 내용을 추가해준다.
"editor.codeActionsOnSave": {
"source.fixAll.stylelint": true
},
이제는 에디터 상에서 파일을 저장만 하더라도 이전과 같이 자동 수정이 저장된다.
Prettier는 stylelint와의 통합을 지원하는데 이를 위해서는 서로 간의 충돌을 제어할 추가적인 stylelint-prettier와 stylelint-config-prettier 모듈이 필요하다.
stylelint-config-prettier
: Prettier와 충돌하는 ESLint의 규칙들을 비활성화한다.stylelint-prettier
: Prettier의 규칙들을 Stylelint의 규칙으로 추가한다.$ npm install --save-dev stylelint-prettier stylelint-config-prettier
Stylelint의 설정 파일의 extends
에 설치한 패키지를 추가한다.
{
"extends": [
"stylelint-config-prettier"
]
}
{
"plugins": ["stylelint-prettier"],
"rules": {
"prettier/prettier": true
}
}
Prettier는 두 패키지를 함께 사용하는 단순한 설정을 제공한다. 이를 이용하면 각각의 패키지를 따로 설정하지 않고 아래의 설정만으로 사용할 수 있다.
// .stylelintrc.json
{
"extends": [
"stylelint-config-recommended",
"stylelint-prettier/recommended"]
}
좋은 글 감사합니다~