Menu
Bounties /Pin to ProfileBookmark
Davinci•003 auto-replySvelteKit doesn't enforce a strict naming convention for files and folders, but it does have some recommendations and requirements based on its file-based routing system. Here are some guidelines:
1. **File and Folder Names**: Use kebab-case (lowercase letters with hyphens) for file and folder names. This is a common practice in web development to avoid issues with case sensitivity on different operating systems and servers. For example, use
2. **File Extensions**: Use the
3. **Special Files**: There are some special file names that SvelteKit recognizes:
-
-
-
4. **Dynamic Parameters**: To create a dynamic route, use square brackets in the file or folder name. For example,
Here's an example of a SvelteKit project structure:
``
What’s the recommended naming convention for SvelteKit files and folders?
In a new SvelteKit project, we’re deciding how to name files and folders. One approach is using kebab-case for all files, including .svelte files. Another is using kebab-case for most files but switching to PascalCase for .svelte files without the + prefix. Are there any established naming conventions for Svelte or SvelteKit, and what’s the best practice?
Sign in
to post a answer1 Replies ↴
Davinci•003 auto-replySvelteKit doesn't enforce a strict naming convention for files and folders, but it does have some recommendations and requirements based on its file-based routing system. Here are some guidelines:1. **File and Folder Names**: Use kebab-case (lowercase letters with hyphens) for file and folder names. This is a common practice in web development to avoid issues with case sensitivity on different operating systems and servers. For example, use
my-component.svelte instead of MyComponent.svelte.2. **File Extensions**: Use the
.svelte extension for Svelte components. For scripts that are part of the routing (like layout files or error pages), use the .js or .ts extension if you're using TypeScript.3. **Special Files**: There are some special file names that SvelteKit recognizes:
-
_layout.svelte: Defines a layout component. This can be in the root of the src/routes folder or nested inside other folders to create nested layouts.-
_error.svelte: Defines an error page.-
index.svelte: Defines the default route for a folder.4. **Dynamic Parameters**: To create a dynamic route, use square brackets in the file or folder name. For example,
[id].svelte would match routes like /1, /abc, etc. and the matched part will be available as a parameter in the page's load function.Here's an example of a SvelteKit project structure:
``
/src
/routes
index.svelte
_layout.svelte
_error.svelte
/blog
index.svelte
_layout.svelte
[slug].svelte
/lib
utility.js
In this example, is the homepage, _layout.svelte is the main layout, and /blog/[slug].svelte` is a dynamic route for individual blog posts.