How to install a Code snippet extension as dev dependency in package.json

Question

Is it possible to install React Code Snippet extension as a dev dependency inside package.json?

I want my other team-mates to have this when they clone my project and execute: npm install.

Otherwise, everyone has to install manually from VS-Code Marketplace extension manager.

Answer 1

There's a couple ways you could go about this. If you want the installation script to be in your package.json, then you would have to add it to the script block (Option 1). devDependencies only installs packages into node_modules and will not have any ability to install IDE extensions.

I would recommend Option 2 for a slightly more automated approach that only requires the user to click Install on the toast prompt.

---

Option 1 : Install by running a npm script:

In your package.json file, find your scripts block and add the ext line from below to the end of it.

"scripts": {
    "<your-other-scripts>": "...",
    "ext": "code --install-extension dsznajder.es7-react-js-snippets"
},

All they would have to do is execute npm run ext in their terminal and the extension will install or update on their IDE.

Not that this still requires the user to run a command manually that is not a standard command.

---

Option 2 : Recommended Extension:

If you don't already have a .vscode directory in your project, create one and inside of it create an extensions.json file. Inside that file, you can list any extensions that your project recommends to the developer working on it. Add the following snippet and save and reload:

{
  "recommendations": ["dsznajder.es7-react-js-snippets"]
}

Now, when you navigate to the Extensions Marketplace, that extension and any others you add to the array in that file will appear in the recommended extensions section.

They will also be prompted when opening the project if they want to install the extension to their IDE if it is not already installed.

Hope you find this helpful!