Absolute Imports

Implement absolute imports for JavaScript or TypeScript Project

JavaScript Projects

jsconfig.json file:

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "~/components/*": ["components/*"],
      "~/utils/*": ["utils/*"]
    }
  },
  "include": ["src"]
}

TypeScript Projects

tsconfig.json file:

{
  "compilerOptions": {
		"baseUrl": ".",
		"paths": {
			"~/*": ["src/*"]
		}
  },
  "include": ["src"]
}

Vite Projects

vite.config.ts file:

import path from 'path' // from node.js
import { defineConfig } from 'vite'

export default defineConfig({
	// other options

	resolve: {
		alias: [{ find: '~', replacement: path.resolve(__dirname, 'src') }],
	},
})