All language subtitles for 010 Setting Up The Course Dev Environment (Code Editor)_en

Now we are soon going to get started

with writing our own React.js code

and working in our own React projects

and we are going to learn about

all of React's cool features.

Now for writing React code,

you will need a code editor

and any Web Development Editor

or IDE can be used.

Atom, Sublime text, Web Storm,

whatever you want.

My recommendation and the Editor

I will use in this course though,

is Visual Studio Code.

It's a free code editor,

and it's amazing.

So free and amazing is a pretty good combination.

And that's why I will use it.

You can download and install it

for all major operating systems

and therefore this is the editor I will use

throughout this course.

You can simply visit code.visualstudio.com.

Download the installer from there,

and then simply walk through that installer.

It's a standard installer, nothing special there.

Now, once you did install Visual Studio Code

you can open it.

And once you did open it,

it will look something like this.

Now the exact look can differ

but it should look something like this.

You can tweak the appearance

under View Appearance.

For example, I will remove the Status Bar

and you can then open files or folders.

Through this Open Folder button here

or this File, Open or Open Folder button in the File menu.

And you can simply open the React projects

you are going to work on throughout this course

with this editor.

So at this point we don't have a project yet.

Later once we do have projects,

simply open those project folders

with this editor,

and you'll then be able to work on your code.

Now regarding the settings and the styling

and the look of this editor

you can of course fine-tune it to your requirements.

I'm using a theme here

and you can change it under preferences, color theme

and I'm using the Dark+ theme here.

You can, of course also switch to other themes

but I like this Dark+ theme.

So if you wanna have that same look

you can use that same theme here.

Throughout this course

I will also be a bit zoomed in.

And of course, that is something

I'm just doing here for this course

so that you can view my code without issues.

I will also sometimes remove this Side Bar

which you can do with View Appearance Show Side Bar

or with the shortcut you see here.

Now, in addition,

the great thing about Visual Studio Code is

that you can install extensions

under View Extensions.

And here I got a bunch of extensions installed

but there aren't many important ones.

Most of these extensions have nothing to do with a React.

There are two extensions

I wanna mention though.

The first one is Prettier.

This is an extension which will help with code formatting

because in Visual Studio Code,

if you go to your keyboard shortcuts,

there is a Format Document shortcut,

which you can bind in case it's not bound for you yet,

which you can press once you got some code

and it will then format your code so that it looks nicer.

Simply remove redundant white space

and so on.

So this can help with keeping your code clean and readable.

And this shortcut can benefit from this extension

which helps with formatting.

So installing Prettier might be a good idea.

Once you did install it,

you might just wanna check out your settings

under Preferences Settings

and then search for format here

and make sure you set your Default Formatter to Prettier.

And then this Format Document shortcut

which I showed you

should use Prettier.

Now that's one extension.

The other extension,

which I use in some course modules,

is the Material Icon extension.

The Material Icon Theme extension.

You can download and enable this as well.

And I will be using it in some,

but not all course sections.

This extension will simply change the file icons,

the look of the file icons.

And therefore, of course, it's 100% optional

and you don't need it.

And that's all that is the setup I'm using in this course.

This is the editor I'm using in this course.

And of course you can and should tweak it exactly

how you want it.

I just wanted to introduce you to my set up.