Editing Home Assistant in Visual Studio Code
Visual Studio Code is a completely free, open source, powerful and extensible text editor. Best of all, it's cross-platform and available on Windows, macOS, and Linux. Here are some basic tips on using Visual Studio Code to edit your Home Assistant configuration and Lovelace files.
To begin, download and install Visual Studio Code from Microsoft's website.
Although you don't need to do the following, it will make your experience smoother.
The Home Assistant Config Helper extension by Kees Schollaart connects Visual Studio Code to your Home Assistant instance, and then provides auto completion of your entity_id's. Spend more time coding your automations and less time looking up entity_id's on the States page. Nice!
In the sidebar of Visual Studio Code, select the "Extensions" button at the bottom (looks like a cube) and then type "YAML" in the search field. Or just click this YAML link and press the Install button. Once installed it will validate your files and detect any errors.
This Material Design Icons Intellisense by lukas-tr will let you auto-suggest Material Design Icon names whenever you type mdi:. Here's a quick demo gif:
If you're going to be using Visual Studio Code primarily to edit Home Assistant configuration files, you'll probably want to change the default file type to YAML. Here's how to do that.
- Go to Preferences -> Settings
- Find Text Editor -> Files
- Find "Default Language" and in the field type "yaml"
From now on, any new files created will default to yaml rather than plain text.
These are just a few basic tips to get you up to speed with using VSCode, not an extensive tutorial.
Indenting - Highlight the portion you want ot indent and then press the tab and it will be indented two spaces. To un-indent, do the same but tab + shift together.
Commenting Out Code - In order to comment out blocks of code, use the keyboard shortcut command + /. Once commented out the text will be green.