vscode jsx파일 quick fix import안되는 오류 해결

문제 발생

아래와 같은 상태에서 엔터를 누르면 자연스레 Auto import 확장프로그램 덕분에

처음 선언 시 import 자동 해줌

import { useState } from "react";

와 같은 import를 해주지만

import 없이 useState사용

미리 선언을 해주지 않고 useState를 사용하려고 할 때, 우리는 useState 아래 빨간 밑줄에 마우스 커서를 갖다 대면 아래와 같은 Quick Fix에서 import할 수 있도록 도와주길 기대한다.

우리가 기대하는 Quick Fix

하지만 실제로 아래와 같이 Quick Fix에는 Add import from 'react'와 같은 import를 하지 않았음에 대한 기능적인 해결을 하지 않고 오류를 나타내지 않는 것에 대한 해결만을 보여주고 있다.

quick fix에 import가 없는 경우

해결 방안

공식문서에 따르면 이는 vscode가 js파일을 독립적인 파일로 취급을 하기 때문이다.

File Scope - no jsconfig.json: In this mode, JavaScript files opened in Visual Studio Code are treated as independent units. As long as a file a.js doesn't reference a file b.ts explicitly (either using import or CommonJS modules), there is no common project context between the two files.

 

파일들이 명시적으로 프로젝트의 일부임을 알리기 위해 프로젝트의 최상단에 jsconfig.json 파일을 만든 뒤,compilerOptions안에 "checkJs":true을 넣어주면 된다.

// jsconfig.json

{
	"compilerOptions": {
		"module": "commonjs",
		"target": "es6",
		"jsx": "react-jsx",
		"checkJs": true
	},
	"exclude": ["node_modules"]
}

jsconfig.json에 대해서는 다음에 좀 더 자세하게 다뤄볼 예정이다.