[Vite+Typescript+Eslint] 절대경로 설정

vite에서 절대경로를 설정해 주기 위해서는 vite.config.ts와 tsconfig.json에 alias를 설정해줘야 합니다.

이것이 귀찮다면 vite-tsconfig-paths 플러그인을 사용합니다. (관련 링크)

이번 글에서는 플러그인을 사용하지 않고 manual 하게 설정해 보겠습니다.

 

자주 사용하는 src, atoms, hooks, components, pages, types 폴더에 대해서 설정해 보겠습니다.

 

vite.config.ts

import path from 'path';
import { defineConfig } from 'vite';
import eslint from 'vite-plugin-eslint';
import react from '@vitejs/plugin-react-swc';

export default defineConfig({
  plugins: [
    react(),
    eslint({
      exclude: [/virtual:/, /node_modules/],
    }),
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@atoms': path.resolve(__dirname, 'src/atoms'),
      '@hooks': path.resolve(__dirname, 'src/hooks'),
      '@components': path.resolve(__dirname, 'src/components'),
      '@pages': path.resolve(__dirname, 'src/pages'),
      '@types': path.resolve(__dirname, 'src/types'),
    },
  },
});

 

tsconfig.json

{
  "compilerOptions": {
  ...
    /* Absolute path*/
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@atoms/*": ["src/atoms/*"],
      "@hooks/*": ["src/hooks/*"],
      "@components/*": ["src/components/*"],
      "@pages/*": ["src/pages/*"],
      "@types/*": ["types/*"],
    }
  },
  ...
}

 

추가로, eslint 사용 중이라면 eslintrc에도 alias 설정을 해주어야 워닝이 뜨지 않습니다.

 

.eslintrc.cjs

// eslint-disable-next-line no-undef
module.exports = {
  ...
  settings: {  
    'import/resolver': {
      typescript: './tsconfig.json',
      alias: {
        map: [
          ['@', './src'],
          ['@atoms', './src/atoms'],
          ['@hooks', './src/hooks'],
          ['@components', './src/components'],
          ['@pages', './src/pages'],
          ['@types', './src/types'],
        ],
      },
      ...
    },
   ...
  },
};

 

세 파일을 왔다 갔다 봐야 해서 헷갈리지만 무사히 설정 완료!