Managing Dependencies Locally in VS Code

When working on the product frontend using Visual Studio Code (VS Code), you can automate npm tasks using task definitions. This guide will walk you through setting up and using VS Code tasks for managing your project dependencies.

Note: This was first conducted here. (opens in a new tab)

Setting Up the Task Configuration

Create a .vscode folder:
- In the root of your project, create a new folder named .vscode.
- This folder will contain VS Code-specific settings and configurations.
Create a tasks.json file:
- Inside the .vscode folder, create a new file named tasks.json.
- This file will define your custom tasks for VS Code.

Your project structure should look like this:

project-root/
└── .vscode/
    └── tasks.json

Configuring the `tasks.json` File

Here's a comprehensive tasks.json file that defines an npm install task:

{
    "version": "2.0.0",
    "tasks": [
        {
            "type": "npm",
            "script": "install",
            "path": "frontend-react-js",
            "group": "build",
            "problemMatcher": [],
            "label": "npm: install - frontend-react-js",
            "detail": "install dependencies from package",
            "presentation": {
                "reveal": "always",
                "group": "develop",
                "panel": "new"
            },
            "runOptions": {
                "runOn": "folderOpen"
            }
        }
    ]
}

Let's break down the key components of this configuration:

version: Specifies the version of the task runner. "2.0.0" is the current version.
tasks: An array containing task definitions.
type: Specifies the task type. In this case, it's an "npm" task.
script: The npm script to run, in this case, "install".
path: The directory where the task should be executed. Here, it's set to "frontend-react-js".
group: Defines how the task is categorized. "build" is used for tasks related to compiling and building the project.
label: A human-readable name for the task.
detail: A description of what the task does.
presentation: Configures how the task output is presented in VS Code.
runOptions: Specifies when the task should be run. In this case, it's set to run when the folder is opened.

Running the Task

You can run the defined task in several ways:

Command Palette:
- Press Ctrl+Shift+P (or Cmd+Shift+P on macOS) to open the Command Palette.
- Type "Tasks: Run Task" and select it.
- Choose "npm: install - frontend-react-js" from the list of available tasks.
Keyboard Shortcut:
- You can set up a custom keyboard shortcut for this task in VS Code's keybindings settings.
Automatic Execution:
- With the "runOn": "folderOpen" option, this task will automatically run when you open the project folder in VS Code.

Notes for Different Environments

Local Development: The configuration provided in this guide is intended for local development environments.
Gitpod: If you're using Gitpod, you can achieve similar automation using a .gitpod.yml file instead of .vscode/tasks.json.
Container Development: For container-specific settings, refer to the .devcontainer folder and its README.md file.

Additional Task Configurations

You can add more tasks to the tasks.json file for other common operations, such as:

Starting the development server
Running tests
Building the project for production

Example of adding a task to start the development server:

{
    "type": "npm",
    "script": "start",
    "path": "frontend-react-js",
    "problemMatcher": [],
    "label": "npm: start - frontend-react-js",
    "detail": "Start the development server"
}

Add this task to the tasks array in your tasks.json file.

Developer References

For more information on VS Code tasks and related topics, consult these resources:

By setting up these tasks, you can streamline your development workflow and ensure consistent dependency management across your team.

Yet Another Gitpod Creative Compilation