Intro
모듈을 불러올 때 ’../../../../Component’ 이런 식으로 상대 경로가 길어지는 경우가 많다. 길어진다고 성능에 지장을 주는건 아니지만 가독성이 떨어지므로 tsconfig의 paths 속성으로 별칭을 지어주면 절대경로처럼 사용할 수 있다.
tsconfig.json 예시
1
2
3
4
5
"paths": {
"@hooks/*": ["hooks/*"],
"@components/*": ["components/*"],
"@pages/*": ["pages/*"],
}
모듈을 불러올 때
1
import Login from "@page/Login";
Error
eslint를 사용한다면 위의 경우에서 Unable to resolve path to module ‘@page/Login’ eslint(import/no-unresolved) 에러가 발생할 것이다. 다음 과정을 통해 에러를 해결해 보겠다.
- 모듈 설치
eslint-import-resolver-typescript 모듈을 설치한다.
- .eslintrc.json에 다음 코드를 추가한다.
1
2
3
4
5
6
7
8
"settings": {
"import/parsers": {
"@typescript-eslint/parser": [".ts", ".tsx"]
},
"import/resolver": {
"typescript": {}
}
}
- 에러가 안사라졌다면 vscode 재실행