Installing a dependency when using the VSCode extension

Glitch VS Code Extension
1

I wanted to add a new package but did not find a Glitch command in vscode for that purpose. I instead used the Glitch console command in vscode and ran npm install <package> which shows an updated package.json in the console, but not in the vs code editor or the web editor.

2

Hey there,
You can just rather update the package.json, I mean add the package configuration to your dependencies field inside package.json.

For instance, you’d like to install endb to my project

  • Open your package.json file on VSCode.
  • Once you’ve done that, it [the dependencies field] would look like this:
"dependencies": {
  "endb": "^version"
}
  • Restart the project. The project will be restarted or if you have watch.json, throttle it.
  • And you’re ready to use the installed package within your project directory.

Thanks and if you’ve any issues, please mention!

1 Like
3

Hi chroventer, the inconvenient thing there is I have to go look-up the version number. In the web editor there is a dialog to help you find a package by name and it handles the version for you.

Also most READMEs for npm packages don’t really emphasize the version number, they are more on the lines of "Install our awesome package by running npm install awesome-package".

But I do understand the workaround you describe. It’s just not the workflow I really expect from a local experience in vscode. I probably would opt for the web editor for installing packages instead.

4

Hey there,

You do not have to look up for version number. There is a better way to install the latest version of the package:

"dependencies": {
  "endb": "*"
}

Note: Adding * installs the latest version from the NPM directory.
Sure, truly can be troublesome and cause inconvenience. As said earlier, you don’t need to specify the version, since adding * will install the latest version from the NPM directory, so the version of the package doesn’t have to be displayed inside README.

There is an external VSCode extension for installing packages from the NPM directory.
It instantly adds the desired package to the package.json file.
But again, it can be irksome.

Cheerio!

1 Like
5

Hi chroventer,

You’re definitely right that using the * as a version is possible but I don’t think that aligns well with what is considered best practices with npm version management. If many users on glitch were encouraged to use that approach I feel like it would make applications more brittle overall as they may unexpectedly adopt major version changes.

But that thought process also made me curious to see if glitch uses package-lock.json files and looking at a clean project it seems like glitch is actually using pnpm and has a shrinkwrap.yaml. So using Glitch:console for manipulating the package.json via the npm commandline probably doesn’t make sense.

I just tried using Glitch:console and using the pnpm cli to install a package but now trying to open the glitch in vscode results in error:

C:\Users\mraj.vscode-glitch\workspaces\Glitch: ink-drawer.code-workspace: Unexpected end of JSON input

The online editor still works but the package.json in the online editor does not reflect the new package, however from the online console using more package.json does reflect the change.

Seems like the easiest way to reliably add a new package is with the online add package interface.

6

Sure but it will really be maddening to open the web editor just to add a package to the project, that is.

I think, this error was throwed as a SyntaxError, due to format-related issues in package.json.
Forwarded the message to the Glitch Support Staff.

Happy Glitching!

1 Like
7

Oh I agree that it’s not ideal. Maybe the feature request is that there should be a Glitch: add package command that behaves similar to the web add package command.

8

npm install (or use another package manager) works, to update the file in the editor run the refresh command in the console.

1 Like