I am currently working on a project using SvelteKit with Vite bundler and I’m finding that my imports are becoming overly complicated. For example, to access certain files, I have to write imports like this: import GtoolsStore from "../../../../../../../../database/Gtools/GtoolsStore"; As you can see, there are many "../" required to access the file.

This is not only tedious to write, but it also makes it harder to read and understand the code. It also makes it more difficult to refactor the code, since changing the file structure could require many updates to import statements throughout the project.

In SvelteKit, we have various base URLs like $lib/ which are useful for simplifying imports. For example, instead of writing ../../../../../myFolder/myComponent.svelte, we can simply use $lib/myFolder/MyComponent.

However, I would like to create custom base URLs for specific folders like $src and $database without overriding existing base URLs like $lib and $app. I imagine this could be done through some kind of configuration file, such as {baseUrls: {"src": ./src, "database": $src/database}}.

By using custom base URLs, I hope to simplify my imports and make it easier to work with the project. However, I’m not sure how to do this properly in SvelteKit and Vite, and I’m concerned about potential conflicts with TypeScript and VSCODE’s autocomplete and IntelliSense.

Therefore, I would appreciate any guidance or advice on how to create custom base URLs in SvelteKit and Vite, and how to ensure that this solution works well with VSCODE’s autocomplete and intellisense, as well as TypeScript. Thank you in advance for your help!

here is an example of structure in VSCODE

(if you need it,

but should work also in others by a simple configuration I believe.)

>Solution :

TLDR:

try follow these docs: https://kit.svelte.dev/docs/configuration#alias

Complete Answer:

In SvelteKit, you can define aliases for your directories using the alias property in svelte.config.js.

Aliases are mappings between import statements and actual file paths in your project, and they allow you to use short and simple import statements instead of long and complex ones.

Here’s an example of how to define custom aliases in svelte.config.js (use the next one, not this, this is only the simplest example):

/**
 * @type {import('@sveltejs/kit').Config}
 */
const config = {
  kit: {
    alias: {
      '$src': './src',
      '$database': './src/database'
    }
  }
};

export default config;

but the better complete one is

(since I see you have tailwind and so much other things, so this config won’t break your code):

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    // Consult https://kit.svelte.dev/docs/integrations#preprocessors
    // for more information about preprocessors
    preprocess: vitePreprocess(),

    kit: {
        // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
        // If your environment is not supported or you settled on a specific environment, switch out the adapter.
        // See https://kit.svelte.dev/docs/adapters for more information about adapters.
        adapter: adapter(),
        // see https://kit.svelte.dev/docs/configuration#alias for more information about alias
        alias: {
            $src: './src',
            $database: './src/database',
        }
    }
};

export default config;

In this example, we define two aliases: $src and $database, which point to the src/ and src/database/ directories in our project. You can define as many aliases as you need, and you can name them however you like.

Now, in your Svelte components or JavaScript files, you can import files from these directories using the aliases you defined:

import GtoolsStore from '$database/Gtools/GtoolsStore';
import MyComponent from '$src/myFolder/MyComponent.svelte';

As you can see, the imports are much simpler and more readable now, and you don’t need to worry about the relative paths anymore. The aliases also work with TypeScript and VSCODE’s autocomplete and intellisense, since they are defined at the SvelteKit level.

Note that if you have existing imports that use relative paths, you’ll need to update them to use the aliases instead. This may require some refactoring, but it should be a one-time task that will save you time and effort in the long run.

I hope this solution helps simplify your imports and improves your development experience with SvelteKit. Let me know if you have any further questions or issues!

EDIT:

It is not obligatory to use the prefix $

you can use any prefix,

but to be consistent with svelte it is better to follow the $lib notation…

if you really don’t like it

you can even avoid using it, by doing so

const config = {
  kit: {
    alias: {
      src: './src',
      database: './src/database'
    }
  }
};

and your imports will become like this:

import GtoolsStore from 'database/Gtools/GtoolsStore';
import MyComponent from 'src/myFolder/MyComponent.svelte';