Skip to content

Commit 6229004

Browse files
committed
Dev container tutorial
1 parent 7269f05 commit 6229004

File tree

2 files changed

+113
-96
lines changed

2 files changed

+113
-96
lines changed

Diff for: README.md

+19-96
Original file line numberDiff line numberDiff line change
@@ -11,20 +11,16 @@ and can be used for container runs.
1111
Commands below show how to run a container, using an image from Docker Hub
1212
```
1313
docker run -d -it --name pico-sdk --mount type=bind,source=${PWD},target=/home/dev lukstep/raspberry-pi-pico-sdk:latest
14-
1514
docker exec -it pico-sdk /bin/sh
1615
```
1716

18-
The directory from which the `docker run` command was called will be mounted to /home/dev in the container.
17+
The directory from which the `docker run` command was called will be mounted to /home/dev in the container.
1918
So after attaching to the SDK container you can build your project following the steps:
2019

2120
```
2221
cd /home/dev
23-
2422
mkdir build
25-
2623
cd build
27-
2824
cmake .. && make -j4
2925
```
3026

@@ -34,108 +30,35 @@ To build your own SDK image, You need to clone this repository and run the follo
3430

3531
```
3632
cd raspberry-pi-pico-docker-sdk
37-
3833
docker build . --tag pico-sdk
39-
4034
docker run -d -it --name pico-sdk --mount type=bind,source=${PWD},target=/home/dev pico-sdk
41-
4235
docker exec -it pico-sdk /bin/sh
4336
```
4437

