/    Sign up×
Bounties /Pin to ProfileBookmark

What’s the recommended naming convention for SvelteKit files and folders?

+ 3,000
Copy linkTweet thisAlerts:
Oct 04.2023

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?  

to post a answer
Front-endOpen-sourceSvelte

1 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,
index.svelte is the homepage, _layout.svelte is the main layout, and /blog/[slug].svelte` is a dynamic route for individual blog posts.

Was this helpful?

×

Success!

Help @cosmic spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 2.22,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Samric24,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 10 SATS,

tipper: @neststayhome,
tipped: article
amount: 1000 SATS,
)...