VSCode in Docker for Home Assistant on Synology - #019

In this video, we will install VSCode in Docker on Synology.

VSCode is a source code editor developed by Microsoft that allows you to edit your code or in our case configuration files more easily.

Installation has a lot of steps and is not as easy as Home Assistant VSCode Add-On but works great and will help you in editing yaml files.

03:41 - We have to create two new folders:
mkdir /volume1/docker/vscode
mkdir /volume1/docker/vscode/temp

04:46 - Following are couple of options for commands:

- this command will use Synology host network settings - use this if you DON'T have any other containers on port 8080
sudo docker run -itd --net=host --name=vscode --user 1000:1000 --restart=always -e PASSWORD=12345678 -v /volume1/docker/vscode:/home/coder/.local/share/code-server -v /volume1/docker/home-assistant:/home/coder/project codercom/code-server:v2

- this command will use internal Docker network settings - use this if you have any other container running on port 8080 (for ex. FaceBox)
sudo docker run -itd -p 8888:8080 --name=vscode --user 1000:1000 --restart=always -e PASSWORD=12345678 -v /volume1/docker/vscode:/home/coder/.local/share/code-server -v /volume1/docker/home-assistant:/home/coder/project codercom/code-server:v2

10:01 - edit permissions of the folder

sudo chmod 777 /volume1/docker/vscode -R

On main screen open Home Assistant configuration folder to be able to see yaml files - just press "Open folder..." and select "project/" and press on OK.

13:18 - Following are extensions that you need/can install to enhance your experience:

1) Home Assistant Config Helper
15:50 - NOTE: This component requires you to create long-lived access token inside Home Assistant and copy it in configuration field.

2) Log File Highlighter - NOTE - Doesn't work anymore

3) ESPHome VSCode plugin

4) Material Design Icons Intellisense

5) indent-rainbow

6) YAML

7) vscode-icons

14:13 - After you download each one of them, copy them to your Synology in folder docker/vscode/temp and install them as per video.

15:00 - You have to install each component by hand using vscode intefrace.

19:51 - fix permissions in configuration files folder:

sudo chmod 777 /volume1/docker/home-assistant -R

vscode:
title: 'vscode'
icon: mdi:bug

Check your configuration and restart Home Assistant Core.

I hope that you will find this component useful as much as I do!

Thank you for watching this video. If you have any questions or comments , please leave them below.

Have fun!
BeardedTinker

Twitter: @BeardedTinker
#HomeAssistant #VSCode #Docker #Synology

[pliind]

Thank you! I used your tips to install it on unraid :), for anybody else doing it, use bridge mode and assign -p 8081:8080 (skip 1000:1000)

[BeardedTinker]

I would like to thank @Ram for comment he made, as it made me check other vscode image on Docker Hub. And it's much easier to install as it doesn't required to mess with change in permissions in both /vscode folder to make it writable and also /home-assistant folder to save/edit files:
Following is command I used - Thanks once again Ram!👍

sudo docker run --name vscode --restart=unless-stopped --net=host -itd -v -v -e ‘TZ=Europe/Zagreb’ -e PASSWORD=12345678 linuxserver/code-server

With this image, you can skip both "sudo chmod..." steps .

[sergeboisse]

Hello, I do not understand which page you refreshed at 11:37 and on which IP I should enter the password. I successfully installed and run the container, but I was not able to see yaml files with VScode on HA EDIT : I had to specify port 8043 ... hope this wil help some other users !

[xuxusito]

Hey thank you so much for this explanation. I'm using HA inside docker instead of Hassio because I also want to be able to use my raspberry for other things and also other docker images so this is perfect for me!

[supershaggyberto]

Best explanation available on this subject! Thank you!

[winit.s]

I trying to connect to HA via VSC through SSH and fail in many method until I found your vid!. Thanks for the vid.

FYI for whom just found out this. You can use :latest instead of :v2 and replace and panel_ifram by add it through HA UI in Setting > Dashboard > Add Dashboard > Webpage

Anyway @BeardedTinker, 1 question, Can we not to set HA folder perm with 777? I feel uncomfortable with wide range of this perm to be expose.

[Strangelife-]

Thank you for the great teaching, I am currently trying to get vs code in docker to help me install frigate and link it with my supervised setup of HA on yellow will this work for me?

[JesperSkelgaard]

I like all your guides and another great one done by you :)
But you should do them with ssl (even a self signed) because if you want to use google home og google TTS you need to do ssl on home-assistant and all you want to open i iframe, then need to be ssl too. And not all supports synology ssl wrapper for insecure services, like this one doesn't

[btbd]

Update: version 3.3.1 was just released and I can confirm it's working out of the box for arm64 architectures :)

[JoeDzado]

My vscode panel in Home Assistant asks for the password, but then never proceeds to the code browser. It asks for the password ad infinitum. Any ideas anyone?

[ArnodeLange]

i have svcode running in its docker but i am not seeing the projectfiles of the home assistent .. how can i connect to the homeassistent folder?

[steffie.morris]

Tnx for the video. Very helpfull!
I am getting the error that the panel_iframe is not allowed anymore in the configurations.yaml. Probably needs to be done differently?
Maybe you can update the notes under the video?

[ivarengel]

Great video ! However after login in a get a 500 error. This is what i can see in the LOG file : "[2021-02-18T20:09:07.122Z] error parent:13 Uncaught exception: EACCES: permission denied, mkdir [2021-02-18T20:09:57.453Z] warn EACCES: permission denied, open
Etc. Any suggestions what is going wrong i how i can fix it ?

[yvansandoz]

Also, anything to do to correct this error message? code-server is being accessed over an insecure domain. Web views, the clipboard, and other functionality will not work as expected.

[jamesanderson]

Great video and explanations. I have a quick question. Why use the code-server:v2 image and not code-server:latest?

[tanhongwai]

I am not sure why all my iframe is not able to shown correctly for the url that required login. the only iframe that is working for me is the configurator which do not need to login. Any setup you need prior to this? Or perhaps only certain browser allow to do so? I have tried Chrome and Microsoft Edge, both not working. :(

[somlaig]

Unfortunately there's no more v2 on the Docker Hub, I tried to install the latest, managed to start it but I cannot integrate into the HA iframe. I receive an empty page. :-(

[narkeddiver]

Quick question - I use vscode for web development - how easy is it to map multiple project volumes to a single vscode container?

Or would I be better off having a separate container for each project?

[namel]

Great video! There is an error in your description for the command that you enter, you have '-p' before --net=host (the video is correct but the text in your description has this error)

[shaunwhiteley]

Thanks for this, question though, why did you not install HASSIO instead of Home Assistant? The HASSIO add-ons has vscode plugin. Cheers