VSCode에서 .js 확장자가 빠지는 문제 해결

최근에 코드를 치던 도중 자꾸 다른 곳에서 import를 해올 때 자동으로 .js가 생성되지 않고 빠져가지고 찾아야하는 번거로움을 겪게 되었습니다.

 

해결 방법은 간단합니다.

바로 VSCode 설정을 수정하는 방법 입니다.

읽기 전 방법이 총 2가지 이기 때문에 1번 방법이 되지 않으면 바로 2번 방법으로 가주세요.

 

VSCode 설정 수정하기

1. VSCode 설정 열기

• 먼저, Visual studio Code를 실행한 후, 아래 단축키를 사용해 설정을 엽니다.
  • Windows/Linux: Ctrl + ,
  • Mac: Cmd + 

또는, VSCode 상단 메뉴에서 파일(File) -> 기본 설정(Preferences) -> 설정(Settings)으로 이동할 수도 있습니다.

2. 검색창에 settings.json 검색

• 설정 창에서 우측 상단에 있는 검색창에 settings.json을 입력한 후, 설정(Json)이라는 항목을 클릭하세요.

3. 설정 파일에 옵션 추가

• 이제 settings.json 파일이 열렸을 것입니다. 이 파일에서 아래 설정을 추가해줍니다.

{
  "javascript.suggest.paths": true,  // 경로 자동완성 허용
  "javascript.preferences.importModuleSpecifierEnding": "js",  // JavaScript import 시 .js 붙이기
  "typescript.preferences.importModuleSpecifierEnding": "js"  // TypeScript import 시 .js 붙이기
}

그리고 저장해주면 됩니다.

 

이제 여기서 VSCode에서 저 설정하는 부분을 찾지 못한 분들을 위해 직접 파일을 찾아서 열어서 수정해 주겠습니다.

 

추천드리는 방법!

 

• settings.json 파일은 각 사용자마다 위치가 다를 수 있습니다. 일반적으로 사용자 설정은 다음 경로에 저장됩니다:
  • Windows/Linux: C:\Users\<사용자 이름>\AppData\Roaming\Code\User\settings.json
  • Mac: /Users/<사용자 이름>/Library/Application Support/Code/User/settings.json
• 이 파일을 직접 열어서 편집할 수도 있습니다.

 

settings.json을 열었으면 아까 설명한 설정 내용을 추가한 후 저장하시면 됩니다:

{
  "javascript.suggest.paths": true,
  "javascript.preferences.importModuleSpecifierEnding": "js",
  "typescript.preferences.importModuleSpecifierEnding": "js"
}

 

좀더 쉽게 이해하기 위해 사진을 보여드리겠습니다.

 

후우 이러고 저장하면 아주 잘 됩니다 하하!!