스타일린트 윈도우와 맥에서의 차이점

현재 나는 맥에서 stylelint를 세팅하여, 맥에서 stylelint가 잘 작동이 하였다.

하지만 같이 개발하는 윈도우 사용자의 개발자가 스타일린트에 대해서 에러가 난다며 질문이 왔다.

처음 package.json에서의 스타일린트 스크립트는 다음과 같았다.

{
	...
	"stylelint": "stylelint './src/**/*.{ts,tsx}'"
	...
}

이 코드에서의 문제점은 script를 작성할 때, key값을 이미 있는 명령어로 사용하면 안되는 것이다.

그래서, lint:style로 수정을 한 후, 다시 실행을 해보았지만, 스타일린트 스크립트 명령이 잘 먹지 않았다.

하지만, 직접 코드로 스타일린트 명령어를 치면서 테스트를 해보니까, 잘 작동하는 것을 봤다.

즉! 윈도우는 스크립트 내의 ‘경로' 의 작은 따옴표를 인식하지 못하던 것이다.

작은 따옴표를 제거하고, 맥에서 테스트를 하였더니 맥에서 작동하지 않았다.

윈도우와 맥에서 같이 작동하게하려면?

"scripts" : {
	...
	"lint:style": "stylelint \\"./src/**/*.{ts,tsx}\\"",
	...
},

위와 같이 \를 이용하여 경로를 인식하게 해주었다.

또한, prettier와 충돌이 맥에서는 일어나지 않았지만, 윈도우에서 프리티어와 충돌이 일어나는 문제가 발생했다.

yarn add -D stylelint-config-standard stylelint-config-prettier

stylelint-config-standard - 스타일린트의 표준

stylelint-config-prettier - prettier의 충돌을 방지해줌

을 같이 설치해주었다.

.stylelintrc에서 플러그인에 두 라이브러리를 추가해주어 해결하였다.

나는 처음에, stylelint도 husky로 자동화하면서 —fix 옵션을 주었었는데,

—fix 옵션을 사용하면서 윈도우에서 styled-components의 코드를 몇몇개 잘못 고쳐내는 점이 발생했다.

${({ isShow }) =>
	isShow
    ? css`
        visibility: 'visible';
        opacity: 1;
      `
    : css`
        visibility: 'hidden';
        opacity: 0;
`}

위와 같이 ${ 로 시작하는 부분은 괜찮으나, } 로 끝나는 부분이 stylelint 에러에서 잡히진 않으나,

stylelint —fix를 하면 자꾸 없어지던 문제가 생겼다.

그래서 실행을 하면 자꾸 괄호 닫는게 없다는 에러가 나왔다.

 

function-no-unknown에 대해 ${로 시작하는 부분이 에러가 뜬적이 있어서,

}로 끝나는 정규식을 제외한다라며 테스트를 해보고, 이것저것 다 테스트를 해봤더니 이것도 아니었다.

null로 하여 테스트를 진행해보았더니.. 이것도 아니었다.. 

생각해보니 stylelint에서 에러가 잡히지 않았으니, 스타일린트에 대한 에러는 아닌 것 같기도 한 생각이 들었다.

 

현재는 임시로 husky를 돌면서 --fix를 없애 해결하였다. 이 부분은 추후 해결방안을 찾아봐야겠다.

윈도우에서만 일어나니까, 맥을 쓰는 나로써는 문제점이 있는지도 몰랐다. 

 

그래도 이로써 경로를 줄 때, 윈도우와 맥에서의 차이를 알 수 있었다.

 

윈도우와 맥에서 다를줄이야.. 더 공부를 해봐야겠다.