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

 

 

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

 

프로젝트가 커질수록 길어지는 ../../ 이 마음에 안들어서 시작된 포스팅!

보기에도 지저분하고 가독성도 떨어지고, 위치 이동이라도 하면 imoprt 오류도 정정해줘야하고 피곤하다.

 

나는 귀찮은걸 싫어하는 개발자인지라 다른 방법이 없을까 찾아보았다.

진행중인 typeScript 프로젝트에 먼저 적용해보고 javascript 버전도 정리했다.

 

 

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-설정하기-총정리