VSC TypeScript Auto Build on Save

As a programmer, we all want to make our development process as efficient as possible. One way to do this is by automating certain tasks. With Visual Studio Code and TypeScript, we can do just that.

What is TypeScript?

TypeScript is an open-source programming language developed and maintained by Microsoft. It is a superset of JavaScript that adds optional static typing, classes, and interfaces. TypeScript helps developers find and fix errors before they run their code, making it easier to build and maintain large-scale applications.

How to Use VSC TypeScript Auto Build on Save

Visual Studio Code (VSC) is a lightweight text editor that has become increasingly popular among developers. One of its many features is the ability to automatically build TypeScript files whenever they are saved.

To set this up, follow these steps:

1. Make sure you have the TypeScript compiler installed on your system. You can do this by running npm install -g typescript in your terminal.
2. Open your TypeScript project in Visual Studio Code.
3. Press Ctrl+Shift+P (Windows) or Cmd+Shift+P (Mac) to open the command palette.
4. Type Tasks: Configure Task Runner and select it from the list.
5. Select TypeScript - Watch Mode from the options presented.
6. This will create a new tasks.json file in your project's .vscode directory. Modify the file to look like this:

{
    "version": "2.0.0",
    "tasks": [
        {
            "taskName": "TypeScript build",
            "type": "shell",
            "command": "tsc",
            "args": [
                "-p",
                ".",
                "--watch"
            ],
            "problemMatcher": [
                "$tsc-watch"
            ],
            "group": {
                "kind": "build",
                "isDefault": true
            }
        }
    ]
}

7. Save the file.

Now, whenever you save a TypeScript file, VSC will automatically build your project in the background. You can see the output of the TypeScript compiler in the VSC terminal.

Conclusion

Using VSC TypeScript Auto Build on Save can save you a lot of time and effort in the development process. By automating the build process, you can focus on writing code and let VSC take care of the rest. Give it a try and see how it can improve your workflow.