[stylelint] CSS Linter인 stylelint 적용하기!

CSS Linter 중에 가장 많이 사용된다고 하는 stylelint 적용 방법에 대해 알아보자!

stylelint 설치

npm install -D stylelint

stylelint 설정 파일 작성

// .stylelintrc.js

module.exports = {
  rules: {
    "color-no-invalid-hex": true,
  },
};

• .stylelintrc.js 파일을 생성해 규칙을 작성할 수 있다.

• 위에 적용한 규칙은 알아볼 수 없는 hex 값을 색상 값으로 설정했을 때 오류를 발생시킨다.

적용한 규칙 실행 명령어

npx stylelint ./src/css/index.css

npx stylelint ./src/css/index.css --fix

• --fix 옵션을 붙이면 수정해야할 부분에 대해 수정도 같이 진행해준다!

• 실행 결과

이미 정해진 규칙 사용

패키지 설치

npm install -D stylelint-config-standard

• 구글 & 에어비앤비 스타일 가이드를 포함하고 있는 패키지를 설치해준다.

설정 파일에 추가

module.exports = {
  extends: "stylelint-config-standard",
  rules: {
    "color-no-invalid-hex": true,
  },
}

• 설치한 패키지 내 규칙들을 상속 받는다는 의미로, 다른 규칙들을 추가하거나 수정하는 등의 확장이 가능하다.

규칙을 무시할 파일 설정

// .stylelintignore

index.css

/* 비활성화 블록 생성 */
/* stylelint-disable */
header {
  color: "#fff";
}
/* stylelint-enable */

다음에는 Prettier 설정 과정에 대해서도 정리해보겠다!