stylelint 설정

stylelint

CSS, SCSS와 같은 스타일시트 코드 작성 시 정렬 및 오류를 찾아주는 분석 도구

eslint와 같이 코드 실행 없이도 코드 내에서 잘못된 점을 바로 찾아준다

스타일시트 특성상 작성한 코드 양이 많아질 수록 개발자도 헷갈려서 중복된 스타일을 적용할 가능성이 높아지는데, stylelint를 통해 일관된 코드와 순서를 지키면 중복 코드 작성 여지가 확 줄어든다

설치하기

$> npm install -D stylelint stylelint-config-standard stylelint-config-styled-components stylelint-processor-styled-components stylelint-config-standard-scss stylelint-config-recess-order stylelint-declaration-strict-value

stylelint: 본체

stylelint-config-standard: 기본

stylelint-processor-styled-components, stylelint-config-styled-components: styled components용

stylelint-config-standard-scss: scss용

stylelint-config-recess-order: css 스타일 프로퍼티들을 Resess와 같은 방식으로 정렬해줌

stylelint-declaration-strict-value: 각 프로퍼티가 값을 갖고 있는지, 정상적인 값인지 등

stylelintrc.json 파일 작성

$> touch .stylelintrc.json

.stylelintrc.json 파일 내에 교정해주길 원하는 사항들을 적어넣으면 된다

prettierrc.json과 비슷하다 (eslintrc.json은 거의 예외 사항만 적어넣으므로)

stylelint의 vscode 확장

위의 확장을 설치하면, 프로젝트의 루트 폴더에서 stylelint 세팅을 읽어와 자동으로 에러 검출을 시작한다

예시 이미지를 슬쩍 보니 클래스명에 -가 들어가있어서 오류, 색상명에 이름을 그대로 넣어서 오류, 스타일 순서가 맞지 않아서 오류...