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