Vscode extension

I published a esphome extension for vscode, check it out
https://marketplace.visualstudio.com/items?itemName=ESPHome.esphome-vscode

6 Likes

Excellent, but how do I use the plugin?
I have installed the plugin and added the url via the settings, with the following url 10.10.0.21:6052

how do I open and edit the EspHome from my vscode?

Regards,
Passie

Sorry as ESPHome version 1.14 is just released it needs a version 0.2.0 of the plugin is required, please check you are running that version as it was not available by the time v1.14 released.

When using dashboard mode, you know it should work when the url you put in the browser getā€™s you straight to esphome dashboard, e.g. entering hassio:6052 should drop you right at the dashboard

Iā€™m using the latest version of both vscode and esphome.
I tried to open the following urlā€™s in my browser but nothing happend.

https://10.10.0.21:6052/vscode
http://10.10.0.21:6052/vscode
ws://10.10.0.21:6052/vscode

How do you open the yaml file on the esp with vscode?
Is there anything else I need to configure?

when you go to http://10.10.0.21:6052/vscode you should get a string saying: Can "Upgrade" only to "WebSocket".
What are you getting?
If it does not connect, check on the add ons configuration two things:

  1. Inside config you should have:
{
  "leave_front_door_open": true
}
  1. Inside network where it says container: 6052/tcp you must write 6052 where

Then restart the add on.

In any case you cannot open the yaml files from the esp directly, you need to
a) have a copy of the yaml files on your local file system
b) have a shared folder (samba addon) and open that folder with esphome
c) use vscode remote, but this one is harder as I donā€™t know if it works with Hass.io, so Iā€™ll recommend b

b is also better because youā€™ll keep the files in sync with the Dashboard.

Sorry you donā€™t need the line where it says dev

Iā€™m using the VS Code HassIO add-on. Can this extension be added to that? When I got to the ā€˜extensionsā€™ section and search for ESPhome I donā€™t get any search result

I did not test that.
May be @frenck Knows better. I have hassio on a pi which does not support vscode add on

I got http://192.168.0.x:6052/vscode

then got message Can ā€œUpgradeā€ only to ā€œWebSocketā€

but not applied vscode addon support

then my log is follows

INFO 304 GET / (0.0.0.0) 13.09ms
INFO 101 GET /ace (0.0.0.0) 0.42ms
INFO Running command ā€˜esphome --dashboard -q /config/esphome vscode --aceā€™
INFO 304 GET /edit?configuration=bedroom.yaml (0.0.0.0) 1.52ms
INFO 304 GET / (0.0.0.0) 4.30ms
INFO 101 GET /ace (0.0.0.0) 0.45ms
INFO Running command ā€˜esphome --dashboard -q /config/esphome vscode --aceā€™
INFO 200 GET /edit?configuration=bw_shp6_2.yaml (0.0.0.0) 0.43ms
WARNING 400 GET /vscode (0.0.0.0) 0.86ms
WARNING 400 GET /vscode (0.0.0.0) 0.80ms

what can I do now ?

I am using Hass.io with Visual Studio Code Add-on installed. I want to make sure I understand how this functions. I can use this extension when I edit esphome yaml files from Visual Studio Code accessing the files from the esphome directory . It doesnā€™t launch Visual Studio Code if I go to ESPHome Dashboard and select EDIT from one of my projects. The original ESPHome editor is launched. Once I have edited a file using Visual Studio Code I then have to go to ESPHome Dashboard and UPLOAD. Is this correct?

I guess so. In your scenario thatā€™s the most straightforward right now. Iā€™m thinking on Adding some functionality so vscode can invoke the dashboard to do the upload.

2 Likes

I have hit a recent problem. Trying to edit ESPHome project with VSCode and get the following error in VSCode ā€œCould not execute ESPHome. Make sure you can run ESPHome from the command line.ā€ Per instructions, Per VSCode documentation I have added leave_front_door_open: true in ESPHome add-on Configuration and Host 6052 in ESPHome add-on Network settings. Not sure, if this related, but I canā€™t access homeassistant.local:8123, but I can access homeassistant:8123 or by using the actual ip address.

If this is related to the OTA button from vscode, thatā€™s only supported if esphome runs in the command line.

@glmnet Your extension seams to be a great addition to VSCode!
Although I could not get it to workā€¦ :joy: :joy: :joy:
Would you give me some help?
My Home Assistant is running on a Raspberry Pi and Iā€™m using VSCode on a Mac.

ESPHome version: 1.15.0
VSCode version: 1.49.0

Hereā€™s my config and outputs:

Thanks in advance!

try exactly this: 192.168.0.200:6052

Wow!! Great!! It worked!!
Thanks!!

One more thingā€¦ I couldnā€™t manage to make OTA button to work on VSCodeā€¦

Is there any magic trick for that??

no magic here, OTA only works for the ā€œLocalā€ esphome mode, I should hide the button or, better yet implement OTA via dashboard, thats more thinking though

What a shameā€¦
Anywayā€¦ Youā€™re already making my life easier with ESPHome yamls!!
Thanks a lot!! :clap: :clap: :clap: :clap:

Hello!
I just wonder if thereā€™s any progress made in this way? Iā€™m setting up fresh HA installation and have same ā€œproblemā€ - esphome commandline is installed (with pip3 install esphome command), but vscode still cantā€™ find it when i hit OTA button).
You say that OTA works only locally anyway - i canā€™t find which address to enter in settingsā€¦ i always get vscode plugin error "canā€™t connect to esphome, no matter what i enter, unless i have it set to ā€œdashboardā€.

1 Like