[typescript/javascript] 절대경로 import 설정과 auto import extention

 

 

import { TestComponent } from '../../../../components/TestComponent';

 

프로젝트가 커질수록 길어지는 ../../ 이 마음에 안들었다.

보기에도 지저분하고 가독성도 떨어지고, 위치 이동이라도 하면 어디서 나는지 모를 imoprt 오류까지

 

 

 

1. tsconfig.app.json 수정

{
    "compilerOptions": {
        /* Paths */
        "baseUrl": "./",  //절대경로 디렉터리 설정
        "paths": { 		   //하위 디렉터리용 상대경로 매핑
            "pages/*": ["pages/*"],
            "components/*": ["components/*"],
            "images/*": ["assets/images/*"]
        }
    }
}

 

해당 파일이 없을 경우 package.json 혹은 esLint, prettier 설정파일 등과 같은 위치에 추가하면 된다.

나는 vite로 시작한 프로젝트라 이미 존재했는데

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

이렇게 tsconfig.app.json 과 tsconfig.node.json을 바라보고 있어서

각각의 파일에 동일한 내용으로 baseUrl과 path를 설정했다.

 

 

2. jsConfig.json 수정

{
    "compilerOptions": {
        "baseUrl": "./src",
        "paths": {
            "components/*": ["components/*"],
            "images/*": ["assets/images/*"]
        }
    },
    "include": ["src"]
}

이건 요즘 작업중인 자바스크립트 팀프로젝트 설정.

타입스크립트를 쓰지 않아도 설정파일명만 바뀔뿐 동일하다.

 

 

3.vite.config.ts 수정

export default defineConfig({
    plugins: [react()],
    //추가한 부분
    resolve: {
        alias: {
            pages: "/src/pages", 
            components: "/src/components", 
        },
    },
});

vite로 생성한 프로젝트라면 vite 설정에도 alias를 추가한다.

 

 

4. vsCode 자동 import extention: Auto Import

 

평소에는 이걸 써서 직접 import문을 쓰지 않는데, 가끔 엉뚱한 경로를 가져와서 수정하다 여기까지왔다.

소스상에서 import 해야 쓸 수 있는 hook이나 컴포넌트 등을 쓰고 Ctrl+Space 누르면 추천 경로가 뜬다.

직접 import문 쓸때도 마찬가지!

 

 

 

🙏레퍼런스

• 타입스크립트-tsconfigjson-설정하기-총정리