[ESLint & Prettier] expected indentation of 2 spaces but found 4.

expected indentation of 2 spaces but found 4.

 

ESLint 사용 중
expected indentation of 2 spaces but found 4. eslint(indent) 라는 오류가 발생해서
세상 여기저기 시뻘겋게 밑줄이 생겼다.

VSC 설정 중 Tab Size 를 4로 설정해서인가?!🙄
라고 생각했지만 이걸 수정해도 오류는 여전했다.

VSC - Settings - Editor: Tab Size

 

 

구글링 해본 결과 ESLint 와 Prettier 의 포맷팅의 충돌로 보인다고들 한다.

 

간단한 해결 방법으로는 .eslintrc.js 파일에서 요로케 indent 부분만 off 하면 되지만,

rules: {
        indent: 'off',
}

 

다른 포맷팅에서도 충돌 할 수 있기 때문에,
아래의 방법을 사용하여 eslint의 설정 중, prettier와 충돌하는 rule만 off 할 수 있다.

eslint-config-prettier :  Turns off all rules that are unnecessary or might conflict with Prettier.

 

터미널에서 eslint-config-prettier 를 설치한다.

npm install --save-dev eslint-config-prettier

 

그리고 .eslintrc.* 파일의 extends 영역 array 값 마지막에 "prettier" 을 추가한다.

{ 
	"extends": [ "some-other-config-you-use", "prettier" ] 
}

 

 

해결 완료

답답해 뒤지는줄 알았다

 

출처 : https://github.com/prettier/eslint-config-prettier

prettier/eslint-config-prettier

expected indentation of 2 spaces but found 4.

VSC ESLint 들여쓰기 오류

VSC ESLint 탭