Stylelint

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와 통합

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-config-prettier

Stylelint의 설정 파일의 extends에 설치한 패키지를 추가한다.

{
  "extends": [
    "stylelint-config-prettier"
  ]
}

stylelint-prettier

{
  "plugins": ["stylelint-prettier"],
  "rules": {
    "prettier/prettier": true
  }
}

Prettier는 두 패키지를 함께 사용하는 단순한 설정을 제공한다. 이를 이용하면 각각의 패키지를 따로 설정하지 않고 아래의 설정만으로 사용할 수 있다.

// .stylelintrc.json
{
  "extends": [
    "stylelint-config-recommended",
    "stylelint-prettier/recommended"]
}

참조

• https://stylelint.io/

---