vscode에서 auto import 될 때 상대경로 말고 절대경로로 import하게 하는 설정

1. TypeScript/JavaScript 프로젝트 설정

tsconfig.json 또는 jsconfig.json에 baseUrl 설정:

 

json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"],
      "@utils/*": ["src/utils/*"]
    }
  }
}

2. VS Code 설정

settings.json에 다음 설정 추가:

 

json

{
  // TypeScript
  "typescript.preferences.includePackageJsonAutoImports": "auto",
  "typescript.suggest.autoImports": true,
  "typescript.preferences.importModuleSpecifier": "shortest",
  
  // JavaScript
  "javascript.preferences.includePackageJsonAutoImports": "auto",
  "javascript.suggest.autoImports": true,
  "javascript.preferences.importModuleSpecifier": "shortest"
}

3. 더 구체적인 절대경로 강제 설정

 

json

{
  "typescript.preferences.importModuleSpecifier": "non-relative",
  "javascript.preferences.importModuleSpecifier": "non-relative"
}

4. 프로젝트별 설정 (.vscode/settings.json)

프로젝트 루트에 .vscode/settings.json 파일 생성:

 

json

{
  "typescript.preferences.importModuleSpecifier": "non-relative",
  "javascript.preferences.importModuleSpecifier": "non-relative"
}

옵션 값들:

• "shortest" - 가장 짧은 경로 (기본값)
• "relative" - 상대경로 강제
• "non-relative" - 절대경로 강제
• "auto" - 자동 판단

가장 확실한 방법은 tsconfig.json에 baseUrl 설정 + settings.json에 "non-relative" 설정을 함께 사용하는 것입니다!