VS Code에서 Self-Closing JSX 태그 앞에 공백 추가 방지하는 방법
ESLint에서 금지 설정되어 있음에도 불구하고 VS Code가 Self-Closing JSX 태그 앞에 공백을 추가하는 문제가 발생하는 경우, 몇 가지 해결책을 시도해볼 수 있습니다.
옵션 1: VS Code 확장 기능 탐색
기본 VS Code 설정 내에 특정한 서식 옵션이 없지만, 원하는 동작을 얻기 위해 확장 기능을 사용할 수 있습니다. 코드 서식을 정리하기 위한 인기 있는 확장 기능 중 하나는 Prettier입니다. 그러나 이는 개인의 견해에 따라 다를 수 있고 모든 ESLint 규칙과 완전히 일치하지 않을 수 있습니다. 그럼에도 불구하고 ESLint 통합 기능을 제공하므로 시도해볼 가치가 있을 수 있습니다. 이 문제를 해결하는 기능을 가지고 있는 또 다른 확장 기능으로는 react-beautify 확장 기능이 있습니다. 그러나 저는 이 확장 기능을 개인적으로 사용한 적이 없습니다.
옵션 2: JavaScript React 언어 모드 활용
기본적인 JavaScript 언어 모드 대신 VS Code에서 javascriptreact 모드로 전환할 수 있습니다. 이 대체 언어 모드는 React 개발에 특화되어 있으며, 원하지 않는 공백을 추가하지 않고 Self-Closing JSX 태그의 서식을 더 정확하게 다룰 수 있을 것입니다.
옵션 3: VS Code 설정 및 ESlint 구성
다른 접근 방법으로는 VS Code 설정을 변경하여 ESlint와 더 좋은 호환성을 갖도록 조정하는 것입니다. 먼저 VS Code 설정에서 “prettier”를 검색하고 “Default Formatter” 옵션을 찾아보십시오. 이를 Prettier ESLint(이미 설정되어 있지 않은 경우)로 변경하고 필요한 확장 기능이 설치되어 있는지 확인하십시오. 또한, react/jsx-tag-spacing라는 구체적인 규칙을 포함한 ESLint 규칙을 확인하십시오. 이 규칙을 구성하거나 비활성화하는 것으로 문제를 해결할 수 있습니다. 필요에 따라 제공된 스크린샷을 참조하여 자세한 안내를 따르십시오.
이러한 옵션 중 하나를 선택하여 VS Code가 Self-Closing JSX 태그 앞에 공백을 추가하지 않고 ESLint 규칙과 일관성을 유지할 수 있습니다. 특정 요구사항과 기호에 가장 잘 맞는 접근 방법을 선택하십시오.
참고 자료 :
같은 카테고리의 다른 글 보기 :
