VSCode support

[NextReactionary]

I absolutely love not having to constantly manage my imports (very Swift-like), but - sadly - working with this plugin results in a somewhat cumbersome workflow due to the lack of IDE support. In particular: while it's possible to suppress Svelte's compiler warnings and VSCode's built-in auto importing features, you end up without any component IntelliSense due to the latter.

Has anyone managed to create a nice workflow for themselves despite this? I'd love to hear about your setup.

[timephy]

imho this would be my number 1 issue, my first priority, to get this being absolutely awesome!

[timephy]

This workaround works "fine", but it's a hassle, not only finding the video in the first place... https://www.youtube.com/watch?v=JXvKBtTPr64

It should given some vague idea of what is out there and therefore possible. But it should be way nicer than this to have it usable...

[devidw]

Summary of https://www.youtube.com/watch?v=JXvKBtTPr64 to work with TS/VS Code:

In your src/global.d.ts add a declaration for each of your component that you want to auto-import:

declare const YourComponentName: typeof import('path/to/your/components/YourComponentName.svelte')['default']

In your .vscode/settings.json add:

    "svelte.plugin.svelte.compilerWarnings": {
        "missing-declaration": "ignore"
    }

Restart svelte language server for the changes to take effect immediately (search and execute from cmd palette).

[yuanchuan]

Putting the same autoimport() function in preprocess of svelte.config.js will fix the warnings:

/* svelte.config.js */

import autoImport from 'sveltekit-autoimport';

export default {
  preprocess: [
    autoImport({
      components: [
        './src/components',
      ],
    }),
  ],
} 

[stolinski]

@yuanchuan is this still accurate? I moved our autoImport from the vite.config to the svelte config and it won't find our components. Having our preprocess in our vite config is working, but svelte-check can't find the components and throws a warning, even with the d.ts file.

import preprocess from 'svelte-preprocess'
import adapter from '@sveltejs/adapter-node'
import nested from 'postcss-nested'
import postcssEnvFunction from 'postcss-env-function'
import minmax from 'postcss-media-minmax'
import postcssCustomMedia from 'postcss-custom-media'
import atImport from 'postcss-import'
import autoImport from 'sveltekit-autoimport'

/** @type {import('@sveltejs/kit').Config} */
const config = {
	preprocess: [
		autoImport({
			components: ['./src/elements'],

			module: {
				svelte: ['onMount'],
			},
		})
	],

	// ssr: process.env.VITE_ENV === 'production',
	kit: {
		adapter: adapter(),
		// ssr: process.env.VITE_ENV !== 'testing',
	},
}

export default config

[yuanchuan]

@stolinski That's strange, maybe it was the situation when the syntax plugin in the editor didn't work when I switched configurations using VSCode, I took it as it being able to recognize it.

But I tried it again just now and the result was the same as yours!

[yfi]

Summary of https://www.youtube.com/watch?v=JXvKBtTPr64 to work with TS/VS Code:

In your src/global.d.ts add a declaration for each of your component that you want to auto-import:

declare const YourComponentName: typeof import('path/to/your/components/YourComponentName.svelte')['default']

In your .vscode/settings.json add:

    "svelte.plugin.svelte.compilerWarnings": {
        "missing-declaration": "ignore"
    }

Restart svelte language server for the changes to take effect immediately (search and execute from cmd palette).

The unimport plugin has an option which generates another d.ts with the same global declarations and makes vscode play nice. Viable solution here?

[marfalkov]

The unimport plugin has an option which generates another d.ts with the same global declarations and makes vscode play nice. Viable solution here?

They even have a preset for svelte.

https://github.com/unjs/unimport/blob/main/src/presets/svelte.ts