When we do development, we often use a combination of Visual Studio Code (VSCode), Node.js, and NPM. Let’s see how to configure VSCode to work with NPM Scripts.
In the software development process, it is common to have a series of scripts defined in the package.json file of our project. These scripts allow us to automate tasks such as compilation, running tests, and other development-related actions.
We can launch these scripts from the command line, or configure Visual Studio Code to launch them from the graphical interface. Let’s see how we can start these scripts from Visual Studio Code.
Execute from the VSCode terminal
The most obvious way to start a script command defined in the package.json file is to use the terminal in VS Code. To do this, you can go to the “Terminal” tab and select “New Terminal” (CTRL+Shift+ñ).
The terminal will open in the working directory of your project. Now, simply invoke the script using the command to run the desired script.
npm run script_nameNPM Command Explorer
There is a much easier option to launch NPM scripts from the VSCode user interface. An option that, I don’t know why, in the latest versions of VSCode comes disabled by default.
To enable this option, go to “File” -> “Preferences” -> “Settings” (CTRL+,) and enable the npm.enableScriptExplorer option.
Once enabled, VS Code will automatically look for the package.json file in your project and extract all the commands defined in the scripts section.
By enabling the aforementioned option, we can add a new sidebar called “NPM Scripts”. Which again, I don’t know why it doesn’t come activated by default.
In this view, all NPM script commands will be listed and you can start them simply by clicking on the small arrow next to each one.
When you click on a command, a new terminal will open and the corresponding script will be executed.
VS Code will automatically take care of running the selected script, saving us the trouble of manually opening a terminal and writing the command.
That’s how easy it is to launch the NPN scripts from the package.json file in VS Code, comfortably and without the need to type a single key in the terminal.