Now, this is going to be a little bit different of a lesson and it's because there is no right or wrong answer to whatever tool you want to use. These are three popular elements and software items but they are not the only ones but they definitely would work for this type of application and they are also all free.

So I think a good idea if you've never worked with any of them before is download all three of them and play with them and see which one you prefer. In the course we're going to be using visual studio code. And that's because that's what I use whenever I'm building out my own react in JavaScript applications I like how I have it configured and it works well for my own personal workflow.

However the other two we're going to talk about are also fantastic text editors and so feel free to try them all out and then pick out whatever one you prefer. So Visual Studio code is a product built by Microsoft and it is a much more lightweight version of some of the code editors they've created before but they've done a, in my opinion, a fantastic job of building a full development environment. And I can show you right here what it actually looks like.

So all three of them are going to have a similar look and feel and they're going to get different when it comes to things like extensions and plugins and those kinds of elements.

So on the left-hand side you'll have the file system on the bottom here you'll have a terminal debug console spot for output and any bugs or problems that arise and then your code files are going to be the top-right section and you can switch between them. You can view them side by side. We won't be doing that a lot in the course mainly because when ever I am working on a tutorial like this I increase the font size quite a bit and the zoom level so that it's easier for you to see exactly what I'm typing.

Whenever I'm working on a normal application I usually have the fonts much smaller and then I can view them side by side which is helpful. The other thing that I want to point out before I move on to the other two editors is on the bottom left-hand side. Here you can see we have extensions now the extensions are some of the coolest parts of any of these development environments in these text editors because they give you some pretty cool features that other developers built and you can pull them down and use them in your own system.

I'm not going to go through all of them at this moment because this is not a Visual Studio code course. As we go through the material I will share with you when I am using a specific extension when it applies to something in the code but I want to give you one example before we move on. So if I hit command shift P then it brings up the panel where I can use any of these commands. Sometimes these are opening up files it's all kinds of different commands that you can run.

I also can connect to extensions so if I want to use my Quokka extension and this is something that we're not going to do in the course at all it's simply I want to give you an example of an extension and how it works. So right here if I want to say console.log 2 + 2 then you can see one cool thing Quokka does is it actually outputs it right here. So instead of having to if you've ever done this before in if you have built out a console.log where you have to go into the browser and check through the javascript console in order to see what got logged out.

That can be kind of an annoyingly slow process but an extension like Quokka allows you to do that right in line. So this is very cool and as you seeming go through the course you'll see me doing this quite a bit because it saves time and I think it also makes it very nice and clear on what type of output I'm getting. So that's just one example of an extension that you can use.

Besides that, I don't use a ton of other extensions just because I don't want there to be a long list that can get cluttered and they can start having conflicts. But it does have a nice interface for working with those outside types of packages.

Now next on the list is Atom. So Atom is a very popular IDE that is developed by the GitHub team. So GitHub created this IDE and it has all kinds of cool features. It's not personally one that I use very much at all but I have had a number of conversations with front-end developers react and angular developers who absolutely love this IDE. So if that's something that you're interested in go to atom and you can download that for free.

And last on the list is sublime text. So I tried out sublime tax for years I've built a number of courses where I used it and it is a fantastic tool. It doesn't have quite as many extensions on the front-end side. It has a whole set of packages and so you definitely can build the entire system and all the systems we're going to build using Sublime Text and if you already have it on your system and you love it then feel free to just keep on using it.

However, it's not use quite as much by front-end developers simply because of the lack of front end extensions that you see in Atom and in visual studio code. So have fun trying out all of those different text editors. Once you have picked out the one you want continue on through the rest of the course.

Resources

• Visual Studio Code -Atom IDE -Sublime Text