VScodeのremote developmentでTypescriptの開発を1秒で始められるコンテナを作ったよ

はじめに

1秒はうそです｡
Microsoftが提供しているnodeJSのremote developmentテンプレートをもとにTypescript版を作成した｡

開発環境

• ESlint
• Prettier
• VSCode:インデントが色つくやつ（indent-rainbow）
• インデントは4幅ハードタブ

使い方

以下のコマンドでリポジトリからクローンして､別のリポジトリに初期化します｡

git clone https://github.com/nakamuloud/vscode-remote-ts.git
mv vscode-remote-ts my-new-app
cd my-new-app
rm .git
git init

devcontainer.jsonについて

情報が全然なかったので軽くまとめます

{
    "name": "Typescript",
    "dockerFile": "Dockerfile",
    "service": "ts-dev",
    // Use 'appPort' to create a container with published ports. If the port isn't working, be sure
    // your server accepts connections from all interfaces (0.0.0.0 or '*'), not just localhost.
    "appPort": [
        3000
    ],
    // Comment out the next line to run as root instead.
    "remoteUser": "node",
    "containerUser": "node",
    // Use 'settings' to set *default* container specific settings.json values on container create. 
    // You can edit these settings after create using File > Preferences > Settings > Remote.
    //VSCodeの設定はここにまとめる｡remote development上でVSCodeの設定をJSONで弄ろうとするとここを編集しろと言われる
    "settings": {
        "terminal.integrated.shell.linux": "/bin/sh",
        "editor.codeActionsOnSave": {
            "source.fixAll.eslint": true
        },
        "editor.renderWhitespace": "all",
        "editor.insertSpaces": false,
        "editor.renderLineHighlight": "all",
        "editor.formatOnSave": true
    },
    // Add the IDs of extensions you want installed when the container is created in the array below.
    //remote developmentをビルドするときに､インストールされる拡張機能
    "extensions": [
        "dbaeumer.vscode-eslint",
        "VisualStudioExptTeam.vscodeintellicode",
        "esbenp.prettier-vscode",
        "oderwat.indent-rainbow"
    ]
}