Use Brace Expansion to Maximize Efficiency When Installing Packages from NPM

Instructor: [00:01] Here, I just have a sample React application. If we look inside our package.json, we can see that we have a few starter libraries, as well as Prettier in our dev dependencies. We're off to a great start, but let's say I want to Redux-Saga for asynchronous activity, as well as any other packages.

[00:33] In addition to Saga, I'm going to install Redux-DSM. This is a neat little state machine package for Redux. To cap this off, I'm going to install the Redux DevTools extension, as well as the Redux Logger package, because why not have both? Running this would work fine, but there's an easier, or rather a more concise way, to do this.

[01:14] Since both of our packages start with this Redux -, I can write this, and then open up some brackets. Now, inside these brackets, I'm going to pass in Saga and DSM. I'm going to do the same for our Devtools extension and the logger package.

[01:49] This may seem sort of trivial. Let's check out another example where we're installing ESLint plugins and configs.

[01:58] Here I'm going to install the ESLint config here being B, the config Prettier, and then a gang of ESLint plugins. Now, as you'll notice, I have to write out the title of each plugin in its entirety.

[02:16] Only when I've written out every plugin I need is when I'm finished. Granted I don't make a mistake because then I might have to sift through this long line of plugins to figure out where it's occurring. N

[02:32] Now all that time I took resulted in nothing. There's no packages that have gotten installed. I'm back to zero.

[02:41] Now that we've seen the long-form, let's see how we could speed this up a little bit. Again, we're just going to have ESLint this time. The thing we'll have inside of our first pair of brackets is config. Config will then lead to another nested bracket, which we'll use to name all of the config packages that we want installed.

[03:06] Then filing our config packages, we'll use a comma to specify all of our ESLint plugins. Again, we're nesting another bracket inside here. Then we're just specifying the React, React hooks plugin, as well as HTML import, JSX a11y, and last but not least, Prettier.

[03:33] Before I run this, just to recap. It's going to pick up that ESLint parenthesis, and then it's going to start installing ESLint config Prettier, config BnB, and then filing this.

[03:47] It's going to do the same for our plugins, which as you see, we've passed a whole bunch of them there. Finally, we'll just add the d flag to specify these as the dev dependencies, and we're off.

[04:02] As you can see, they've installed just fine for us, and we've really got to cut done on the amount of code that we've had to write, or amount of text rather, to get these packages going.