VS Code Can Do That!

Rate this content

How do you debug so easily in VS Code? How do codespaces work? What are those key combinations to edit code so quickly? What extensions are the ones I shouldn't code without? Get ready to hit the ground running in this fast-paced, demo-heavy talk that takes you through some of the best and most effective tips and tricks in VS Code. Learn how to setup your environment and customize it the way you like it. You'll walk out with several tips on how to be more efficient with one of the hottest tools on the Web today!

28 min
11 Jun, 2021

Video Summary and Transcription

The Talk covers various tips and features of using VS Code, including the command palette, Zen mode, external terminals, and debugging. It also highlights advanced editing and refactoring features, Git integration, and the use of dev containers. The speaker demonstrates how to set up a dev container for a Python app, run code in a container, and create and configure dev containers. The benefits of using dev containers are also discussed, such as eliminating manual configuration, handling dependencies, and facilitating team-based development.

Available in Español

1. The Power of Knowing Which Button to Press

Short description:

There is a legend about Thomas Edison in New York City. When thousands of homes were without power, he knew exactly which button to press to restore it. The moral of the story is that efficiency comes from knowing which button to press, not just pressing buttons in VS Code.

Thank you all for coming. I'd like to start you out with a little bit of a story before we get into VS Code specifically. There is this legend that a long time ago, there was a power of failure in New York City. With this came tens of thousands of homes without power. What did they do? They called Thomas Edison to come down and see what you could do to help us out with this. Thomas Edison walks in and looks at the situation and says, You know, I think I know what to do. He goes ahead and looks at the wall and presses a button, and all the power is turned on everywhere inside the entire city. It's great. We get the power back. They say thank you so much for doing this. He says no problem. And he writes up a bill on his invoice there and hands it to them. And it's for $10,000. Which is a lot of money at the time. So they're like, we're grateful and all, but all you do is press a button. And he goes, I got you, you're right. Let me revise that. They're like, thank you so much. So what he does, he revises the bill to be a dollar for pressing the button. And then $9,999 for knowing which button to press. And that's really the moral of the story here. It's not about pressing a button in VS Code. It's about knowing which button to press to be efficient.

2. Tips for Using VS Code

Short description:

VS Code has a command palette that can be accessed using F1 or Command-Shift-P. The Insiders Build provides daily drops of updated features and is quite stable. You can find files quickly by name using the command palette or by navigating through the tree in the Explorer. Layout customization allows you to remove distractions.

And VS Code my favorite button is F1, which works across all the products on Mac, and Windows, and Linux. Or Command-Shift-P on a Mac today is what I'll be using. And that brings up the command palette inside of VS Code because VS Code can do that.

And my name is John Papa and today we're going to show you a whole series of tips that you can use today with VS Code and some things that maybe you didn't know that you could do working tomorrow. So let's start right there off with the Insiders Build. Now there's a stable build which sounds like, hey, it's stable, right? Got to use it. And that comes out once a month. But there's an Insiders Build which gives you practically daily drops of different code. So in that Insiders Build, you can just click here to download the Stableware Insiders for your platform. You get updated features all the time. I've been using this from day one. I never used the stable build. I only used the Insiders and it is actually quite stable. So I'd call it a stable insiders build and I recommend you give it a shot.

Now everybody needs to find files. One of the nice things in VS Code is that you can find files through the tree where you can look in the Explorer using your mouse and trackpad. Or you can use the command palette. Remember that keystroke I said you need to remember, if you go to command shift P, you'll find all these commands. Well, there's also a command P. That's a menu option to find a file quickly. So let's say you wanted to find a router file. You can see I typed in router up there and it does partial file name matching. You can use the arrow keys to go up and down as well. So it's a great way for you to find files quickly by name. It also pass in the pathway to that name. For example, if you have a lot of files in your project called index.html or index.js, you can type that in. You might find a lot of them. But if you put in the pathway to it for the folders, it'll actually narrow it down for you.

Another thing I really like about this is layout customization. Here, you're noticing in this video that I got rid of all the distractions.

3. Zen Mode, External Terminals, and Debugging

Short description:

Zen mode in VS Code removes distractions and centers the code. You can have multiple files open in Zen mode and still access the site explorer. External terminals can be opened in the current folder using Command-Shift-C. The command palette (Command-Shift-P) is a handy tool for finding menu options and terminal commands. VS Code has its own integrated terminal and supports multiple platforms for debugging.

