TypeScript DevContainer Workspace

The Visual Studio Code Remote Containers extension lets you use a Docker container as a full-featured development environment. It allows you to open any folder inside (or mounted into) a container and take advantage of Visual Studio Code's full feature set.

A devcontainer.json file in your project tells VS Code how to access a development container with a well-defined tool and runtime stack. This container can be used to run an application or to separate tools, libraries, or runtimes needed for working with a codebase.

More information

Table of contents

• TypeScript DevContainer Workspace
  • Table of contents
• Dev-Container
• How to use
  • Environment
  • Libs
  • Essential
  • Others
• How to customize
• VSCode Extensions
  • TypeScript
  • Files
  • Global
  • Front
  • Theme
  • Docker

Dev-Container

How to use

In your project, create .devcontainer/devcontainer.json [?] :

{
  "name": "TypeScript",
  "image": "ealen/codespaces-typescript",

  "extensions": [
    // TypeScript
    "dbaeumer.vscode-eslint",
    "oouo-diogo-perdigao.docthis",
    // Files
    "bungcip.better-toml",
    "yzhang.markdown-all-in-one",
    // Global
    "editorconfig.editorconfig",
    "gruntfuggly.todo-tree",
    "eamodio.gitlens",
    // Front
    "naumovs.color-highlight",
    "octref.vetur",
    // Theme
    "vscode-icons-team.vscode-icons",
    // Docker
    "ms-azuretools.vscode-docker"
  ],

  "settings": {
    "eslint.alwaysShowStatus": true,
    "workbench.iconTheme": "vscode-icons",
    "editor.fontFamily": "Consolas, 'Courier New', monospace, hack, 'Hack Nerd Font Mono'",
    "terminal.integrated.fontFamily": "Consolas, 'Hack Nerd Font Mono'",
    "terminal.integrated.fontSize": 14
  },

  // Use 'forwardPorts' to make a list of ports inside the container available locally.
  // "forwardPorts": [],

  // Uncomment the next line to run commands after the container is created - for example installing curl.
  // "postCreateCommand": "npm ci",

  "mounts": [
    "source=/home/ealen/.ssh,target=/home/user/.ssh,type=bind,readonly",
    "source=/var/run/docker.sock,target=/var/run/docker.sock,type=bind" 
  ]
}

An example is available here.

/!\ You must install Nerd Font "Hack Nerd Font Mono" /!\

Environment

• ZSH & Oh-My-ZSH Zsh is a shell designed for interactive use, although it is also a powerful scripting language.
• Starship The minimal, blazing-fast, and infinitely customizable prompt for any shell!
• LSD Colorizes the ls output with color and icons.
• Vim Vim is a highly configurable text editor built to make creating and changing any kind of text very efficient.
• Docker & Docker-Compose Lets you run Docker within Docker.
• TheFuck The Fuck is a magnificent app, that corrects errors in previous console commands.

Libs

• NVM with Node LTS installed by default. NVM is a version manager for NodeJS.
• Python3 Python is a programming language that lets you work quickly and integrate systems more effectively.

Essential

• Git Git is a free and open source distributed version control system.
• Curl Command line tool for transferring data with URLs.
• Wget GNU Wget is a free software package for retrieving files using HTTP, HTTPS, FTP and FTPS.

Others

• ca-certificates Contains the certificate authorities shipped with Mozilla's browser to allow SSL-based applications to check for the authenticity of SSL connections.
• gnupg GnuPG is GNU's tool for secure communication and data storage.

How to customize

Create .devcontainer/Dockerfile and extend this codespace :

FROM ealen/codespaces-typescript

# Add your changes

Update your .devcontainer/decontainer.json to build your custom image :

{
  "name": "TypeScript",
  "build": {
    "context": ".",
    "dockerfile": "./Dockerfile"
  }
  ...
}

VSCode Extensions

TypeScript

• dbaeumer.vscode-eslint Integrates ESLint JavaScript into VS Code.
• oouo-diogo-perdigao.docthis Automatically generates detailed JSDoc comments in TypeScript and JavaScript files.

Files

• bungcip.better-toml Better TOML Language support
• yzhang.markdown-all-in-one All you need to write Markdown

Global

• editorconfig.editorconfig EditorConfig Support for Visual Studio Code
• gruntfuggly.todo-tree Show TODO, FIXME, etc. comment tags in a tree view
• eamodio.gitlens Supercharge the Git capabilities built into Visual Studio Code

Front

• naumovs.color-highlight Highlight web colors in your editor
• octref.vetur Vue tooling for VS Code

Theme

• vscode-icons-team.vscode-icons Icons for Visual Studio Code

Docker

• ms-azuretools.vscode-docker Makes it easy to create, manage, and debug containerized applications.