stylelint 확장자 lint 검사 오류

생성일

Dec 3, 2021 06:44 AM

기록자

해결 여부

속성

Stylelint

카테고리

이슈

개발 환경 세팅

린터 및 포맷터

🔍 문제 및 궁금증

아구야... 계속해서 린트 검사에서 오류가 뜬다.

스택 오버 플로우에서 다양한 답변을 들었고, 대부분이 webpack.config.js의 세팅 문제라고 지적하며 이를 다양한 방법으로 바꾸며 시도했다.

그러나 답은 나오지 않았는데...

해결 방법

일단 누구의 검사에서 나온 것인지 정확히 하자

민철 형이 공유해준 정말 결정적인 체크 사항이었다.

따라서 eslint와 stylelint 검사에 대해 별도로 수행해준 결과, 의외로 stylelint에서 오류가 발생했다.

즉, CSS인 줄 알고 내가 검사했는데, 얘 모르는 애야! 하는 거다.

옵션을 추가해줘야 한다.

디렉토리를 무시하는 옵션을 styelintignore에서 하려고 하였으나... 이는 정확히 특정 확장자만을 지정해서 해주지는 않더라.

따라서 나는 다른 방법으로 모색했고, 결과적으로 stylelintrc에서 확장자를 무시하는 옵션을 알게 됐다.


module.exports = {
  extends: [
    'stylelint-config-sass-guidelines',
    'stylelint-config-concentric-order',
    'stylelint-prettier/recommended',
  ],
  plugins: ['stylelint-scss', 'stylelint-order'],
  rules: {
    'order/properties-alphabetical-order': null,
    'prettier/prettier': [true, { trailingComma: 'none' }],
    'selector-max-id': 1,
  },
  ignoreFiles: ['src/assets/**/*.png'], // 해당 부분을 추가했다.
};

결과적으로... 잘 작동한다!

결정적인 답변을 해준 민철 햄님께 고마움의 컨트리뷰터를 달았다! 😄

참고자료

https://stackoverflow.com/questions/56414776/stylelint-ignore-specific-folders-and-files