How to export module properly so vscode can show my module in suggestion [ctrl+space]?

user_8943429 0
Viewed 2640

I have a setting style file like:

GlobalStyles.js

export const GlobalStyles={
  ViewContainer:{flex:1, justifyContent:'center', alignItems:'center'},
  Center:{justifyContent:'center', alignItems:'center'},
  FontNormal:15,
  FontMedium:18,
  FontLarge:28,
  FontHeader:38
}

module.export={GlobalStyles}

and when i used it in another JS file, let say Home.js. i want to vscode know every Key:Value i've defined,

with those export in GlobalStyles.js vscode suggesting an import style like this:

import { GlobalStyles } from '../Component/GlobalStyles';

and my expected result is something like:

import { ViewContainer, Center, FontMedium, [and so on]} from '../Component/GlobalStyles';

how to let vscode suggesting me Auto Import foo from path/to/GlobalStyles when i'm typing foo? where foo is like ViewContainer, Center, FontMedium, [and so on].

visual-studio-code reactjs intellisense
2 Answers

The feature you're talking about is called Auto Imports. To answer your question, this feature exists and works by default in VSCode.

Here is a sample of how i've used it in a React project. Here I have a component inside a folder with the same name. Outside of that folder is a file I called ModuleExports.js and it currently has the following code.

import Navbar from "./Navbar/Navbar";

export { Navbar };

For reference, export is an alias of module.export so feel free to use them interchangeably. This is a component so when I try to use it as such you can see from the screenshot I am suggested an import to use.

example import suggestion 1

The same can be done without being a component. I'll declare a testObject inside the same file ModuleExports.js and export it.

create a testObject

Then let's see if intellisense will pick it up.

it works

There it is. I hope this helps and do ask if you want more clarification or are running into issues.

user_55628030

In this case, the mistake seems to be using dynamic export. That's old CommonJs style. VSCode uses typescript tools for static analysis. To take advantage of that, you have to use ES6 export.

CommonJs: module.export={GlobalStyles}

ES6-modules: export GlobalStyles

The significant difference between two is that CommonJs variant is simply variable which is defined at runtime. Ie. there is no way to know what you are exporting without executing the code. ES6 export is reserved word. It's construct which cant be changed after definition which also means, it's type definition can be found without actually executing the code.

Typescript, Babel etc provide interoperability between two module systems but they are two very different things by spec.

user_6659920
Related