Stylelint 설정하기

VSCode에서 Stylelint를 설정하는 방법을 설명합니다.

---

Stylelint

Stylelint는 css,scss,less등 style 구문을 린팅하는 도구입니다.

VSCode 확장 설치

https://marketplace.visualstudio.com/items?itemName=Daosro.stylelint

VSCode 설정 변경 (settings.json)

 "editor.codeActionsOnSave": {
    // "source.fixAll": true,
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "stylelint.enable": true,
}

Stylelint 관련 패키지 설치

$ yarn add stylelint stylelint-config-standard stylelint-scss stylelint-order

.stylelintrc.js 파일 작성

$ touch .stylelintrc.js

module.exports = {
  extends: ['stylelint-config-standard'],
  plugins: ['stylelint-scss', 'stylelint-order'],
  rules: {
    'at-rule-no-unknown': null,
    'scss/at-rule-no-unknown': true,
    'order/properties-alphabetical-order': true,
    'no-empty-source': null,
    'rule-empty-line-before': null,
    'selector-list-comma-newline-after': null,
    'no-descending-specificity': null
  },
};

❗VSCode를 한꺼번에 설정을 하다보면 동작을 안할때가 있는데 꺼다키면 됩니다(..!?뭔)