JetBrains WebStorm에서 Reference된 tsconfig 프로젝트를 인식하지 못하는 문제

JetBrains WebStorm에서 Reference된 tsconfig 프로젝트를 인식하지 못하는 문제

WebStorm이 tsconfig.*.json을 인식하지 못함

제목을 한 줄로 정리하려니 참 머리가 아프다. 제목만 보고 무슨 문제인지 잘 감이 안 잡힐 수도 있겠다 싶어서 방금 내가 겪은 일을 간단히 요약하고 들어가겠다.

  1. electron-vite 프로젝트 구성: npx create electron-vite 명령어로 electron-vite 프로젝트를 구성했다.
  2. JetBrains WebStorm에서 프로젝트 열기: 구성된 프로젝트를 JetBrains WebStorm으로 열었다.
  3. tsconfig.web.json의 compilerOptions.paths에 alias 추가: @renderer/*, @lib/* 등 path aliases를 추가했다.
  4. 코드 자동완성으로 import 시도: @lib/abc를 import하려 하였으나 ../../lib/abc가 임포트됨 🤬

시도해 본 방법들

  • WebStorm이 업데이트된지 얼마 되지 않았기에 혹시 업데이트 관련해서 문제가 생긴 것인지 확인하기 위해 tsconfig.json 자체에서 paths를 추가해봤더니 정상 작동했다.
  • 그 상태에서 tsconfig.web.json의 paths를 제거해봤다. 기존 절대 경로 임포트들에서 에러가 발생했다. (IDE 자체 에러)
  • tsconfig.paths.json을 만들고 tsconfig.json 및 tsconfig.web.json에서 reference를 해봤다. IDE에서는 잘 작동하는 것처럼 보이지만 프로젝트 전체 구성에 문제가 발생해 개발 및 프로덕션에서 사용할 수 없었다.

올바른 해결 방법

우선 문제를 확실히 하기 위해 완전히 새로운 electron-vite 프로젝트를 만들고 내 tsconfig.web.json과 비교해 봤더니 기본적으로 @renderer/* 경로가 paths에 추가되어 있는 것을 확인했고 그 외의 특별한 점은 찾지 못했다. 따라서 이건 업데이트 중에 발생한 문제가 아닌 설정 문제라고 결론내게 되었다.

그렇다면 문제가 뭘까 곰곰히 생각하다 보니 WebStorm은 eslint config, prettier config 등 여러 설정 파일을 이름 기반으로 인식한다는 것이 생각났다.

File Types에 문제의 타입스크립트 프로젝트 파일명을 추가하자

그래서 확인해 본 결과 기본 File Types: TypeScript config에 tsconfig.node.json 및 tsconfig.web.json이 들어있지 않았다.

설마 설마 하며 추가해봤더니 아주 잘 작동하는 것을 확인했다…

TypeScript config File Type에 File Name Patterns 추가

이러한 파일명 패턴을 추가하려면 다음 단계를 따르면 된다.

  1. WebStorm 설정 열기: Ctrl + Alt + S 또는 File - Settings에 들어간다.
  2. File Types 메뉴로 이동: Editor - File Types로 이동한다.
  3. TypeScript config에 파일명 패턴 추가: 문제가 발생하고 있는 인식되지 않는 typescript 프로젝트 파일명 또는 패턴을 추가한다.
tsconfig.web.json 및 tsconfig.node.json을 TypeScript config 파일 타입에 추가한 모습
  1. 끝!

여담

나는 혹시 몰라서 tsconfig.web.json과 tsconfig.node.json을 각각 추가했으나 물론 tsconfig.*.json과 같이 추가할 수도 있다.

댓글

  1. 익명2024년 3월 22일 오전 11:45

    안녕하세요! 저는 기존에 vscode 만 사용하다가 처음으로 webstorm을 사용해보고 있습니다. 다름이아니라 typescript 사용시 path alias를 인식 못하는 문제가 계속해서 발생하고있는데요, tsconfig.json에서 paths와 baseurl을 설정해보기도하고 tsconfig.paths.json도 사용해보고 구글링하여 webpack.config.js를 만들어서 javascript webpack에 지정해보기도하고 src를 root directory로 설정하고 할수있는 건 다해봤는데 계속해서 모듈을 찾을 수 없다고나옵니다. 혹시 이부분에대해서 조언을 구할수있을까요? 감사합니다.

    답글삭제

댓글 쓰기

이 블로그의 인기 게시물

C# 남아도는 메모리에도 불구하고 OutOfMemoryException이 발생한다면?

이미지
  C# 코딩 중 평소 볼 수 없던 생소한 현상이 발생했습니다. 분명 메모리는 남아도는데(32기가바이트 중 26기가바이트 사용 가능) 프로그램이 돌다가 OutOfMemory 예외를 던지며 죽어버리는 현상이었죠. List 에 수많은 파싱된 데이터를 넣는 작업 중이었습니다.   그래서 메모리 프로파일러를 잘 관찰해보니 2GB의 메모리를 사용하면 무조건 뻗어버리는 현상을 발견했고, 왜 그럴까 생각해보다가 문득 예전 XP에서 4기가 메모리를 달아도 32비트 운영체제의 한계 아닌 한계로 3기가 조금 넘게밖에 인식을 못 했던 것이 생각났습니다. 생각은 자연스럽게 컴파일이 32비트로 됐구나! 쪽으로 넘어갔고 프로젝트 설정에 보니 빌드 항목에 해당되는 체크박스가 있더군요.   현재 메모리가 남아도는데도 OutOfMemory 예외가 뜬다면 100% 저게 체크된 상태일 겁니다. 그림과 같이 체크 해제 하신 후 실행하시면 특별한 경우가 아닌 이상 컴퓨터 메모리가 바닥날 때까지 저 예외를 볼 일 없게 될겁니다.
자세한 내용 보기

MySQL 데이터 타입과 Java 데이터 타입 비교/매칭

  안녕하세요? 혼살입니다. 블로그에 정말 오랜만에 글을 씁니다. 일하고 겜하고 일하고 겜하고 집에 박혀서 매일 똑같은 일상을 보내다 보니 블로그에 글을 오랫동안 안 쓰고 있었네요. 대부분 근황은 유튜브 동영상으로 대체하다 보니 더욱 더 그랬던 것 같습니다.   하지만 이번엔 영상보다 글로 남기는 게 더 유익할 것 같아 간만에 글을 쓰게 되었습니다. 바로 MySQL Data Types & Java Data Types 매칭! 현재 진행중인 외주 작업 중 SET 타입을 Java에선 어떻게 처리하나 찾아보다가 잘 정리된 블로그 글 을 발견해 나중에 손쉽게 찾기 위해 제 블로그에도 씁니다. 위 링크에 들어가시면 테이블로 잘 정리돼 있으니 한 번 들어가 보시는것도 괜찮겠네요. 왼쪽은 MySQL, 오른쪽은 Java의 데이터 타입입니다. BIT <-> Boolean TINYINT <-> Integer BOOL/BOOLEAN (TINYINT(1)) <-> Integer SMALLINT <-> Unsigned 상관없이 Integer MEDIUMINT <-> Integer, Unsinged라면 Long INT <-> Integer, Unsigned라면 Long BIGINT <-> Long, Unsigned라면 java.math.BigInteger FLOAT <-> Float DOUBLE <-> Double DECIMAL <-> java.math.BigDecimal DATE <-> java.sql.Date DATETIME <-> java.sql.Timestamp TIMESTAMP <-> java.sql.Timestamp TIME <-> java.sql.Timestamp YEAR <-> yearsIsDateType이 설정됐다면 java.sql.Date, 아니라면 Short CHA
자세한 내용 보기

테일즈위버 OST 전곡 모음

이미지
  블로그를 옮기면서 카드캡터 사쿠라 OST를 포함해 테일즈위버 OST 역시 까먹고 안 옮겼었네요. 소름... 블로그 조회수의 대부분을 차지하는 두 개를 안 옮겼었다니!   게임보다 OST들으러 들어간다는 테일즈 위버(Tales Weaver)의 모든 OST 모음집입니다. FLAC파일을 재생할 수 있는 플레이어가 필요합니다... 만 요새는 웬만해선 다 재생해주죠. 즐감하세요.
자세한 내용 보기