45-
## Visual Studio Code as Rassberry Pi PICO projects IDE
46-
47-
You can use the SDK container with Visual Studio Code as Raspberry Pi Pico projects IDE.
48-
49-
### Attaching VSCode to SDK Docker container
50-
51-
Follow the instruction below to set up VSCode:
52-
53-
1. Install [Visual Studio Code](https://code.visualstudio.com) and next [Remote Development](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack) extensions.
54-
55-
![image-1](https://user-images.githubusercontent.com/20487002/201380432-da387680-f6b0-4542-8c02-6a3eec8e103d.png)
56-
57-
2. Open the terminal and go to the projects you want to open in VSCode.
58-
59-
3. Pull SDK image from Docker HUB and run SDK container via the following command. The container must be running while you attach to it via VSCode.
60-
61-
```
62-
docker run -d -it --name pico-sdk --mount type=bind,source=${PWD},target=/home/dev lukstep/raspberry-pi-pico-sdk:latest
63-
64-
docker exec -it pico-sdk /bin/sh
65-
```
66-
67-
4. When the container is launched, go to VSCode, click the green button in the lower left corner of VSCode and select options: Attach to Running Container...
68-
69-
![image-2](https://user-images.githubusercontent.com/20487002/201471437-b12dc225-28ab-4ebd-b694-fc7058d34e2e.png)
70-
71-
5. Select the SDK container.
38+
## Visual Studio Code as Raspberry Pi Pico projects IDE
7239

73-
![image-4](https://user-images.githubusercontent.com/20487002/201383009-54a3fc62-1206-4105-83d0-d956448434dd.png)
40+
You can use the SDK container with Visual Studio Code and create Raspberry Pi Pico projects IDE.
41+
Two solutions have been prepared: The new one is the use of Visual Studio Dev Containers extension.
42+
The old ones that is manual configuration.
7443

75-
6. Then a new VSCode window will open. At the bottom window, you can see that it is attached to the SDK container.
44+
### [Visual Studio Code Dev Container](https://code.visualstudio.com/docs/devcontainers/containers)
7645

77-
![image-5](https://user-images.githubusercontent.com/20487002/201383452-10573842-de2a-46c3-9ebf-f6fd5f06c687.png)
78-
79-
7. Now, there is needed to open project files. Your project is mounted to `/home/dev` in the container. Go to EXPLORE tab in VSCode and click Open Folder. In opened window write `/home/dev` and click the OK button.
80-
81-
![image-6](https://user-images.githubusercontent.com/20487002/201386202-dd0934b2-5fae-4a2d-8875-f2cb40b1dc59.png)
82-
83-
8. Now You can explore, develop and build your Raspberry Pi Pico project via Visual Studio Code!
84-
85-
![image-7](https://user-images.githubusercontent.com/20487002/201389505-d1346622-a8e1-4d0b-842c-57e5b54f9183.png)
86-
87-
### Pico SDK aware Intellisense
88-
89-
For an IntelliSense that will be aware of Raspberry Pi Pico SDK dependencies, we will use [Clangd](https://clangd.llvm.org). Clangd is a C/C++ language server provided by the LLVM project. To Setup Clang as Intellisense engine follow instruction below:
90-
91-
1. To begin with, you need to install the server itself (Clangd is not installed by default in the SDK container image), to do this in the terminal call the command:
92-
93-
```
94-
apk add clang-extra-tools
95-
```
96-
97-
2. Next is needed to install the Visual Studio Code [Clangd extension](https://marketplace.visualstudio.com/items?itemName=llvm-vs-code-extensions.vscode-clangd).
98-
99-
![image-1](https://user-images.githubusercontent.com/20487002/201468256-be7741a2-9092-406a-8be1-d4d9640a85e7.png)
100-
101-
1. To set-up The Clangd extension, in the project root directory, create folder .vcode with file settings.json. To settings.json past configuration from the snippet below:
102-
103-
```json
104-
{
105-
"C_Cpp.intelliSenseEngine": "Disabled",
106-
"clangd.path": "/usr/bin/clangd",
107-
"clangd.checkUpdates": false,
108-
"clangd.restartAfterCrash": true,
109-
"clangd.detectExtensionConflicts": true,
110-
"clangd.arguments": ["-log=verbose",
111-
"-pretty",
112-
"--background-index",
113-
"--query-driver=/usr/bin/arm-none-eabi-gcc",
114-
"--compile-commands-dir=/home/dev/build"]
115-
}
116-
```
117-
118-
![image-2](https://user-images.githubusercontent.com/20487002/201468479-7de7e598-3aac-4fe4-a240-d7404200a0a6.png)
119-
120-
121-
4. For clangd to work, it needs a `compile_commands.json` file. This file contains the compilation and dependency information of each file in the project. To create it you need to add to the CMake command, `-DCMAKE_EXPORT_COMPILE_COMMANDS=1`. So You need to build your project with the command:
122-
123-
```
124-
mkdir build
125-
126-
cd build
127-
128-
cmake -DCMAKE_EXPORT_COMPILE_COMMANDS=1 ..
129-
130-
make
131-
```
46+
#### Prerequisites
13247

133-
5. Now IntelliSense should work!. Now you should see a prompt when you start typing. If you hover your cursor over a function from the SDK you should see its documentation, You can go to the function definition by pressing F12.
48+
To use dev container you need to VSCode, Docker and VSCode extensions installed.
49+
Use [this](https://code.visualstudio.com/docs/devcontainers/tutorial#_prerequisites) instruction to set-up.
13450

135-
![image-3](https://user-images.githubusercontent.com/20487002/201469349-b8a9721f-4169-4bf6-a8d6-d459f8f97180.png)
51+
#### Pico Dev container usage
13652

137-
![image-4](https://user-images.githubusercontent.com/20487002/201468782-50fc6abb-1f82-49d5-8b93-631dd30f1f58.png)
53+
- Clone [pico-dev-container](https://github.com/lukstep/pico-dev-container/tree/main) repository.
54+
- Open pico-dev-container folder in Visual Studio Code.
55+
- In VSCode, click the button in the lower left corner of VSCode and select options: Reopen in Container...
56+
![image-1](https://github.com/lukstep/raspberry-pi-pico-docker-sdk/assets/20487002/f1f06bca-cb0b-4c2d-bf4c-611ef004e70a)
57+
- Build project.
58+
- Enjoy coding you Pico project with Intellisense.
59+
![image-1](https://github.com/lukstep/raspberry-pi-pico-docker-sdk/assets/20487002/ed367c06-aa9f-440a-9ca2-ddfbd7bdd266)
13860

139-
![image-5](https://user-images.githubusercontent.com/20487002/201468813-2ef7b04f-ede6-46cb-84e2-a40db595811d.png)
61+
### Manual configuration of VSCode as Pico IDE (old)
14062

63+
Go [here](docs/vscode_manual_setup.md) for step-by-step instruction
14164

Diff for: docs/vscode_manual_setup.md

+94
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
2+
# Manual configuration of VSCode as Pico IDE
3+
4+
## Prerequisites
5+
6+
You need to Visual Studio Code and Docker installed.
7+
8+
## Attaching VSCode to SDK Docker container
9+
10+
Follow the instruction below to set up VSCode:
11+
12+
- Install [Visual Studio Code](https://code.visualstudio.com) and next [Remote Development](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack) extensions.
13+
14+
![image-1](https://user-images.githubusercontent.com/20487002/201380432-da387680-f6b0-4542-8c02-6a3eec8e103d.png)
15+
16+
- Open the terminal and go to the projects you want to open in VSCode.
17+
18+
- Pull SDK image from Docker HUB and run SDK container via the following command. The container must be running while you attach to it via VSCode.
19+
20+
```
21+
docker run -d -it --name pico-sdk --mount type=bind,source=${PWD},target=/home/dev lukstep/raspberry-pi-pico-sdk:latest
22+
docker exec -it pico-sdk /bin/sh
23+
```
24+
25+
- When the container is launched, go to VSCode, click the green button in the lower left corner of VSCode and select options: Attach to Running Container...
26+
27+
![image-2](https://user-images.githubusercontent.com/20487002/201471437-b12dc225-28ab-4ebd-b694-fc7058d34e2e.png)
28+
29+
- Select the SDK container.
30+
31+
![image-4](https://user-images.githubusercontent.com/20487002/201383009-54a3fc62-1206-4105-83d0-d956448434dd.png)
32+
33+
- Then a new VSCode window will open. At the bottom window, you can see that it is attached to the SDK container.
34+
35+
![image-5](https://user-images.githubusercontent.com/20487002/201383452-10573842-de2a-46c3-9ebf-f6fd5f06c687.png)
36+
37+
- Now, there is needed to open project files. Your project is mounted to `/home/dev` in the container. Go to EXPLORE tab in VSCode and click Open Folder. In opened window write `/home/dev` and click the OK button.
38+
39+
![image-6](https://user-images.githubusercontent.com/20487002/201386202-dd0934b2-5fae-4a2d-8875-f2cb40b1dc59.png)
40+
41+
- Now You can explore, develop and build your Raspberry Pi Pico project via Visual Studio Code!
42+
43+
![image-7](https://user-images.githubusercontent.com/20487002/201389505-d1346622-a8e1-4d0b-842c-57e5b54f9183.png)
44+
45+
## Pico SDK aware Intellisense
46+
47+
For an IntelliSense that will be aware of Raspberry Pi Pico SDK dependencies, we will use [Clangd](https://clangd.llvm.org). Clangd is a C/C++ language server provided by the LLVM project. To Setup Clang as Intellisense engine follow instruction below:
48+
49+
- To begin with, you need to install the server itself (Clangd is not installed by default in the SDK container image), to do this in the terminal call the command:
50+
51+
```
52+
apk add clang-extra-tools
53+
```
54+
55+
- Next is needed to install the Visual Studio Code [Clangd extension](https://marketplace.visualstudio.com/items?itemName=llvm-vs-code-extensions.vscode-clangd).
56+
57+
![image-1](https://user-images.githubusercontent.com/20487002/201468256-be7741a2-9092-406a-8be1-d4d9640a85e7.png)
58+
59+
- To set-up The Clangd extension, in the project root directory, create folder .vcode with file settings.json. To settings.json past configuration from the snippet below:
60+
61+
```json
62+
{
63+
"C_Cpp.intelliSenseEngine": "Disabled",
64+
"clangd.path": "/usr/bin/clangd",
65+
"clangd.checkUpdates": false,
66+
"clangd.restartAfterCrash": true,
67+
"clangd.detectExtensionConflicts": true,
68+
"clangd.arguments": ["-log=verbose",
69+
"-pretty",
70+
"--background-index",
71+
"--query-driver=/usr/bin/arm-none-eabi-gcc",
72+
"--compile-commands-dir=/home/dev/build"]
73+
}
74+
```
75+
76+
![image-2](https://user-images.githubusercontent.com/20487002/201468479-7de7e598-3aac-4fe4-a240-d7404200a0a6.png)
77+
78+
79+
- For clangd to work, it needs a `compile_commands.json` file. This file contains the compilation and dependency information of each file in the project. To create it you need to add to the CMake command, `-DCMAKE_EXPORT_COMPILE_COMMANDS=1`. So You need to build your project with the command:
80+
81+
```
82+
mkdir build
83+
cd build
84+
cmake -DCMAKE_EXPORT_COMPILE_COMMANDS=1 ..
85+
make
86+
```
87+
88+
- Now IntelliSense should work!. Now you should see a prompt when you start typing. If you hover your cursor over a function from the SDK you should see its documentation, You can go to the function definition by pressing F12.
89+
90+
![image-3](https://user-images.githubusercontent.com/20487002/201469349-b8a9721f-4169-4bf6-a8d6-d459f8f97180.png)
91+
92+
![image-4](https://user-images.githubusercontent.com/20487002/201468782-50fc6abb-1f82-49d5-8b93-631dd30f1f58.png)
93+
94+
![image-5](https://user-images.githubusercontent.com/20487002/201468813-2ef7b04f-ede6-46cb-84e2-a40db595811d.png)

0 commit comments

Comments
 (0)