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:
- Inside config you should have:
{
"leave_front_door_open": true
}
- 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… 
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:
-
On ESPHome Add-on:
-
When I go to “http://192.168.0.200:6052/vscode” I get:
-
On VSCode extension settings:
-
VSCode error:
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!! 
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