Advanced Dev Container Configuration for TypeScript
How to improve the developer experience for better quality and productivity
--
Introduction
In previous posts here and here, I described how to create a dev container for TypeScript development with VS Code. In this article I am goint to revisit the topic and share the insights I have gained since the publications of those two posts.
The new insights are not invented by me. I don’t take credit for them. They are the result of my learning with and from other people, most of them people who I work with daily. All credit should go to those amazing people. They provide the fertile collaboration necessarily for faster and more profound learning.
In this article I will cover the following topics:
- Using specific versions to reduce variability
- Directory structure in a dev container for TypeScript
- Improve container port mapping
- Improve VS Code settings for working with containers
- Improve git client behavior when using trunk-based development
- A couple of VS Code settings for working with TypeScript
- Multi-stage Dockerfile for creating container images for deployment
While some of these may be trivial and you may already be using similar techniques, I hope as a reader of this article you still find a “gold nugget” or two that help you in your daily work as a developer.
You can find the newest version of the code for this article as a public template at https://github.com/RimuTec/dev-container-typescript. The repo may have a new version already.
Using Specific Versions to Reduce Variability
While it may not be such a big deal in dev containers, it still pays to be specific about which versions of a tool or library you want to use.
For example, a dev container always starts with a based image. In the case of a dev container for TypeScript, we use a base image with node.js pre-installed such as:
FROM node:18
