Stylelint

leo-xee·2021년 3월 8일
1

CSS

목록 보기
11/11
post-thumbnail

Stylelint

CSS 정적 분석 도구 중 하나인 stylelint는 많이 사용되는 CSS 린트 툴 중 하나로 최신 CSS 문법을 지원하며 규칙을 쉽게 추가할 수 있다.

설치

npm 명령어를 사용해서 설치할 수 있다.

$ npm install --save-dev stylelint stylelint-config-recommended

이후 package.jsonscript를 추가해서 npm 명령어로 stylelint를 실행할 수 있다.

"scripts": {
  "stylelint": "stylelint ./*.css"	// 현재 프로젝트 내의 모든 CSS를 실행
}

설정

설정은 package.jsonstylelint, 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.jsonscript--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-prettierstylelint-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/

profile
Javascript와 Golang에 관심

0개의 댓글