How to configure Path aliases with TypeScript in SvelteKit ?

[jeblister]

---

tags: [sveltekit, typeScript]
author: jeblister
title: How to configure Path aliases with TypeScript in SvelteKit ?
description: "Learn how to simplify your imports and make your code more readable by configuring path aliases with TypeScript in SvelteKit"
slug: how-to-configure-path-aliases-with-type-script-in-svelte-kit
category: sveltekit
series: false

[jeblister]

You have to update two configs: tsconfig and svelte.config.js to define path aliases in SvelteKit. You can use the $lib alias that is provided by SvelteKit by default or create your own aliases.

Here is an example of tsconfig.json and svelte.config.js, those files are based on the (1) and (2) sources below:

// tsconfig.json
{
	"extends": "./.svelte-kit/tsconfig.json",
	"compilerOptions": {
		"allowJs": true,
		"checkJs": true,
		"esModuleInterop": true,
		"forceConsistentCasingInFileNames": true,
		"resolveJsonModule": true,
		"skipLibCheck": true,
		"sourceMap": true,
		"strict": false,
		// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
		"paths": {
			"$src": ["./src"],
			"$src/*": ["./src/*"],
			"$lib": ["./src/lib"],
			"$lib/*": ["./src/lib/*"]
		}
	}
}

---

// svelte.config.js
import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite';
import { mdsvex } from 'mdsvex';
import mdsvexConfig from './mdsvex.config.js';
import path from 'path';
/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
	// for more information about preprocessors
	extensions: ['.svelte', ...mdsvexConfig.extensions],
	preprocess: [vitePreprocess(), mdsvex(mdsvexConfig)],

	kit: {
		adapter: adapter(),
		alias: {
			$src: path.resolve('./src'),
			$lib: path.resolve('./src/lib')
		}
	}
};

export default config;

You can modify them according to your needs and preferences.

Resources :

• (1) How to create a path alias in SvelteKit like the lib-folder. https://flaming.codes/posts/custom-lib-folder-with-path-alias-in-sveltekit
• (2) Make Pathing Easier with Aliases in SvelteKit - DEV Community. https://dev.to/brittneypostma/make-pathing-easier-with-aliases-in-sveltekit-37l0
• (3) Configuration • Docs • SvelteKit - kit.svelte.dev. https://kit.svelte.dev/docs/configuration
• (4) TypeScript: Documentation - What is a tsconfig.json. https://www.typescriptlang.org/docs/handbook/tsconfig-json.html