I got rid of the title bar, the status bar, everything. I'm just looking at my code. This is called Zen mode. So if you go to Command-Shift-P and type in Zen mode, it'll automatically get rid of all that, center the code for you.

Then I also put in multiple panes here. So I've got two files open at the same time. It puts them both into Zen mode. And if I want to, I can still get to things like the site explorer to look up other files or do other things if I need to. So there's a great way to get to all that.

And then if you want to get out of Zen mode, you do Command-Shift-P. Then you can toggle off the Zen mode. Another thing I really like is external terminals. So sometimes you want to use ITerm or the baked-in terminal in your operating system. If you're inside of your VS Code application, what you can do is automatically open a terminal in the current folder. So you do that with Command-Shift-C, and that'll automatically open a terminal, whatever your default is, in the folder that you happen to be working in. And don't worry if you forget these commands and these keystrokes. Just remember, Command-Shift-P or F1, that is the one keystroke that can find you all the menu options. So you just type in Command-Shift-P, type in terminal, and you'll see all the commands for this.

Now VS Code comes with its own integrated terminal as well. And you can open that with this keystroke, you can choose your shell like Bash or Zush or PowerShell. So you can do what you want there. And then you can also stack your terminals where you can have multiple terminals open at the same time. Which is incredibly useful. We'll see that a little later in some of the demos. Debugging works out of the box for multiple platforms. Here you can see I'm doing no debugging. So I can start the debugger with the F5 key. Or I can go over and press the button, the green button. I can set break points throughout as you're seeing me here. Run right to another breakpoint.

4. Debugging and Multi-Cursor in VS Code

Short description:

I can set breakpoints and step over code in VS Code for asynchronous commands. VS Code supports debugging front-end JavaScript frameworks like CELT, React, Vue, and Angular. You can debug in the browser or within VS Code using the Edge and Chrome debugger extensions. Set breakpoints and debug Vue components in Chrome. Use multi-cursor to edit multiple lines of code simultaneously.

I can then step over. And then I'm gonna right-click and set a column breakpoint or an inline breakpoint over on the JSON. So right there, I can then stop on it and spec the value. This is great for async await or other kinds of commands that are asynchronous.

Now front-end JavaScript debugging. I love the front end, CELT, and React, and Vue, and Angular, all these. Now, what's great is you can actually debug those right inside of VS Code. So we can debug them in a browser or do it right in the same tool we're in. Now there's an Edge and there's a Chrome debugger extension, two of them. One for each browser. If you load those extensions up, you can configure them, launch your debugger, and then set breakpoints. And we can see that we're setting on the breakpoint over there.

Now we're setting our environment up. We're going to say, go to Chrome for the Chrome debugger. I'm automatically filling in the Chrome setup for debugging Vue. And then I'm going to go set a breakpoint inside my Vue component. I'll start my application up. And then here you can see that my application's running. I press delete, and then the breakpoint is hit. Pretty cool.

Now, one of my favorite features is the multi-cursor. Command-D will do this for you. So notice here, what I did is I selected three lines of code out of the package.json And then I have three cursors going on. I searched for something similar across all three. And then I'm putting those together and sticking npm install in front of them. Let's watch this again. So what I did is I wanted to get out an npm install command using these three lines of code. I copied them to a blank file. I then looked for everything that's had quote, colon, space, quote. And that cursor then found those.

5. Advanced Editing and Refactoring Features

Short description:

Multi-cursor is super powerful for editing files. Snippets help with different libraries and syntax. Quick fixes like importing and syntax correction are available with the command dot. Basic refactoring, including find references and renaming symbols, is built in.

And then I can delete, backspace. And then I can also add a new space in there. So I can run them. And it's really great for editing files, when you need to find a lot of different things all across the file. So that multi-cursor is super powerful.

Snippets are another great feature. There's different libraries out there, like Angular, and React, and Svelte. And you also have things like Docker. We can use snippets, so we don't have to remember all the syntax of all these different things. So here we're seeing that I don't remember the Dockerfile syntax. So I've got a Docker snippet that I set up for myself, which will automatically create a Docker container setup and a Dockerfile for my node in Angular application.

