510c466271
* Add WSL instruction and IDE setup instruction * Fix setup * Fix setup * Fix * Update docs/docs/developer/additional/ide-setup.mdx Co-authored-by: Weiko <corentin@twenty.com> --------- Co-authored-by: Weiko <corentin@twenty.com>
52 lines
2.4 KiB
Plaintext
52 lines
2.4 KiB
Plaintext
---
|
|
sidebar_position: 0
|
|
sidebar_custom_props:
|
|
icon: TbBrandVscode
|
|
---
|
|
|
|
# IDE Setup
|
|
|
|
This section will help you setup your IDE for the project. If you haven't setup your development environment, please refer to [Development Environment](/developer/local-setup) section.
|
|
|
|
You can obviously use any IDE you want but we recommend using Visual Studio Code as our internal team uses it and we have a lot of extensions and settings that we can share with you.
|
|
|
|
|
|
## Visual Studio Code
|
|
|
|
### Installation
|
|
|
|
You can download Visual Studio Code from [here](https://code.visualstudio.com/download). Depending on your operating system, you can download the appropriate version.
|
|
|
|
### Open Project
|
|
|
|
Once you have installed Visual Studio Code, you can open the project by clicking on `File > Open Folder` and selecting `twenty` project root folder.
|
|
|
|
<div style={{textAlign: 'center'}}>
|
|
<img src="/img/developer/ide-project-open.png" alt="Visual Studio Code: Open Twenty project" width="90%" />
|
|
</div>
|
|
|
|
### Extensions
|
|
|
|
You can use the recommended extensions for the project. You will find them in `.vscode/extensions.json` file. VSCode should prompt you to install the recommended extensions when you open the project.
|
|
|
|
<div style={{textAlign: 'center'}}>
|
|
<img src="/img/developer/ide-extensions.png" alt="Visual Studio Code: Install recommended extensions" width="90%" />
|
|
</div>
|
|
|
|
|
|
### Docker Setup
|
|
|
|
If you are using a [Docker setup](/developer/local-setup#docker-install), you will need to run VSCode in the container. You can do that by opening the project, clicking on `Remote Explorer` icon on the left sidebar and then clicking on `Attach in New window` on `dev-twenty-dev` container.
|
|
|
|
<div style={{textAlign: 'center'}}>
|
|
<img src="/img/developer/ide-start-dev-container.png" alt="Visual Studio Code: Open in container" width="90%" />
|
|
</div>
|
|
|
|
<br />
|
|
VSCode will open a new window and you will be able to use it as you would normally do. The only difference is that you will be running VSCode inside the container and you will have access to all the tools and dependencies that are installed in the container.
|
|
|
|
If you stop your containers, you will need to start them again before opening the project in VSCode again.
|
|
|
|
### Conclusion
|
|
|
|
You are all set to start developing the project. If you have any questions, please read our [troubleshooting guide](/developer/additional/setup-troubleshooting) please feel free to reach out to us on [Discord](https://discord.com/invite/cx5n4Jzs57). |