Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What is going on with this article?
@nakamuloud

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

More than 1 year has passed since last update.

はじめに

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"
    ]
}

1
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
nakamuloud
プアーエンジニア

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
1
Help us understand the problem. What is going on with this article?