build: add recommended config files for VSCode remote development (#30450)

Add some recommended config files to use (as is or as basis) for setting
up [remote development using docker containers][1] with VSCode. This is
an opt-in feature. See `.devcontainer/README.md` for more info.

The configuration can be further tweaked/improved, but is a good
starting point.

[1]: https://code.visualstudio.com/docs/remote/containers

PR Close #30450

.devcontainer/recommended-Dockerfile

@@ -0,0 +1,22 @@
+# Image metadata and config.
+FROM circleci/node:10-browsers
+
+LABEL name="Angular dev environment" \
+      description="This image can be used to create a dev environment for building Angular." \
+      vendor="angular" \
+      version="1.0"
+
+EXPOSE 4000 4200 4433 5000 8080 9876
+
+
+# Switch to `root` (CircleCI images use `circleci` as the user).
+USER root
+
+
+# Configure `Node.js`/`npm` and install utilities.
+RUN npm config --global set user root
+RUN npm install --global yarn@1.13.0  # This needs to be in sync with what we use on CI.
+
+
+# Go! (And keep going.)
+CMD ["tail", "--follow", "/dev/null"]

.devcontainer/recommended-devcontainer.json

@@ -0,0 +1,16 @@
+// Reference: https://code.visualstudio.com/docs/remote/containers#_devcontainerjson-reference
+{
+  "name": "Angular dev container",
+  "dockerFile": "Dockerfile",
+  "appPort": [4000, 4200, 4433, 5000, 8080, 9876],
+  "postCreateCommand": "yarn install",
+  "extensions": [
+    "devondcarew.bazel-code",
+    "gkalpak.aio-docs-utils",
+    "ms-vscode.vscode-typescript-tslint-plugin",
+    "xaver.clang-format",
+    // The following extensions are useful when working on angular.io (i.e. inside the `aio/` directory).
+    //"angular.ng-template",
+    //"dbaeumer.vscode-eslint",
+  ],
+}