Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add baseUrl documentation #6847

Merged
merged 4 commits into from
Apr 19, 2019
Merged

Add baseUrl documentation #6847

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8df0296
Add baseUrl documentation
ianschmitz Apr 19, 2019
cad5543
Update docusaurus/docs/importing-a-component.md
iansu Apr 19, 2019
247a66b
Update docusaurus/docs/importing-a-component.md
iansu Apr 19, 2019
fe7b664
Simplify include to match default tsconfig.json
ianschmitz Apr 19, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 25 additions & 0 deletions docusaurus/docs/importing-a-component.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,3 +48,28 @@ Learn more about ES6 modules:
- [When to use the curly braces?](https://stackoverflow.com/questions/36795819/react-native-es-6-when-should-i-use-curly-braces-for-import/36796281#36796281)
- [Exploring ES6: Modules](http://exploringjs.com/es6/ch_modules.html)
- [Understanding ES6: Modules](https://leanpub.com/understandinges6/read#leanpub-auto-encapsulating-code-with-modules)

## Absolute Imports

You can configure your application to support importing modules using absolute paths. This can be done by configuring a `jsconfig.json` or `tsconfig.json` file in the root of your project. If you're using TypeScript in your project, you will already have the `tsconfig.json` file present.
ianschmitz marked this conversation as resolved.
Show resolved Hide resolved

Below is an example `jsconfig.json` file for a JavaScript project. You can create the file if it doesn't already exist:

```json
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src/**/*"]
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think this is needed. I could definitely be wrong about that though. When I was testing this I wasn't using it.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You definitely don't need it, you're right. It's recommended by VS Code team to avoid performance issues when you add this file. This link explains it well: https://code.visualstudio.com/docs/languages/jsconfig. The key thing to note:

If you do not have a jsconfig.json in your workspace, VS Code will by default exclude the node_modules folder.

When your JavaScript project is growing too large and performance slows, it is often because of library folders like node_modules. If VS Code detects that your project is growing too large, it will prompt you to edit the exclude list.

So once we add this file, it by default will include everything in the directory of jsconfig.json and all subdirectories, including node_modules. By using include it explicitly says "only check these files, thanks!", which is equivalent to how we have our configuration for tsconfig.json.

Thoughts?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That seems like a pretty good reason to me.

}
```

If you're using TypeScript, you can configure the `baseUrl` setting inside the `compilerOptions` of your project's `tsconfig.json` file.

Now that you've configured your project to support absolute imports, if you wanted to import a module located at `src/components/Button.js` for example, you can now import the module like so:
ianschmitz marked this conversation as resolved.
Show resolved Hide resolved

```js
import Button from 'components/Button';
```

For more information on these configuration files, see the [jsconfig.json reference](https://code.visualstudio.com/docs/languages/jsconfig) and [tsconfig.json reference](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) documentation.