Enable Auto-Import

[ExTheSea]

First of all, this is an amazing project for prototyping Web applications or developing applications on devices not capable of handling full-fletched IDE's (e.g. Raspberrys, Tablets, etc.). I'm also heavily looking forward to #9 as it's otherwise quite tedious to create new components/services/etc.

Another suggestion that I couldn't find (or i've just missed) is a better auto-import:

• Auto-complete can't find Modules from dependencies you added (like the angular material modules)
• When creating a new component right now and adding it to the declaration array in the AppModule the editor can't find the new component
• Even the angular classes like e.g. Component are not being found
• Not thoroughly tested but it seems that the React classes like Component are not available through Intellisense

For all of those you have to manually add the import { ... } from './....ts'; manually and without any file system auto-complete this can get quite tedious, especially when importing something from an external dependency.

I'm quite used to an auto-import behaviour from IntelliJ but even VSCode can support something like this with plugins like Auto-Import.

So as you were mentioning natively implementing VSCode plugin behaviour and what functionally is needed in #3 I feel this would be an important addition if possible.

[EricSimons]

@ExTheSea I totally agree & really love this idea. It's super annoying to have to guess & check whether you're importing the right thing from the right place all the time 😒

@claytonschneider wanna take this on?

[kordeviant]

this is a way of exponential growth for stackblitz.

[Splaktar]

This is certainly a significant need. It makes learning with StackBlitz quite a bit harder to get started with and makes experienced devs less productive.

[bastienJS]

come on guys nearly a year later... did my first stackblitz today is finding the import manually is really annoying!

[briancodes]

There's an online Angular editor called https://ng-run.com/, which looks like it's based on VSCode. It has an auto-import feature which might be something that could be added to StackBlitz - putting the link here for inspiration. StackBlitz is really top notch, and auto-import would definetly speed up development (and minimize time spent fixing import errors😉)

[andreElrico]

any updates?

[vargalas]

I've just paid for Stackblitz, but I won't be able to use it without auto-import.

[d3lm]

@vargalas @andreElrico Yep, we are working on auto-imports!

[dnkm]

@vargalas @andreElrico Yep, we are working on auto-imports!

As soon as you guys have auto-imports and auto-complete for React, you have my business!

[afreenCodez]

auto import added to stackblitz ?

[bfunc]

auto import is still missing, Stackblitz is much faster than Codesandbox but this feature is really missing

[leoncvlt]

Huge +1 for this option, Stackblitz seems to give me the least amount of bugs / side-effects compared to replit and Codesandbox, but without this feature my productivity really takes a hit, especially when working with libraries with a huge amount of exports like three.js

https://github.com/stackblitz/monaco-auto-import - Does this repo have anything to do with it? Hasn't been updated since 2018...

[TomCockram]

4 years on and we still don't have auto imports :(

[kj6995]

Any luck in 2022?

[arrbxr]

5 years on and we still don't have auto imports :(

[FossPrime]

FYI: Auto-import is working for me now on typescript files. I tested by going to vite.new/vue-ts, opening src/main.ts and typing const x = reactive([]) that automatically suggested reactive from Vue and added it to my imports. It seems to also work on .mjs scripts and type: "module" node projects.

Unfortunately It doesn't work on Vue/Volar script setup Vue 3 ts SFC components. But that should probably be filed as seperate issues... and this one seems fixed/done?

[leoncvlt]

Still doesn't work with vanilla JS packages though.

For example, if I add three as a dependency, I get auto-completion for any of the name exports defined here https://github.com/mrdoob/three.js/blob/dev/src/Three.js when developing this locally with VS code, or using CodeSandbox or Replit - but not with Stackblitz 😔

I'd rather have this fixed than receive emails about viteconf 👀

[kc0tlh]

With the addition of VS Code extension support in our new editor, this functionality can be achieved through the Auto-Import extensions mentioned by the OP @ExTheSea!

Related Issue: #3

[MoinShaikh611]

5 years on and we still don't have auto imports :(

7 years on and we still don't have auto imports :(

[akashbharati]

why such a long wait for auto-import ?