Stylelint 설정

VSCode에서 Stylelint 설정하기

Stylelint는 css,scss,less등 style 구문을 린팅하는 도구

step 1

VSCode 익스텐션 설치

step 2

VSCode 설정 변경 (settings.json)

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

step 3

Stylelint 관련 패키지 설치

$ npm i stylelint stylelint-config-standard

step 4

.stylelintrc.js 파일 작성

.stylelintrc.js 파일 생성

$ touch .stylelintrc.js

내용 추가 (.stylelintrc.js)

module.exports = {
  extends: ['stylelint-config-standard'],
  plugins: ['stylelint-scss', 'stylelint-order'],
  rules: {
    "selector-list-comma-newline-after": null, // 콤마로 연결된 선택자 자동 개행 취소
    "selector-list-comma-space-after": "always", // 콤마로 연결된 선택자의 콤마 뒤 스페이스
    "alpha-value-notation": "number", // 퍼센트 값이 아닌 넘버값으로
    "rule-empty-line-before": "never", // 규칙 앞에 빈줄 금지
    "declaration-block-semicolon-newline-after": "always", // 속성값 선언 후 개행
    "comment-empty-line-before": null, // 주석 앞에 빈 줄 요구 취소
  },
};

참고 https://velog.io/@kyusung/stylelint