Optimize dev env instructions (#1072)

* Optimize dev env instructions

* Apply suggestions from code review

Co-authored-by: Tom Brien <TomBrien@users.noreply.github.com>

* Update extensions in others

* Typo

Co-authored-by: Tom Brien <TomBrien@users.noreply.github.com>
Co-authored-by: Tom Brien <tom@byth.co.uk>

docs/development_environment.mdx

@@ -2,32 +2,40 @@
 title: "Set up Development Environment"
 ---
 
+```mdx-code-block
+import {useState} from 'react';
+
+export const RepositoryOpener = () => {
+  const [value, setValue] = useState(0);
+  const repoUrl = `vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=${encodeURIComponent(value)}`;
+  return <div>
+    <input onInput={(ev) => setValue(ev.target.value)} style={{width: "80%", display: "inline-block", marginRight: 16}} />
+    <a href={repoUrl}><button style={{cursor: value == "" ? "default" : "pointer"}} disabled={value == ""}>Open</button></a>
+  </div>
+}
+```
+
 You'll need to set up a development environment if you want to develop a new feature or component for Home Assistant. Read on to learn how to set up.
 
 ## Developing with Visual Studio Code + devcontainer
 
-The easiest way to get started with development is to use Visual Studio Code with devcontainers. This approach will create a preconfigured development environment with all the tools you need. This approach is enabled for all Home Assistant repositories.
+The easiest way to get started with development is to use Visual Studio Code with devcontainers. This approach will create a preconfigured development environment with all the tools you need. This approach is enabled for all Home Assistant repositories. [Learn more about devcontainers.](https://code.visualstudio.com/docs/remote/containers)
 
 **Prerequisites**
 
-- [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)
-- Docker
-  -  For Linux, macOS, or Windows (Pro/Enterprise/Education) use the [current release version of Docker](https://docs.docker.com/install/)
-  -   Windows Home requires [WSL 2](https://docs.microsoft.com/windows/wsl/install-win10#update-to-wsl-2) and the current Edge version of Docker Desktop (see instructions [here](https://docs.docker.com/docker-for-windows/wsl-tech-preview/)). This can also be used for Windows Pro/Enterprise/Education.
+- [Docker](https://docs.docker.com/install/)
 - [Visual Studio code](https://code.visualstudio.com/)
-- [Remote - Containers (VSC Extension)][extension-link]
-
-[More info about requirements and devcontainer in general](https://code.visualstudio.com/docs/remote/containers#_getting-started)
-
-[extension-link]: https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers
 
 **Getting started:**
 
-1. Fork the [Home Assistant core repository](https://github.com/home-assistant/core).
-2. Clone the repository to your computer. Windows users need to [place their files within WSL file system](https://code.visualstudio.com/docs/remote/containers#_open-a-wsl-2-folder-in-a-container-on-windows) to prevent performance degradation.
-3. Open the repository using Visual Studio code.
+1. Go to [Home Assistant core repository](https://github.com/home-assistant/core) and click "fork".
+2. Once your fork is created, copy the URL of your fork and paste it below, then click "Open":
+   <RepositoryOpener />
+3. Your browser will prompt you if you want to use Visual Studio Code to open the link, click "Open Link".
+4. When Visual Studio Code asks if you want to install the Remote extension, click "Install".
+5. The Dev Container image will then be built (this may take a few minutes), after this your development environment will be ready.
 
-When you open this repository with Visual Studio code you are asked to "Reopen in Container", this will start the build of the container.
+In the future, if you want to get back to your development environment: open Visual Studio Code, click on the "Remote Explorer" button in the sidebar, select "Containers" at the top of the sidebar.
 
 ### Tasks
 
@@ -37,6 +45,8 @@ When a task is currently running (like `Preview` for the docs), it can be restar
 
 ## Manual Environment
 
+_You only need these instructions if you do not want to use devcontainers._
+
 It is also possible to set up a more traditional development environment. See the section for your operating system. Make sure your Python version is 3.8 or later.
 
 ### Developing on Linux
@@ -100,7 +110,7 @@ Install the requirements with a provided script named `setup`.
 script/setup
 ```
 
-This will create a virtual environment and install all necessary requirements. You're now set! 
+This will create a virtual environment and install all necessary requirements. You're now set!
 
 Each time you start a new terminal session, you will need to activate your virtual environment:
 

docs/development_testing.md

@@ -7,7 +7,7 @@ As it states in the [Style guidelines section](development_guidelines.md) all co
 - All the unit tests pass
 - All code passes the checks from the linting tools
 
-Local testing is done using [Tox](https://tox.readthedocs.io), which has been installed as part of running `script/setup` in the [virtual environment](development_environment.md). To start the tests, activate the virtual environment and simply run the command:
+Local testing is done using [Tox](https://tox.readthedocs.io), which has been installed as part of running `script/setup` in the [virtual environment](development_environment.mdx). To start the tests, activate the virtual environment and simply run the command:
 
 ```shell
 tox
@@ -19,14 +19,14 @@ It might be required that you install additional packages depending on your dist
 - Ubuntu: `sudo apt-get install libudev-dev`
 
 :::info Important
-Run `tox` before you create your pull request to avoid annoying fixes. 
+Run `tox` before you create your pull request to avoid annoying fixes.
 :::
 
 :::note
 Running the full `tox` test suite will take quite some time, so as the minimal requirement for pull requests, run at least the tests that are related to your code changes (see details below on how to). The full test suite will anyway be run by the CI once you created your pull request and before it can be merged.
 :::
 
-Running `tox` will run unit tests against the locally available Python releases, as well as validate the code and document style using `pycodestyle`, `pydocstyle` and  `pylint`. You can run tests on only one `tox` target -- just use `-e` to select an environment. For example, `tox -e lint` runs the linters only, and `tox -e py38` runs unit tests only on Python 3.8.
+Running `tox` will run unit tests against the locally available Python releases, as well as validate the code and document style using `pycodestyle`, `pydocstyle` and `pylint`. You can run tests on only one `tox` target -- just use `-e` to select an environment. For example, `tox -e lint` runs the linters only, and `tox -e py38` runs unit tests only on Python 3.8.
 
 `tox` uses virtual environments under the hood to create isolated testing environments. The `tox` virtual environments will get out-of-date when requirements change, causing test errors. Run `tox -r` to tell `tox` to recreate the virtual environments.
 
@@ -76,9 +76,9 @@ script/lint
 
 In case you want to check the code coverage for your new component, run the following from the root of the repository:
 
-````shell
+```shell
 pytest ./tests/components/<your_component>/ --cov=homeassistant.components.<your_component> --cov-report term-missing -vv
-````
+```
 
 ### Preventing linter errors
 

docs/frontend/development.md

@@ -23,7 +23,7 @@ git remote add upstream https://github.com/home-assistant/frontend.git
 
 ### Configuring Home Assistant
 
-You will need to have an instance of Home Assistant set up. See our guide on [setting up a development environment](/development_environment.md).
+You will need to have an instance of Home Assistant set up. See our guide on [setting up a development environment](/development_environment.mdx).
 
 Next step is to configure Home Assistant to use the development mode for the frontend. Do this by updating the frontend config in your `configuration.yaml` and set the path to the frontend repository that you cloned in the last step:
 
@@ -41,7 +41,7 @@ If you are using Visual Studio Code with devcontainers for Home Assistant, you n
 ]
 ```
 
-The Home Assistant's devcontainer needs to get rebuilt via the `docker-build` [task](/development_environment.md#tasks), and the `configuration.yaml` should point to the path inside the container:
+The Home Assistant's devcontainer needs to get rebuilt via the `docker-build` [task](/development_environment.mdx#tasks), and the `configuration.yaml` should point to the path inside the container:
 
 ```yaml
 frontend:
@@ -104,7 +104,7 @@ git remote add fork <github URL to your fork>
 
 When you've made your changes and are ready to push them change to the working directory for the frontend project and then push your changes
 
-``` bash
+```bash
 git add -A
 git commit -m "Added new feature X"
 git push -u fork HEAD

docs/supervisor/development.md

@@ -57,19 +57,19 @@ docker run --rm \
 ```
 
 4. On your remote system change the channel to `dev` with `ha supervisor --channel dev` or just `supervisor --channel dev` if it's Home Assistant OS.
-5. Pull down your Supervisor image with  `docker pull awesome-user/aarch64-hassio-supervisor:latest`
+5. Pull down your Supervisor image with `docker pull awesome-user/aarch64-hassio-supervisor:latest`
 6. Tag your Supervisor image as `homeassistant/aarch64-hassio-supervisor:latest`
 
 ```bash
 docker tag awesome-user/aarch64-hassio-supervisor:latest homeassistant/aarch64-hassio-supervisor:latest
 ```
 
-7. Restart the `hassio-supervisor` service with  `systemctl restart hassos-supervisor`
+7. Restart the `hassio-supervisor` service with `systemctl restart hassos-supervisor`
 8. Check for issues with `journalctl -fu hassos-supervisor`
 
 ## Integration development
 
-The instructions here is for development of the `hassio` integration, we're going to assume that you have a [Home Assistant Core development environment](development_environment.md) set up, and that you have [Supervisor API Access](#supervisor-api-access) set up.
+The instructions here is for development of the `hassio` integration, we're going to assume that you have a [Home Assistant Core development environment](development_environment.mdx) set up, and that you have [Supervisor API Access](#supervisor-api-access) set up.
 
 To configure Home Assistant Core to connect to a remote supervisor, set the following environment variables when starting Home Assistant: