Skip to content

Instantly share code, notes, and snippets.

@pouyakary
Last active November 8, 2021 11:49
Show Gist options
  • Save pouyakary/36cc97fe75c8abe75290e241bad9e31f to your computer and use it in GitHub Desktop.
Save pouyakary/36cc97fe75c8abe75290e241bad9e31f to your computer and use it in GitHub Desktop.
A much much better import for ECMAScript

So if you have ever written in a ECMAScript language (JavaScript/TypeScript/...) you know that the autocomplete on the import is crap. Since you first say what you want and then say where from so the autocomplete has no idea what is available:

Visual Studio Code lets you define where in the snippets you want to fill step by step and that became a really good way to fix the problem. With the imp snippet you can do:

You can simply add this snippet to your JavaScript / TypeScript snippets in the Visual Studio Code and have fun :)

{
  	"pouyas-import": {
		"scope": "typescript,javascript",
		"prefix": "imp",
		"body": [
			"import { $0 }",
			"    from \"$1\""
		]
	}
}

Note

So @orta told me that:

From TypeScript 4.4 onwards, we autocomplete from after the import! e.g. import Parse should show import { ParseState } from “../state”

It’s one of my fav features

You can find it as :

Yet I think that the imp is much more easier to write than the original TypeScript snippet.

@pouyakary
Copy link
Author

@orta mine is only different I guess in being written in two lines :)

@orta
Copy link

orta commented Nov 8, 2021

I think you're missing the point, the autocomplete works after the import | and so that's all you need to type:

Screen Shot 2021-11-08 at 11 33 55 AM

So the flow is better, even if the end code looks the same

@pouyakary
Copy link
Author

Ooooooooooooooo. I had never noticed that!!!! cooooooooollll

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment