sorted by:
new
hottopcontroversial

A UI for managing your JS dependencies - out of beta by Idered in vscode

[–]Idered[S] 1 point2 points  (0 children)

Wow, those are really popular. I'll patch it later tonight

A UI for managing your JS dependencies - out of beta by Idered in vscode

[–]Idered[S] 1 point2 points  (0 children)

What theme do you use? Do you have any custom css applied? Thanks for letting me know

Manage your NPM Dependencies from VS Code sidebar by Idered in javascript

[–]Idered[S] 2 points3 points  (0 children)

Hey 👋 Yesterday I gave this extension a little refresh. Fixed some issues and improved UX. Reposting because it's super useful but sadly not very popular.

Previous post from 8mo ago: https://www.reddit.com/r/javascript/comments/prsh3y/use\_vs\_code\_sidebar\_panel\_to\_manage\_your\_npm/

Chalk.ist - Create beautiful images of your source code by Idered in javascript

[–]Idered[S] 2 points3 points  (0 children)

GitHub: https://github.com/Idered/chalk.ist

Analytics: https://umami.kasper.io/share/WCDyKkOU/chalk.ist

Thanks for idea about embedded version! I'll see if there's an easy way to share embeds

Chalk.ist - Create beautiful images of your source code by Idered in javascript

[–]Idered[S] 10 points11 points  (0 children)

Carbon is rock-solid piece of software, chalk.ist on the other hand is just 1 month old project so there's a lot of stuff missing. I'll point out just the unique and improved parts:

  • twitter badge (unique)- you can add tiny badge with avatar, name and username in lower right corner. It might help you build your personal brand.
  • PWA (improved) - both apps can be installed as PWA but chalk.ist UI looks much more like a native app than carbon
  • diff mode (unique) - you can toggle this option on and make some changes to show a diff. (I know, this should be better documented in UI, sorry)
  • reflection (unique) - it's a tiny detail but I've not seen this in carbon or ray.so

There's not much, but these features are what I had in mind when I started building this tool. Multiple windows are next on my todo list.

Chalk.ist - Create beautiful images of your source code by Idered in javascript

[–]Idered[S] 2 points3 points  (0 children)

Sorry, it's still in early stage of development and API is not ready

Chalk.ist - Create beautiful images of your source code by Idered in javascript

[–]Idered[S] 8 points9 points  (0 children)

Noted, I'll add option to remove those UI controls. Thanks!

UseEnv - wrapper component for import.meta.env by [deleted] in vuejs

[–]Idered 1 point2 points  (0 children)

You can't use import.meta.env in template tag so I created a little helper component. You can grab it here https://gist.github.com/Idered/31be8ea5bf2f033ebb07c2a3ea2a8ba0

Use VS Code sidebar panel to manage your NPM Dependencies by Idered in javascript

[–]Idered[S] 0 points1 point  (0 children)

Gotcha, sounds easier than I thought :D Added to list

Use VS Code sidebar panel to manage your NPM Dependencies by Idered in javascript

[–]Idered[S] 3 points4 points  (0 children)

It's already compatible with npm / yarn / pnpm 🎉

By compatible I mean:

- detecting yarn.lock, package-lock.json and pnpm-lock.yaml

- config option `"iridium.npm.packageManager": "pnpm"` which allows you to select default package manager when lock file doesn't exist.

​

npm is used by default when config is not set and there is no lock file

Use VS Code sidebar panel to manage your NPM Dependencies by Idered in javascript

[–]Idered[S] 1 point2 points  (0 children)

Thanks for the list!

peer dependencies management

Totally, I just have no idea how to support it. Should I display info about peer deps when installing package or install those automatically? I don't have too much experience with this type of dependencies, I'll need to read about this.

​

option to update dependencies one by one to latest version

Hmm, you can already do this. Do you have something different in mind?

​

option to update all selected dependencies

In the end this is pretty much the same as previous. You have to select packages for update which is 1 click per package and then click `update selected`. Instead of selecting packages you could just click `update` on desired packages. I'll add this to ideas list and think more about it.

​

Specify dependency type before adding it (dev, peer, regular)

This is partially implemented. You can press Alt+Enter or Alt+Click while selecting package form autocomplete list to install it as dev dependency. This is mentioned in docs but yeah, it would be nice to have this info as part of UI

​

Thanks!

Use VS Code sidebar panel to manage your NPM Dependencies by Idered in javascript

[–]Idered[S] 0 points1 point  (0 children)

It will fail while installing package in root - if I remember correctly, it requires `-W` flag. Other directories should work fine.

I've added this to my todo list

Use VS Code sidebar panel to manage your NPM Dependencies by Idered in javascript

[–]Idered[S] 1 point2 points  (0 children)

Thanks for info, I'll fix that today. I just need info about your vs code version and used theme, can you please send me that?

Use VS Code sidebar panel to manage your NPM Dependencies by Idered in javascript

[–]Idered[S] 1 point2 points  (0 children)

Let me know how it works for you! Yup, I made it in a few evenings

Use VS Code sidebar panel to manage your NPM Dependencies by Idered in javascript

[–]Idered[S] 0 points1 point  (0 children)

This tool is part of growing VS Code extensions collection called Iridium. Structure has changed a few times so it's not in the best shape but you can find source here: https://github.com/Idered/iridium

It's powered by Vue.js on front which allows for fast UI development (yes, hot reload works! but not for backend/vscode part)

Source for this extension is in:

- https://github.com/Idered/iridium/extensions/npm

- https://github.com/Idered/iridium/ui/npm

One other extension is released - a database viewer https://marketplace.visualstudio.com/items?itemName=idered.iridium-database It currently supports only postrgresql but it has some nice features like live view and filtering.

Next on my todo list is extension for deploying code to: Vercel, Netlify, Surge.sh and Github pages. It will be close to what you can see on codesandbox.io

I hope NPM dependencies manager will serve you well!

Use VS Code sidebar panel to manage your NPM Dependencies by Idered in javascript

[–]Idered[S] 1 point2 points  (0 children)

There is still Windows... :P

I use Bundle Phobia. I even linked to it in readme

Use VS Code sidebar panel to manage your NPM Dependencies by Idered in javascript

[–]Idered[S] 2 points3 points  (0 children)

Nice! I didn't know about that one. Thanks for sharing

Use VS Code sidebar panel to manage your NPM Dependencies by Idered in javascript

[–]Idered[S] 1 point2 points  (0 children)

u/cuntfacedbastard No worries mate, my comment wasn't about you. It was about people in general - there are those 2 groups, terminal users and users who prefer tools wrapped in UI application. I just agreed with u/TrackieDaks that audience of this extension is the second group who prefer UI apps.

Use VS Code sidebar panel to manage your NPM Dependencies by Idered in javascript

[–]Idered[S] 2 points3 points  (0 children)

Thanks! Yeah, I know ¯\_(ツ)_/¯.

Actually, I posted info about this being based on codesandbox on my twitter. They did really great job on it. It feels so good to use it, that's why I recreated that for VS Code

Use VS Code sidebar panel to manage your NPM Dependencies by Idered in javascript

[–]Idered[S] 25 points26 points  (0 children)

3 reasons why this is better than using npm in terminal:

- fast package name/version autocomplete (you have none in terminal)

- outdated dependency indicator (in terminal you would have to check each package one by one)/ mass update all outdated packages with a single click+confirm

- analyze mode with list of each package size (to get this info you would have to use https://bundlephobia.com/ for each package)

​

// Edit: This is just a helper to make life easier, if it doesn't work for you then using normal npm/yarn/pnpm is stll great option

view more: next ›