Launch VS Code IDE inside a Docker container

Benefits:

You don’t even need to install the language package (PHP, Node.js, Go, etc) and all other tools locally on your host system, you only need to have the VS Code app (or even Free/Libre Open Source VS Codium app).
You'll got a native app experience with local graphical interface, but all operations are performed inside the container.
You'll use for development the same versions of language compiler (php or other) and tools (composer, phpcs and others) as installed in the container without any additional actions on the local system.
You can use totally different environments per each project (different composer versions, php versions, other tools) without any tricks on your local system.
You'll always have a native terminal console from the container, without needing to launch proxy commands like ddev composer install and ddev ssh.
You can even connect to any remote computer (eg VPS in some cloud environment) using SSH and attach VS Code to it’s containers from your local machine with the same performance of the UI like working with local project! More info is here.

Preparation:

Launch a container with the needed environment on your local machine or on any remote server. For PHP development that tools can be useful: DDEV, Lando, for other languages - search suitable containers on Docker Hub.

Installation:

Install the VS Code from https://code.visualstudio.com/download
Launch the VS Code and install the Visual Studio Code Remote Development Extension Pack.
Click on the “Remote Explorer” icon on left panel, choose “Containers” from the top dropdown.
See the list of active Docker containers, right click on ddev-projectname-web container, choose “Attach to Container”.
Wait several seconds while VS Code will download and deploy the server-side component of VS Code into the container (”Downloading VS Code Server” message), and that’s all!

Additional configuration tips for DDEV:

To fix the XDebug connection to VS Code inside the container you need to redirect xdebug target to localhost via creating a php configuration file .ddev/php/xdebug-localhost.ini:
```
mkdir .ddev/php; echo "xdebug.client_host=127.0.0.1" > ./.ddev/php/xdebug-localhost.ini; ddev restart; ddev xdebug enable
```
To use VS Code as the default editor - launch in Terminal:
```
export EDITOR=code
```
but maybe you'll also bump into this issue: vscode-remote-release/#6899

Quick configuration of a clean Ubuntu installation for development:

Here are the command sets ("one-liners") to quickly configure a working environment on a freshly installed Ubuntu Linux system.

1. Install the VS Code:


snap install code

2. Install the Docker:


sudo apt update; sudo apt install docker.io -y; sudo adduser $USER docker; newgrp docker

3. Install the DDEV:

sudo apt install curl -y; export DDEV_NO_INSTRUMENTATION=true; curl -s -L https://raw.githubusercontent.com/drud/ddev/master/scripts/install_ddev.sh | bash

4. Create a Drupal project and install tools into the container (drush, phpcs, phpcbf, phpunit):

mkdir drupal; cd drupal; ddev config --project-type=drupal9 --docroot=web  --create-docroot --xdebug-enabled; mkdir .ddev/php; echo "xdebug.client_host=127.0.0.1" > ./.ddev/php/xdebug-localhost.ini; ddev start; ddev composer create "drupal/recommended-project";  ddev composer require --dev -W drush/drush drupal/coder drupal/core-dev; ddev exec drush site:install --account-name=admin --account-pass=admin; echo "Open site at: https://drupal.ddev.site"

5. Start coding!

And if you want to configure running Drupal's FunctionalJavascript - it's also possible, here is a good article about this: Running Drupal's FunctionalJavascript tests on DDEV.