And there's a whole bunch of quick fixes, too. Anywhere in VS Code that you see a light bulb, you can automatically click on it with your mouse or trackpad. Or you can hit command dot. And what that command dot will do is it'll give you a hint at what would you like to change about this. So for example, down here, the CatchError function, it didn't know what it was. So we can click on it or hit command dot, and it's going to automatically import CatchError from the RxJS library. Because it happened to see, yeah, you're using RxJS, but you didn't import that thing over here. So let me help you out. There's a lot of cool stuff that the command dot will do. It'll correct syntax. It'll also do ESLint fixes, like maybe changing a let to a const if you want to do that, like a few other kinds of suggestions as well.

Basic refactoring is built in. So we can do find references. Here I'm finding all the references to this shared module class in my application, and I can also rename the symbol. Maybe I want to rename that to my shared module, and I want to go just do a search and replace. So I can change it here. Then it automatically opened up all the places that changed. Now I want to do find references again. You can see all those places did indeed change.

6. Git Changes, Peeking, and Dev Containers

Short description:

You can check the Git changes log and use the peek feature to navigate through files. Git integration is built into vscode, and there are recommended extensions for pull requests and code reviews. The Peacock extension allows you to color-code multiple instances of vscode for easier recognition. VS Code also supports dev containers, which can help manage project dependencies.

You can also check my Git changes log for it. You're also getting a look at the peek feature, which allows you to peek into other files that are using that different functionality. And if I double-clicked in there, it would actually go to that file.

Speaking of Git, we talked about the Git changes. Git integration is baked right into vscode, and there's a couple of really good extensions I definitely recommend you getting, and I'll show you some of those in a demo in a moment. Here we're seeing the pull request extension, and what you can do is we can clone out of the box, no extension needed, check out, commit, and push. All that's baked into vscode, but you can also pull a pull request down and do reviews of code and then merge them or add comments, etc.

One extension I mentioned earlier is called Peacock. It's one that I've written. So vscode is a really cool feature because you can open up like multiple vscodes. Here you can see I've got six instances of vscode open. Have you ever had that many open before and you're trying to figure out which one is which? Whenever you have multiple windows of a tool open, it's great, but then sometimes you get confused. For example, I might be working on multiple projects. They could all be interrelated, maybe a backend or frontend, maybe just a test scenario too or a harness. So all those could be open and then very tiny at the top in the title bar, it tells you what the name of that is. That's not quick enough for me to recognize which one is which. So instead, you can use Peacock and then color each individual instance in whatever color you want. You can color different aspects of the window as well. So it makes it easy at a glance to tell which one you're working in. I happen to like to color these based upon what I'm working in for. Svelte, I use orange, for Angular I use red, for React I use blue.

Now, we just saw a lot of great ways that we can make our lives easier with VS Code, but one of the biggest problems most of us have is when we go to a project and we need all the dependencies for that project. Different frameworks and different setups like Node or Python or .NET and all sorts of dependencies. This is where it can become difficult and where container-based solutions can really help us. We can call these dev containers and VS Code supports it. So what does this mean? Well, first there's three things that you need to get going. One is VS Code itself. You can get VS Code right from this link right here. Second, you're going to want Docker for desktops. You can get that from this link so you can run the containers.

7. Using the Remote Containers Extension in VS Code

Short description:

VS Code integrates with the remote containers extension, which provides a full VS Code environment with all the necessary extensions, debugging tools, and dependencies ready to go. No need to spend hours installing and matching versions. In this demo, we'll clone and run a Python app using VS Code and the remote container extension.

VS Code will just integrate with that for you. Now, we also need this extension which will work in VS Code. It's called the remote containers extension and we're going to see that a lot in some demos coming up. So let's set some scenarios up here.

You're starting a new project and what are the first things that you think about, especially when you're getting into a project that maybe you didn't craft? What if you could start any new project and you want your development environment to just work for you? You want to give it to somebody and say, all right, everything you need is already ready to go. Don't have to worry about the version of Node or Go or Python or whatever you're using. You can instantly get the tools that you need and not just a platform but the extensions that you need in VS Code and any other setup that you have to do. What if you could share all this so other people can just clone your repo from GitHub and it just works instantly? That's kind of the idea behind Dev Containers. You get a full VS Code environment including your extensions, debugging, completions, all your dependencies ready to go out of the box. Full VS Code, right? That's what we really want. We don't have to worry about, oh, now I've got to spend the next two hours installing everything I need and making sure the versions match up. So we're going to grab this extension called Remote Containers and we're going to use that in VS Code to walk through a couple scenarios.

