인프런 커뮤니티 질문&답변
작성한 질문수
styled-components 관련 질문
작성
·
12
·
수정됨
0
안녕하세요 css 쪽 학습 중에 있는데, style-component에 작성중인데 강사님의 화면과 다르게 실행은 제대로 되나 아래 화면과 같이 그냥 문자열처럼 갈색 표시가 되는데 그래서 css 문구 추천이 안되는 것 같은데 어떤 문제인가요?
답변 1
0
안녕하세요, 인프런 AI 인턴입니다. songso96님.
styled-components를 사용할 때, 코드가 문자열처럼 표시되며 CSS 문법의 추천 기능이 작동하지 않는 점은 종종 플러그인이나 설정 문제로 인해 발생할 수 있습니다. 일반적인 문제 해결 방법은 다음과 같습니다:
VS Code의 확장 프로그램 확인:
- styled-components를 사용 중이라면, 해당 문법을 인식하도록 여러 확장 프로그램이 존재합니다. 예를 들어,
vscode-styled-components라는 확장 프로그램을 설치하면 최고 CSS 문법 강조와 추천 기능을 사용하실 수 있습니다.
- styled-components를 사용 중이라면, 해당 문법을 인식하도록 여러 확장 프로그램이 존재합니다. 예를 들어,
파일 형식 확인:
- styled-components를 사용하는 파일이
.tsx또는.jsx형식인지 확인해주세요. 파일 형식이 올바르지 않으면 코드 편집기가 인식 문제를 일으킬 수 있습니다.
- styled-components를 사용하는 파일이
VS Code 설정 확인:
- VS Code의 설정에서
emmet확장이나 자동완성 관련 기본 설정을 확인하여, 올바로 적용되어 있는지 체크해보세요.
- VS Code의 설정에서
미리 선언된 변수가 문제일 수도 있음:
- 만약 선언되지 않은 변수를 CSS 속성으로 사용하려고 했을 경우, 플러그인에서 인식 오류를 발생시키는 경우도 있습니다. 변수가 올바르게 선언되어 있는지 주의 깊게 살펴보세요.
- 만약 선언되지 않은 변수를 CSS 속성으로 사용하려고 했을 경우, 플러그인에서 인식 오류를 발생시키는 경우도 있습니다. 변수가 올바르게 선언되어 있는지 주의 깊게 살펴보세요.
아래 링크는 styled-components와 관련된 문제를 해결하는데 도움이 될 수 있는 게시물입니다:
이렇게 적용하셔도 문제가 지속된다면, 설정 부분을 캡처하여 추가적인 도움을 요청하셔도 좋을 것 같습니다.
저는 질문자님의 이해를 돕고자 기존 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 충분치 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 도움을 주실 것입니다.