VSCode에서 `styled-components` 자동완성 문제: `import` 대신 `require`가 발생하는 원인과 해결 방법

상황

프론트엔드 개발 중, styled-components를 사용하여 스타일을 작성하던 중, VSCode에서 styled-components를 자동완성할 때 import 대신 require 문법이 자동으로 입력되는 문제가 발생함. 기존에는 import 구문이 정상적으로 작동했으나, 어느 순간부터 자동완성 기능이 다음과 같이 변경됨:

const { default: styled } = require("styled-components");

이로 인해 코드 일관성이 깨지고, 불편함이 생김.

---

예상되는 원인

1. VSCode 설정 변경

   • jsconfig.json 또는 tsconfig.json 파일에서 모듈 시스템이 ES6에서 commonjs로 변경되었을 가능성.
   • 새 파일 생성 시 자동으로 생성된 jsconfig.json에서 module 옵션이 commonjs로 설정되었을 수 있음.

2. 확장 프로그램 설치 또는 업데이트

   • styled-components 관련 확장 프로그램 또는 ESLint, Prettier와 같은 코드 포매터가 업데이트되면서 설정이 변경되었을 가능성.
   • 특정 확장 프로그램이 require 문법을 기본으로 설정하여 자동완성 기능에 영향을 미쳤을 수 있음.

3. VSCode의 업데이트

   • VSCode 자체가 업데이트되면서 일부 설정이 초기화되거나 변경되었을 가능성.

4. Node.js 또는 패키지 변경

   • Node.js 버전이 변경되면서, 또는 프로젝트 내에서 사용하는 Node.js 버전이 변경되면서 모듈 시스템의 기본 설정이 달라졌을 수 있음.
   • styled-components와 관련된 패키지가 업데이트되면서 설정 파일이 변경되었을 가능성.

---

해결 방법

문제를 해결하기 위해 다양한 방법을 시도했지만, 최종적으로 1번 방법인 jsconfig.json 파일의 수정으로 해결함.

1. jsconfig.json 파일 수정 (문제 해결 방법)

   • jsconfig.json 파일을 열어 "module": "commonjs"로 설정된 부분을 "module": "ES6"로 변경.
   • 이 방법으로 문제를 해결할 수 있었으며, 이후 자동완성에서 import 문법이 다시 정상적으로 작동함.
   • 예시:

   {
     "compilerOptions": {
       "module": "ES6",
       "paths": {
         "@/*": ["./*"]
       }
     }
   }

2. (시도했지만 효과가 없었던 방법) 확장 프로그램 비활성화

   • styled-components 관련 확장 프로그램을 비활성화하거나 삭제.
   • 특정 확장 프로그램이 문제를 일으킬 수 있으므로, 비활성화 후 다시 자동완성을 확인했지만, 문제는 해결되지 않음.

3. (시도했지만 효과가 없었던 방법) VSCode 설정 초기화

   • VSCode의 설정을 기본값으로 초기화하고, 필요한 경우 settings.json 파일을 수정.
   • 설정 파일에서 잘못된 설정이 없는지 확인하고, import와 require 관련 설정을 리셋했지만, 문제는 지속됨.

4. (시도했지만 효과가 없었던 방법) 캐시 정리 및 VSCode 재설치

   • VSCode의 캐시를 정리하거나, 문제가 지속될 경우 VSCode를 재설치하여 초기 상태로 되돌림.
   • 캐시를 삭제하고 VSCode를 재설치해도 문제는 해결되지 않음.

5. (시도했지만 효과가 없었던 방법) Node.js 버전 및 패키지 관리

   • Node.js와 관련 패키지를 최신 상태로 유지하고, 문제가 발생하기 전에 사용하던 버전으로 되돌려 보는 것도 하나의 방법으로 시도했으나, 문제는 해결되지 않음.

---

결론

VSCode에서 발생한 styled-components 자동완성 문제는 다양한 원인으로 인해 발생할 수 있으며, 여러 방법을 시도했으나 최종적으로 jsconfig.json 파일에서 모듈 설정을 ES6로 변경하여 문제를 해결할 수 있었다.

이 문제를 겪은 후, 설정 파일을 주기적으로 백업하고, VSCode 업데이트 후에는 설정이 제대로 유지되고 있는지 확인하는 것이 중요하다고 느꼈다. 앞으로도 이런 상황이 발생하지 않도록 프로젝트 환경을 꼼꼼히 관리할 필요가 있다.