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

gkalpak · jasonaden · commit f78bda9ff09a · 2019-05-20T10:13:53.000-07:00
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 angular#30450
diff --git a/.devcontainer/recommended-Dockerfile b/.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"]
diff --git a/.devcontainer/recommended-devcontainer.json b/.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",
+  ],
+}
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -855,6 +855,7 @@ testing/**                                                      @angular/fw-test
 /.buildkite/**                                                  @angular/fw-dev-infra
 /.circleci/**                                                   @angular/fw-dev-infra
 /.codefresh/**                                                  @angular/fw-dev-infra
+/.devcontainer/**                                               @angular/fw-dev-infra
 /.github/**                                                     @angular/fw-dev-infra
 /.vscode/**                                                     @angular/fw-dev-infra
 /docs/BAZEL.md                                                  @angular/fw-dev-infra
diff --git a/.gitignore b/.gitignore
@@ -11,7 +11,9 @@ tools/gulp-tasks/cldr/cldr-data/
 pubspec.lock
 .c9
 .idea/
-.devcontainer
+.devcontainer/*
+!.devcontainer/recommended-devcontainer.json
+!.devcontainer/recommended-Dockerfile
 .settings/
 .vscode/launch.json
 .vscode/settings.json
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -8,5 +8,8 @@
     "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",
   ],
 }

Original file line number	Diff line number	Diff line change
`@@ -8,5 +8,8 @@`
`8`	`8`	`"gkalpak.aio-docs-utils",`
`9`	`9`	`"ms-vscode.vscode-typescript-tslint-plugin",`
`10`	`10`	`"xaver.clang-format",`
	`11`	+ // The following extensions are useful when working on angular.io (i.e. inside the `aio/` directory).
	`12`	`+ //"angular.ng-template",`
	`13`	`+ //"dbaeumer.vscode-eslint",`
`11`	`14`	`],`
`12`	`15`	`}`