So the first demo, we'll do three of these, is we want to clone and run a Python app. You've been given this Python app and now you need to make it work. So let's go ahead and dive into some code. So here I am inside of VS Code and you can see I have nothing open at this point. What we're going to do is make sure we've got Docker on our machines and I can click up here first to see that I do indeed have Docker installed. It's right there. If you don't you can go click on that link to load it. I've got VS Code because we're looking at it and if I go to the extensions I can come over here and type in remote. You can see there's a remote container extension already installed right up top. If it wasn't, I would just click on the install button. So my dependencies are there. Now I've got this repo that I've already created up in GitHub and I want to go clone it. So I'm going to use git clone just to go get my repo. I can tell it to clone from GitHub and it's going to go ahead and search for JohnPapa slash and this one's called mslearnpythonproducts So now it's going to ask me where to put it. We'll put it in my git folder. Now it's cloning it and it wants to know if I want to open it in this window. Well I'd like to do that, please. So here we go.

8. Setting Up a Dev Container for Python App

Short description:

I've got my Python app. I want to make sure I set this using Peacock to identify my window. I can see that it's now using pink. I don't have Python installed, so I can use a dev container. I add a dev container through the command palette and choose Python 3.9. It's already creating a container for us. We can open up this project in the dev container, and there's a docker file that sets up everything for us to have Python to work out of the box.

I've got my Python app. And here we can see my app.py file. And maybe I don't know a lot about Python so the next thing I want to do is figure out there's probably dependencies and things I need to load and I've got to get this set up.

Well, before I get there, first I want to make sure that I set this using Peacock so I can identify my window. I mentioned the Peacock extension which I installed through the extensions and I could change this to a favorite color and I'll just use called something different. It's like a shade of pink, maybe right here. So that's me running in my app and I can see that it's now using pink.

Now I don't have Python installed so what I can do is I can use a dev container. So I'm gonna hit my favorite command. Remember that button? F1 or Command Shift P. Right here to bring up my command palette. In the command palette, what I want to do is add a dev container just like this. Now when I add this it's gonna add a file to set up my dev container. Now to tell it what I want to use. Notice it sees that I'm using Python so it's giving me some hints. I'm gonna choose Python 3. And I'm gonna choose Python 3.9 and then it's asking do you want to install node with that as well? Sure, why not? I like node. So now down below it's telling us in a window that it's already creating a container for us. Now we've gone to we can open up this project in that dev container. Now let's do that right now. Do reopen in container. Now notice it's flashing and then it's telling us it's starting the container. And boom! Now there's also a message saying that the container changed. You might need to build the container to apply things. So first before we do that let's go look at this dev container folder. It added it to our project. And then here we have a docker file. Now we don't have to worry about the docker file too much. It's basically setting up everything for us to have python to work out of the box. Now we can modify this if we want to.

9. Setting Up Dev Container and Trying It Out

Short description:

We set up the dev container using the dev container json file. It automatically installs node and sets up the VS Code settings for Python. We uncomment the post create command to install the requirements. After rebuilding the container, we can try it out by setting a breakpoint in app.py. The dev container is indicated in the bottom left of the screen, and we can change its color using Peacock.

We also see this dev container json file. Now this is where we set up the dev container. This automatically says go use the docker file. Install node. It's got all these settings. These are VS Code settings. It's going to automatically set up for us to use python. And it's installing these two python extensions which is super helpful.

Now notice that we have this command down here called a post create. It's commented out. This is what python uses to automatically install any requirements. And we do indeed have requirements in our requirements text file here. So I'm going to uncomment that out.

Now, I'm going to go ahead and choose to rebuild my container. So I go back to my command palette. I can choose rebuild container, just like that. And now it's going to reopen the container up. It's going to run through that, set up the container. It's also going to run that python requirement script for me, and we can see the output at the bottom of the screen. Once it's done, we can close the terminal.

