vscode 내에서 절대경로 path 설정

EJ__OH·2022년 2월 7일
2

vscode에서 다른 파일들을 import할 때 기본적으로 다음과 같이 상대경로를 path로 불러온다.

import 불러올 파일 from "상대경로"

규모가 작은 프로젝트, 혹은 토이 프로젝트 수준에서는 크게 번거로움은 없지만

규모가 커지거나 프로젝트 구조가 복잡해진다면 경로를 지정해주는 것이 번거롭기 때문에

절대경로로 설정을 변경하는 것을 종종 볼 수 있다.

	import 불러올 파일 from "../../../../../components/navBar/navBar.js"

위의 예시가 바로 프로젝트 구조가 복잡해졌을 때 경로가 아주 깔끔하지 못하고 지저분한 대표적인 사례라고 할 수 있다.
(예를 들기 위해 작성했다고는 하지만 너무 지저분하다...)

jsconfig.json

vscode 내에서 프로젝트 최상단 (루트) 위치에 jsconfig.json 파일을 생성하고 다음의 코드를 작성한다.
src 폴더를 기준 경로로 path가 변경되는 코드이다.

{
    "compilerOptions": {
        "baseUrl": "src"
    },
    "include": [
        "src"
    ]
}

작성한 다음 vscode를 종료했다가 재실행하게되면 절대경로를 path로 삼아 다른 파일을 import할 수 있게 된다.

	import 불러올 파일 from "components/navBar/navBar.js"

위의 아주 지저분했던 path가 깔끔하게 정리된 모습을 볼 수 있다.

profile
Junior FE Developer

0개의 댓글