문제

프로젝트 초기 설정을 하면서 팀원 중 한분이 VSCODE 에서는 공백이 2칸으로 보이지만,
GitHub에서는 tabs 8칸으로 보인다고 하셔서 "뭐가 문제인거지?" 하고 봤는데 너무 들여쓰기가 과하게 되어있었다. 작업 진행하는데는 별 문제 없었지만, 나도 보기에 너무 불편했다.
https://github.com/settings/appearance 에서
Tab size preference 8을 2로 변경하면 해결 되는 줄 알았다.
개인적으로 보기엔 적용이 잘 되지만 코드 Edit을 누르면 tabs 8로 설정 되어 있었다. 이건 개인 설정문제가 아닌 코드에 문제인걸 직감했다.

원인

나는 프로젝트 초기 셋팅을 맡았는데 eslintrc 와 prettierrc를 설정했었다. 하지만 둘의 충돌로 인해 VSCODE에서는 2칸으로 적용 되었으나,
github에선 tabs indent Size 8로 보이는 현상이 발생함.
prettier는 tab을 이용하고 eslint는 space를 이용한다고...

해결

<script>
// eslintrc.json
{
	"rules": {
		"prettier/prettier": ["error", 
        { "endOfLine": "auto", "useTabs": false }]
		}
    }
    </script>

prttierrc 파일은 수정 없이 eslintrc에서 useTabs : false를 추가했다.
Replace ·· with ↹ 에러 없이 적용할 수 있게 되었다.

참조

bella-velog