chore: add development container

.devcontainer/devcontainer.json

@@ -0,0 +1,87 @@
+{
+  "name": "Node.js on Debian",
+  "image": "mcr.microsoft.com/devcontainers/typescript-node:16-bullseye",
+  "features": {
+    "ghcr.io/devcontainers/features/github-cli": {},
+    "ghcr.io/devcontainers/features/powershell": {}
+  },
+  "mounts": [
+    {
+      "source": "router-component-store_node_modules",
+      "target": "${containerWorkspaceFolder}/node_modules",
+      "type": "volume"
+    }
+  ],
+  "waitFor": "onCreateCommand",
+  "updateContentCommand": "yarn install --non-interactive --frozen-lockfile",
+  "postAttachCommand": {
+    // "developmentServer": "yarn start"
+  },
+  "portsAttributes": {
+    // "4200": {
+    //   "label": "Development server",
+    //   "onAutoForward": "openPreview"
+    // }
+  },
+  "forwardPorts": [
+    // 4200
+  ],
+  "containerEnv": {
+    "NODE_OPTIONS": "--max-old-space-size=6144"
+  },
+  "hostRequirements": {
+    "cpus": 4,
+    "memory": "8gb",
+    "storage": "32gb"
+  },
+  "customizations": {
+    "codespaces": {
+      "openFiles": ["README.md"]
+    },
+    "vscode": {
+      "extensions": [
+        "Angular.ng-template",
+        "dbaeumer.vscode-eslint",
+        "EditorConfig.EditorConfig",
+        "esbenp.prettier-vscode",
+        "GitHub.vscode-pull-request-github",
+        "nrwl.angular-console",
+        "WallabyJs.wallaby-vscode"
+      ],
+      "settings": {
+        "editor.codeActionsOnSave": {
+          "source.organizeImports": true
+        },
+        "editor.formatOnSave": true,
+        "editor.rulers": [80],
+        "[css]": {
+          "editor.defaultFormatter": "esbenp.prettier-vscode"
+        },
+        "[html]": {
+          "editor.defaultFormatter": "esbenp.prettier-vscode"
+        },
+        "[javascript]": {
+          "editor.defaultFormatter": "esbenp.prettier-vscode"
+        },
+        "[json]": {
+          "editor.defaultFormatter": "esbenp.prettier-vscode"
+        },
+        "[jsonc]": {
+          "editor.defaultFormatter": "esbenp.prettier-vscode"
+        },
+        "[md]": {
+          "editor.defaultFormatter": "esbenp.prettier-vscode"
+        },
+        "[scss]": {
+          "editor.defaultFormatter": "esbenp.prettier-vscode"
+        },
+        "[typescript]": {
+          "editor.defaultFormatter": "esbenp.prettier-vscode"
+        },
+        "[yaml]": {
+          "editor.defaultFormatter": "esbenp.prettier-vscode"
+        }
+      }
+    }
+  }
+}

.editorconfig

@@ -7,6 +7,7 @@ indent_style = space
 indent_size = 2
 insert_final_newline = true
 trim_trailing_whitespace = true
+max_line_length = 80
 
 [*.md]
 max_line_length = off

.vscode/extensions.json

@@ -1,8 +1,13 @@
 {
   "recommendations": [
-    "nrwl.angular-console",
+    "Angular.ng-template",
+    "dbaeumer.vscode-eslint",
+    "EditorConfig.EditorConfig",
     "esbenp.prettier-vscode",
-    "firsttris.vscode-jest-runner",
-    "dbaeumer.vscode-eslint"
+    "GitHub.codespaces",
+    "GitHub.vscode-pull-request-github",
+    "ms-vscode-remote.remote-containers",
+    "nrwl.angular-console",
+    "WallabyJs.wallaby-vscode"
   ]
 }

.vscode/settings.json

@@ -0,0 +1,34 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.organizeImports": true
+  },
+  "editor.formatOnSave": true,
+  "editor.rulers": [80],
+  "[css]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[html]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[jsonc]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[md]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[scss]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[yaml]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}

README.md

@@ -129,3 +129,13 @@ export class HeroDetailComponent {
   constructor(private routerStore: RouterStore) {}
 }
 ```
+
+## Contribute
+
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://github.com/codespaces/new?hide_repo_select=true&ref=main&repo=427784584)
+
+[![Open in the github.dev web editor](https://img.shields.io/badge/github.dev-Open_in_web_editor-2f363d?logo=github&logoColor=black)](https://github.dev/ngworker/router-component-store)
+
+[![Open in StackBlitz Codeflow](https://developer.stackblitz.com/img/open_in_codeflow_small.svg)](https://pr.new/ngworker/router-component-store)
+
+[![Edit in StackBlitz Web Publisher](https://developer.stackblitz.com/img/edit_in_web_publisher_small.svg)](https://pr.new/ngworker/router-component-store/edit/main/README.md?view=editor)