devcontainer.json

{
  "name": "Example: TS",
  "image": "mcr.microsoft.com/devcontainers/typescript-node:16",
  "customizations": {
    "vscode": {
      "settings": {
        "workbench.colorTheme": "Default Dark+",
        "editor.fontSize": 14,
        "workbench.iconTheme": "vscode-icons",
        "workbench.startupEditor": "README.md",
        "workbench.editor.enablePreview": false,
        "workbench.editor.enablePreviewFromQuickOpen": false,
        "workbench.editor.enablePreviewFromCodeNavigation": false,
        "workbench.editor.showIcons": false,
        "dev.containers.copyGitConfig": true,
        "terminal.integrated.shell.linux": "/usr/bin/zsh",
        "terminal.integrated.defaultProfile.linux": "zsh",
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "prettier.singleQuote": true,
        "prettier.trailingComma": "all",
        "prettier.printWidth": 120,
        "prettier.tabWidth": 2,
        "prettier.semi": false,
        "prettier.arrowParens": "avoid",
        "prettier.bracketSpacing": true,
        "prettier.endOfLine": "lf",
        "prettier.proseWrap": "preserve",
        "prettier.quoteProps": "as-needed",
        "prettier.requireConfig": false,
        "prettier.useTabs": false,
        "prettier.vueIndentScriptAndStyle": false,
        "prettier.htmlWhitespaceSensitivity": "css",
        "prettier.insertPragma": false,
        "prettier.rangeStart": 0,
        "prettier.parser": "typescript",
        "prettier.disableLanguages": ["markdown"],
        "eslint.validate": [
          "javascript",
          "typescript"
        ],
        "eslint.autoFixOnSave": true,
        "eslint.alwaysShowStatus": true,
        "eslint.options": {
          "extensions": [".js", ".ts"]
        },
        "gitlens.advanced.messages": {
          "suppressShowKeyBindingsNotice": true
        },
        "gitlens.historyExplorer.enabled": true,
        "gitlens.views.repositories.files.layout": "tree",
        "gitlens.views.repositories.files.compact": true,
        "git-graph.advanced.messages": {
          "suppressShowKeyBindingsNotice": true
        },
        "[javascript]": {
          "editor.defaultFormatter": "esbenp.prettier-vscode"
        }
      },
      "extensions": [
        "streetsidesoftware.code-spell-checker",
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode",
        "ms-vscode.vscode-typescript-tslint-plugin",
        "ms-vscode.vscode-typescript-next",
        "eamodio.gitlens",
        "mhutchie.git-graph",
        "donjayamanne.githistory",
        "waderyan.gitblame"
      ]
    }
  },
  "features": {
    "ghcr.io/devcontainers/features/common-utils:2": {
      "installZsh": true,
      "configureZshAsDefaultShell": true,
      "installOhMyZsh": true,
      "upgradePackages": true
    }
  },
  "remoteUser": "node",
  "containerUser": "node",
  "containerEnv": {
    "TZ": "Europe/Copenhagen"
  },
  "forwardPorts": [3000],
  "portsAttributes": {
    "3000": {
      "label": "React App"
    }
  },
  "onCreateCommand": "npm install"
}