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

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
@@ -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:

docs/supervisor/development.md

@@ -69,7 +69,7 @@ docker tag awesome-user/aarch64-hassio-supervisor:latest homeassistant/aarch64-h
 
 ## 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: