[HELP] Re-order suggestions/auto-imports

[svipas]

I see that I can re-order suggestions/auto-imports. How I can do that if it comes locally (from the project) always first, then if it's from expo or react-native, and, lastly all other suggestions, if of course somehow this is possible or at least make that expo and react-native suggestions comes as a first one.

Another thing is that I have a issue: microsoft/TypeScript#33511 (comment). TS isn't smart in this case and suggests me Text from lib/lib.dom.d.ts even though Text exists in the React Native and I don't care about built-in Text. How I can fix that I see it as a first in suggestions instead of that lib/lib.dom.d.ts Text? Or maybe even exclude it. And, maybe it would help me to fix quick fix action so it suggests to import?

Would really appreciate your help ❤️

[zardoy]

How I can fix that I see it as a first in suggestions instead of that lib/lib.dom.d.ts Text? Or maybe even exclude it.

Try setting globalLibCompletions.action to remove

And yes I always had an idea of prioritising relative imports, not sure if it was implemented

[svipas]

@zardoy Yeah it worked by removing it, but still no suggestions in Quick Fix. I think this should be fixed on TS side. But then the question is maybe it is possible to re-sort them and make sure that suggestions from expo and react-native packages come first?

[zardoy]

yes, it's possible via patchSuggestins setting

[svipas]

@zardoy Would you mind showing me how, packages are named expo and react-native

[svipas]

Maybe @Ilanaya you know how to do it correctly?

[Ilanaya]

@svipas I saw your issue, can't help rn.

I'll be able to work on this and help you only on this weekend.

[svipas]

@Ilanaya thank you very much, great news!

[Ilanaya]

@svipas This will prioritize react-native's Text in suggestions

"tsEssentialPlugins.replaceSuggestions": [
		{
			"suggestion": "Text",
			"filter": {
				"languageMode": "TSX",
				"kind": "class"
			},
			"patch": {
				"sortText": "!"
			},
		},
		{
			"suggestion": "Text",
			"filter": {
				"languageMode": "JSX",
				"kind": "class"
			},
			"patch": {
				"sortText": "!"
			},
		},
	]

I'll see what I can do with quick fixes, but can you clarify this comment in the meantime? I'm not sure if I get the issue here - if you are using lib: ['es6'] in your app's tsconfig.json the desired quickfix is there:

Maybe I missing something related to this part of the comment?

I do see expo ("extends": "expo/tsconfig.base") contains "lib": ["DOM", "ESNext"]

[svipas]

@Ilanaya wow thank you very much, I will try those things. Another question do you know how I can sort out expo and react-native import suggestions to be at the top? Or better maybe it is possible to have order like this:

• First always project local imports (as @zardoy mentioned relative imports)
• Then expo and react-native
• And, lastly all other suggestions

So basically if I have a file index.ts which exports export const foo = () => {}

I want it to take priority and if I type foo it always becomes first in the list, then imports from expo and react-native and last all other ones from other packages.

Is that somehow possible? Or maybe at least prioritize project local imports like the one example with foo?

I hope you understood what I meant, thank you for helping me!

[zardoy]

Is that somehow possible? Or maybe at least prioritize project local imports like the one example with foo?

Yes it's easily possible, i think you can even achieve it by configuring the setting above so you prioritise any import which import completion which path starts with ./ or ../ . On the other hand I should implement it myself so aliases configured in tsconfig also take the same effect. Btw i think it's worth highlighting aliased import suggestions in the completions list just like we do with lib.dom completions

[svipas]

@Ilanaya problem was not only with lib containing dom since expo decided to include it, but also missing this part: "types": ["react-native"] which solved an issue for me, also this now removes dom suggestions like Text from imports, finally!

[svipas]

@zardoy Still it takes out imports from other packages first

I used this:

  "tsEssentialPlugins.replaceSuggestions": [
		{
			"suggestion": "./",
			"patch": {
				"sortText": "!"
			},
		},
		{
			"suggestion": "../",
			"patch": {
				"sortText": "!"
			},
		},
	],