/codespaces-typescript

The Visual Studio Code Remote Containers for TypeScript projects

Primary LanguageDockerfile

TypeScript DevContainer Workspace

GitHub stars Docker Image Version (latest semver) Docker Pulls

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

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", // You can also use ZX script or MAKE command

  "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

Based on Ubuntu 22.04 __

  • 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.

CLI

  • Vim Vim is a highly configurable text editor built to make creating and changing any kind of text very efficient.
  • TheFuck The Fuck is a magnificent app, that corrects errors in previous console commands.
  • JQ jq is a lightweight and flexible command-line JSON processor.
  • gi CLI to generate .gitignore or .gitignore_global files
  • ZX Bash is great, but when it comes to writing scripts, people usually choose a more convenient programming language.

Libs

  • Docker & Docker-Compose Lets you run Docker within Docker.
  • 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

Files

Global

Front

Theme

Docker