It says, now, if we want to try this out, we can go into app pi right here. And let's go ahead and set a breakpoint on line 12. Now notice for a moment, we'll take a quick break here that I had set up my environment to be pink. Well, it's not pink anymore. That's because I'm in the remote container. If we look in the bottom left of the screen, right over there, we can see that it says that we've got this dev container called Python 3. So yours should look like that too. But we want to see something a little more visible to notice we're in this container. So I'm going to open up peacock again. I'm going to change the color for this to be just yellow.

10. Running Code in a Container

Short description:

We can have different VS code instances with different colors, depending on whether it's running inside a container or locally. With Peacock set up, we can easily identify the instance. By using the dev container, Python automatically installs the requirements. We can debug and run our code inside the container, and it's running on port 5000. We can hover over data to see the returned data. After disconnecting from the debugger, we can reopen the folder locally to run the Python project on our machine.

Why not? So I'm in the container. It's going to be yellow. When I'm running locally on my computer, it's going to be pink. So peacock's nice like that. We not only have different VS code instances, we can have the same instance when it's inside a container, be a different color than when it's not when it's running locally.

Okay, so we got Peacock set up. Now I set a breakpoint here. Now notice that how many underscore problems of flask. That's because Python installed the requirements in this file for me. Using the dev container. We'll go back to our app pi. And now we can click on the debug. We can choose run and debug. If we wanted to we can just hit f5 like this. It'll kick into it and say, hey, would you like to use the current file that's open? Yes. And now it's running that file. And it says, hey, it's running on port 5000 inside the container. It's going to then forward that port so we can open it in our browser, which I will pull up into a window here. And we'll make it into the upper left-hand corner. And notice it's not loading yet because it hit our breakpoint. So now I can hover over data right there. And we should see all the data that's coming back. I'll let it continue. If I go back to the browser, we can see it sitting right there. And there's all of our tools just like we wanted it to work.

So now we've got the whole thing running inside the container itself. Now if I disconnect right there from the debugger. Now what I can do is go back to the command palette. I'm going to say reopen folder locally. This is going to close the container down and go back to running the Python project locally in my machine.

11. Using Dev Containers with VS Code

Short description:

Two things should change dramatically here: the color changes to indicate that it's a local dev container, and the bottom right corner indicates that it contains a dev container. We can reopen it if needed. Let's open another application directly from GitHub using a dev container. We choose a repository, specify the branch, and the dev container loads the code locally. No need to create a folder on the local machine. The dev container sets up all the necessary dependencies, including Azure functions. We can run the react application using npm start.

And just to really point this out. Two things should change dramatically here. One, the color changed because I'm using Peacock and tell us okay we're local it's a different color. And two, it's now telling me in the bottom right hand corner that this contains a dev container. And if I want to I can reopen it now. And if that message goes away, no worries. I can click in the bottom left on the icon or I can go back to the command palette. And just tell it go ahead and we can say reopen in a container. Or reopen and rebuild if we want to.

So we just saw how to use a Python application and it set all the dev dependencies up for us in the container. Now let's go and open up another application directly from GitHub with a dev container. So I'm back inside of VS Code. We're gonna run the command palette and choose to clone a repository right into a dev container. Now I happen to have a repository, which I'll search for. And this one up here is gonna be at John Papa and it's got gh static end to end. Now it's gonna tell me which branch I want to use. I want to use this update container branch. It's good to have choices. Now it loads this dev container up. It's actually pulling this code into a dev container locally on my machine. So notice I skipped the whole, let's create a folder on my local machine to do all this because it's inside of a dev container.

So the next step I wanna do is go ahead and check inside the terminal for. This thing happens to use react and Azure functions. I didn't have functions installed locally. So if I run func right here inside its terminal, we can see it already has Azure functions already. So that's because the dev container itself has set all these things up, including the Azure functions extension and the core tools from the Docker file that it had. That's pretty cool. So it gives me all the dependencies that I need. So the next thing I wanna do is go into my terminal and let's type in npm start. That's gonna run my react application.

12. Running Functions and Port Forwarding

Short description:

To run the functions app and load data into the react app, open a second terminal and run 'func start' or press F5. Refresh the react app to see the data. Port forwarding is used, and you can change the local address port if needed.

