Stylelint (with Vue/SCSS), 스타일 오류 방지 및 규칙 적용 도구

스타일린트란

스타일 코드의 오류를 방지하고 스타일에 규칙을 적용할 수 있도록 도와주는 도구입니다.

설치

Stylelint는 크게 'Avoid errors' 와 'Enforce conventions' 라고 하는 규칙을 기본으로 제공하고 있습니다.

• stylelint-config-recommended : 오류를 방지하는 'Avoid errors' 규칙들만 적용
• stylelint-config-standard : 'Avoid errors'에 확장하여 'Enforce conventions' 규칙들도 적용

Prettier를 사용 중이라면 서로의 규칙이 충돌하지 않도록 stylelint-config-prettier 를 추가로 설치합니다.

CSS

npm install --save-dev stylelint stylelint-config-standard stylelint-config-prettier

yarn add --dev stylelint stylelint-config-standard stylelint-config-prettier

SCSS

npm install --save-dev stylelint stylelint-config-standard-scss stylelint-config-prettier-scss

yarn add --dev stylelint stylelint-config-standard-scss stylelint-config-prettier-scss

Vue

npm install --save-dev stylelint postcss-html stylelint-config-standard-vue stylelint-config-prettier

yarn add --dev stylelint postcss-html stylelint-config-standard-vue stylelint-config-prettier

Vue with SCSS

npm install --save-dev stylelint stylelint-config-standard-scss postcss postcss-html postcss-scss stylelint-config-standard-vue stylelint-config-prettier-scss

yarn add --dev stylelint stylelint-config-standard-scss postcss-html postcss postcss-scss stylelint-config-standard-vue stylelint-config-prettier-scss

설정

프로젝트 폴더 최상단에 .stylelintrc.json 파일을 생성하고 다음의 코드를 추가합니다.

CSS

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

SCSS

{
  "extends": [
    "stylelint-config-standard-scss",
    "stylelint-config-prettier-scss"
  ]
}

Vue

{
  "extends": [
    "stylelint-config-standard-vue",
    "stylelint-config-prettier-scss"
  ]
}

Vue with SCSS

{
  "extends": [
    "stylelint-config-standard-scss",
    "stylelint-config-standard-vue/scss",
    "stylelint-config-prettier-scss"
  ]
}

실행

package.json 에 다음의 코드를 추가하여 지정한 명령어로 실행합니다.

CSS

"scripts": {
  "lint:css": "stylelint '**/*.css'"
},

npm run lint:css

yarn lint:css

SCSS

"scripts": {
  "lint:css": "stylelint '**/*.scss'"
},

npm run lint:scss

yarn lint:scss

Vue

"scripts": {
  "lint:css": "stylelint '**/*.vue'"
},

npm run lint:css

yarn lint:css

수정

다음과 같이 임의의 규칙 코드를 추가하면 유효하지 않은 16진수 색상값을 방지하는 규칙을 설정할 수 있습니다.

{
  "rules": {
    "color-no-invalid-hex": true
  }
}

자동화

커밋 메시지 생성 전에 스테이징된 파일들을 검사하고자 합니다.
먼저, 관련 패키지를 설치합니다.

yarn add --dev husky lint-staged

package.json 에 아래의 코드를 추가합니다.

"husky": {
    "hooks": {
      "commit-msg": "node git-hooks/commit-msg.js",
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{vue,css,scss}": [
      "stylelint --fix"
    ]
  },