VSCODE 리액트 자동완성 안될때

VSCODE 에서 신규 리액트 프로젝트 생성시에 자동완성 기능이 안될때 설정법

 

1. js 파일에 import 를 치기위한 im 타이핑시 자동완성으로  import 가 되지않을 때 설정법

1) project root 에 tsconfig.json 파일 추가 아래 내용 저장

{
    "compilerOptions": {
        "experimentalDecorators": true,
        "allowJs": true,
        "target": "es5",
        "lib": [
            "dom",
            "dom.iterable",
            "esnext"
        ],
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "react"
    },
    "include": [
        "src"
    ]
}

2) VSCODE 재시작

 

 

2. jsx 구문 사용시에 div 만치고 탭을 누르면 자동으로 <div></div> 가 생성 되지 않을때

 

1) VSCODE 셋팅 File -> Preferences -> Settings -> emmet 검색

2) Edit in settings.json 열어서 아래 내용 추가

{
	...
    "emmet.includeLanguages": {
        "javascript": "javascriptreact"
    }
}