인프런 커뮤니티 질문&답변
작성한 질문수
vite 명령어로 프로젝트를 만들었습니다. (vscode)
작성
·
13
·
수정됨
0
vite 명령어로 프로젝트 생성
끝 (확장 프로그램 미설치)
-- App.jsx --
위 화면 같이
붉은 라인이 생기는 이유가 무었인가요?
(참고로 vscode 자동생성 기능을 off 로 설정해서 사용중)
갑자기 위와 같은 화면이 나와
전에 생성한 프로젝트를 열어 보왔는데요
멀쩡히 (붉은 색 라인 없음) 잘 나오던 파일이
위와 같은 증상이 똑같이 나오고 있습니다.
코파일럿, 구글링이 알려준 데로 처리 했는데
같은 증상이 나오고 있습니다.
원인이 무엇인지 질문드립니다.
(아~ "npm run dev" : 정상 동작합니다.)
Plz....
프로젝트 생성시 TypeSCript로 생성하지 않고
일반 jsscript로 설정했습니다.
ts파일 머시지 어쩌구 하는데.. 에공..
<div> 마우스 오버시 위 메지내 내용 화면>
※ vscode 에서 자동 생성을 막으려고 제가 무슨 짓을 했는지... (머 이것 저것 ctrl + shift + p로 ..내용을 찾아 뭔짓을 했는지... (json 파일) 그때 부터인듯 싶습니다.
※ vscode 재설치 : 같은 증상
질문 내용이 vscode에 관한 내용인듯 한데
소스 내용이 아닌 질문이라..죄송합니다.
!!! 아무래도 vscode typescript 버전인듯 싶습니다.
근데 전 ctrl + , 를 눌러서 typescript 를 눌러서 검색해 보면
아 놔~~ 구글링에서 설명한 화면이랑 다르네요..
하~~ 오전 부터 이게 왠 ... 우쒸~~
답변 1
0
안녕하세요! 🙂
npm run dev가 정상 동작한다면 코드 자체에는 문제가 없어요! 이건 VS Code의 에디터 설정 문제인데요~!
에러 메시지를 보면 TypeScript 에러 코드가 보이는데요. VS Code가 JavaScript(.jsx) 파일을 TypeScript로 검사하고 있어서 JSX 문법(<div> 등)을 에러로 인식하는 거 같은데.
설정을 건드렸다고 하셨는데, 그 과정에서 설정이 꼬였을 가능성이 있고
방법 (순서대로 시도해보세요)
1. jsconfig.json 파일 생성 (가장 권장) 프로젝트 루트 폴더에 jsconfig.json 파일을 만들고 아래 내용을 넣어주세요:
{
"compilerOptions": {
"jsx": "react-jsx",
"target": "ES2020",
"module": "ESNext",
"moduleResolution": "bundler"
},
"include": ["src"]
}
2. VS Code 사용자 설정 초기화Ctrl + Shift + P → "Preferences: Open User Settings (JSON)" → 이전에 추가했던 TypeScript/JavaScript 관련 설정들 삭제
3. VS Code 완전히 재시작 설정 변경 후 VS Code를 완전히 종료했다가 다시 열기
1번 방법으로 대부분 해결되니 먼저 시도해보세요!
감사합니다 🙏