VS Code에서 특정 파일이 인식되지 않을 때 (JPG, PNG 등)

by

VS Code를 사용하여 프로젝트를 진행하다 보면 대부분의 파일은 정상적으로 인식되지만, 일부 파일 형식(JPG, PNG 등)은 인식되지 않는 경우가 있다. 특히 TypeScript를 사용할 때 이미지 파일을 직접 import하면 오류가 발생할 수 있다. 이러한 문제를 해결하기 위해 TypeScript 타입 정의 파일(.d.ts)을 프로젝트 내에 생성하여 파일을 명시적으로 인식하도록 설정할 수 있다.

아래 코드를 추가해주면 잘 인식되어 자동완성이 잘 동작한다. 

// src/types/typd.d.ts  파일 이름은 상관 없음
declare module "*.jpg";
declare module "*.png";
declare module "*.jpeg";
declare module "*.gif";
declare module "*.svg";

타입스크립트 프로젝트에만 해당하는 것이 아니고 자바스크립트 프로젝트에서도 추가하면, 잘 인식이 된다.

자바스크립트 프로젝트에서는 eslint 오류가 발생할 수 있다. 오류가 발생한다면, eslint 파일의 ignorePatterns 부분을 수정하자.

// .eslintrc.cjs  
ignorePatterns: [
    "dist",
    ".eslintrc.cjs",
    "playwright.config.cjs",
    "src/tests",
    "*.md",
    "tests",
    "tests-examples",
    "*.cjs",
    "backup",
    "types",
]

Leave a Comment