We also had a yarn install for it. Now, if I open this in the browser, the react app isn't actually gonna be loading well. That's because there's no data. Well, it's got a functions app. So I come down here, hit Command slash, open a second terminal. And now what I wanna do is I wanna run func start or I can just press F5, it'll automatically run my functions. And now we can see the core tools are loaded and they're running here. I don't wanna browse to those. Instead, I wanna go back to my react app and I wanna hit refresh. And now there's all my data. Now, notice the port is 3000 here. We're doing port forwarding. So if I want to, I can click on this little icon at the bottom of the screen, show me all the ports or I can just click on ports right there. Now we can see 3000 is being forwarded. Well, let's say I had a conflict that I didn't want it to be 3000. I can come over here and right-click it. Change local address port. And instead I could change that to, let's make it 55 55, just like that. And if I go back to my react app on port 3000, nothing's there. But if I change it to 55 55, there we go. So it's a great way you can do your own port forwarding as you need. It detects the ones that you need out of the box, but you can always change those as well.

13. Creating and Configuring Dev Containers

Short description:

To create and configure your own dev container for others to use, you can start by opening a project in VS Code. If the project is already local, like the Shop At Home project, you can add a dev container to it. By choosing the appropriate development container, such as Azure Functions and node.js, you can pre-configure the dependencies and extensions for the project. You can also customize the dev container by adding more extensions and specifying post create commands. Once the dev container is set up, you can open it remotely and rebuild it if needed.

So we saw how to open an app with dev container, but how do you create and configure your own dev container for other people to use? Let's go take a look at that ourselves. So we'll come over here and how do you get out? First, I'm going to choose remote containers, close the connection. It's going to close it out for me. Now I'm back in VS Code and I want to open up a project.

So this project happens to already be local. It's called Shop At Home. Now this is just a normal project, no dev container that I have, and it happens to be using Svelte as the main application. And it's got Azure Functions at the back end, and I want to use Azure Static Web Apps as a dependency that connects them all together and makes them run. So I got a lot of things in this application and I want people to be able to just use it out of the box.

First thing you'll notice, I have peacock running up again, it's all pink for my local, and what I want to do is add that dev container. So I'm going to choose add development container. Now I could choose node, but I actually want to find something with functions in it. And I typed in funk and nothing's there. So I'm going to do show all definitions. And look, there's Azure Functions and node.js. So I'm going to choose that. Now you can see here, I've got my dev container already opened up, that's going to install functions and node and pretty much get me where I want to be. Now it's got a couple extensions out of the box, but I want to add some more as well. So what should I do? Well, I can add some more extensions right now by going into the extensions. Now I know I want Svelte to be having its extension for me. So I can right click on it and choose add to the dev container. Now all of these are getting added to that dev container, Jason. So it's pre-configuring the dependencies for me. Another thing I want is this post create command. Now I happen to be in a monorepo, which means that npm install is not going to work in the root. I need to cd into the Svelte folder first. So I want to go cds into Svelte app and then run npm install. This is going to set me up to have the most success. So the next thing I want to do is to open my container or say remote. And we're going to say open and rebuild.

14. Running Containers and Browsing the Application

Short description:

Now I'm doing open and rebuild to open the container, build the docker image, set up extensions, and run npm install. In the API folder, I run func start to test Azure Function Core tools. Then, in the Svelte folder, I run npm commands to build the application, start the public folder, and hit the API. The container handles all the dependencies, and I can browse the Svelte application with a list of items.

Now I'm doing open and rebuild because I wanted to open the container, which you notice it did. And now it's also building the docker image. It's taking everything that was set up in that image for functions and for node. And it's also setting up the extensions that were in that pre-configured list, including the ones I added. And it's going to run that npm install in the right folder. So when we're done, we should see the Svelte app should have a node modules folder, which it just ran through down here, but does this work? That's a good question.

So I can go into the API folder. So that's where my functions are and I can run func start, try it a different way. So it's running my Azure Function Core tools. Things are working here. And then the second thing I want to do is open another terminal. I hit command slash. I'll make that go away. And then over here, I want to go back. I want to go into the Svelte folder. And I happen to have an npm command called run local. So I look at that. What local does, it's actually using npx to use the Static Web App CLI to start the public folder and then hit the API itself. Now, before I run local, I want to run a command called build. That's going to build my Svelte application and put the public assets into the slash public folder. And then I'm going to run npm run local. Once it's done, I notice it's pointing to 7071 for the API. So it'll automatically set up cores for me. A lot of dependencies going on here. This is like real world dev. So the container is handling all this for us. So once all this is up and running, the nice thing about this is you just have to browse to it, which I can see right here. There's my Svelte application. And we can see I've got my list of strawberries and apples and sliced bread. And I can do everything else I could do in the other containers as well with debugging and stepping through.

15. The Benefits of Using Dev Containers

Short description:

Dev containers are really nice for different scenarios. They are useful for students learning new technology, as they eliminate the need for manual configuration. Dev containers can also be used when you lack dependencies or are working in a different version of a programming language. They are great for team-based development and open source projects, as they allow others to use your app with the same setup. Peacock can be used to differentiate between local and remote situations.

It's just really, really nice. We just saw three different demos on using dev containers for different scenarios. The great thing here is whether you're a student and you're learning new technology, and you don't have time to configure things, you can use a dev container to do this. If you don't have enough dependencies on your machine already, or maybe you're working in a different version of Python or Node or Rust, you can use a dev container. And if you're doing team-based development or maybe open source, where you want other people to use your app without long sets of setup instructions and scripts, you can set up a dev container so they can just pull directly from GitHub and just work with the exact same setup that you are. It's pretty cool to do. And notice we used Peacock to color the local versus the remote situation to make it easier to tell when you're inside or not.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

JSNation 2023JSNation 2023
29 min
Modern Web Debugging
Few developers enjoy debugging, and debugging can be complex for modern web apps because of the multiple frameworks, languages, and libraries used. But, developer tools have come a long way in making the process easier. In this talk, Jecelyn will dig into the modern state of debugging, improvements in DevTools, and how you can use them to reliably debug your apps.
JSNation 2022JSNation 2022
21 min
The Future of Performance Tooling
Top Content
Our understanding of performance & user-experience has heavily evolved over the years. Web Developer Tooling needs to similarly evolve to make sure it is user-centric, actionable and contextual where modern experiences are concerned. In this talk, Addy will walk you through Chrome and others have been thinking about this problem and what updates they've been making to performance tools to lower the friction for building great experiences on the web.
JSNation 2023JSNation 2023
24 min
AI and Web Development: Hype or Reality
In this talk, we'll take a look at the growing intersection of AI and web development. There's a lot of buzz around the potential uses of AI in writing, understanding, and debugging code, and integrating it into our applications is becoming easier and more affordable. But there are also questions about the future of AI in app development, and whether it will make us more productive or take our jobs.
There's a lot of excitement, skepticism, and concern about the rise of AI in web development. We'll explore the real potential for AI in creating new web development frameworks, and separate fact from fiction.
So if you're interested in the future of web development and the role of AI in it, this talk is for you. Oh, and this talk abstract was written by AI after I gave it several of my unstructured thoughts.
DevOps.js Conf 2022DevOps.js Conf 2022
31 min
pnpm – a Fast, Disk Space Efficient Package Manager for JavaScript
You will learn about one of the most popular package managers for JavaScript and its advantages over npm and Yarn.A brief history of JavaScript package managersThe isolated node_modules structure created pnpmWhat makes pnpm so fastWhat makes pnpm disk space efficientMonorepo supportManaging Node.js versions with pnpm
React Advanced Conference 2021React Advanced Conference 2021
27 min
Beyond Virtual Lists: How to Render 100K Items with 100s of Updates/sec in React
Top Content
There is generally a good understanding on how to render large (say, 100K items) datasets using virtual lists, …if they remain largely static. But what if new entries are being added or updated at a rate of hundreds per second? And what if the user should be able to filter and sort them freely? How can we stay responsive in such scenarios? In this talk we discuss how Flipper introduced map-reduce inspired FSRW transformations to handle such scenarios gracefully. By applying the techniques introduced in this talk Flipper frame rates increased at least 10-fold and we hope to open-source this approach soon.
JSNation 2022JSNation 2022
46 min
Confessions from an Impostor
Top Content
You know what impostor syndrome is, right!? Most all of us have felt that nagging feeling that we're faking it and that we're sure to be found out by all the experts around us at any moment.But before you go assuming this talk is the same ol' song and dance full of platitudes that encourage you to ignore that syndrome, let me clue you in on a little secret: there's no experts around you. Impostorism is not a syndrome at all, it's a pragmatic mindset and perspective, one we should all embrace and be proud of. In fact, it's vital to us getting our jobs done.

Workshops on related topic

React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.