Editor Setup

[00:00:00]
>> The next thing I want you to set up is I want you to create a new file. Save this to the root of your project. This is another thing that I almost immediately do whenever I start a new project, and it's called .editorconfig, like that. Okay? Yes, we want to use the dot.

[00:00:24]
So you can see I got a like a nice little mouse head. That's called the, I have an extension for that, I think it's called VS code, oops, I'll show you, VS code icons right there. That's where I get all these icons from, so if you install that you'll get all the cool icons.

[00:00:44]
This one. Okay. Anyway, that's neither here nor there. So inside of editor config, this is a cross editor tool that's letting the editor know here's my code formatting rules. And this is nice because if you have a bunch of people in your team that are working and they want to use Vim, and they want to use all the other editors out there, this is a common format that they all understand of how to set up the project.

[00:01:17]
So I'm just gonna show you how to write a really quick one. So I'm gonna say root equals true. This is the one that lets them know like, this is the root most editor format, you can have nested ones. And then here I'm gonna put inside of square brackets a star, and this is going to be for any file format.

[00:01:34]
Like if I wanted to do just Python files that could do a header Py and this would be just Python files or just JavaScript files, but star's like for everything. End of line, we want it to be lf. That's Linux formatting. I recommend that in general. Insert File, new line.

[00:01:52]
We do Char set, you want utf-8. Indent and style, or we can do size too, that's an excellent, indent_size, we want 2, cuz in general JavaScript developers like 2, that's not always true. But I find most open source projects are 2 indent. And indent_style, we want spaces, cuz again, JavaScript, it's fine if you like tabs, I don't actually care.

[00:02:23]
But in general JavaScript has landed on two spaces. I'm not gonna argue about it. That's just what it is. Okay. So now, my project is set up to use these formatting tools and my VS code just knows how to use it if you have the right extension installed.

[00:02:42]
So again, the extension that you need is called editor config. And it's this one here I have it installed EditorConfig for VS code, 2 million installs, go ahead and install that one and then it will automatically read these files. Another cool thing is prettier knows how to read an editor confirm.

[00:03:01]
So if I went in there and change it to four spaces, prettier would automatically pick that up. So what's great is if I have like a joint Python JavaScript file because Python generally uses four spaces for indentation, you can set up Python have one set of rules, you can set up JavaScript one set of rules, but this is a great project, I definitely recommend that.

[00:03:22]
Okay, any questions about editor config?.
>> I have a question. I thought that you could turn on and off settings like within the prettier config. Why are you choosing to use editor config for that purpose?
>> Yeah, so it's good question. So, the reason why is because not every editor understands prettier configs that's the first thing.

[00:03:51]
So like for example VS code out of the box does not read your prettier config to figure out what kind of tabs and spaces you want. So if I don't put in an editor config by default VS code defaults to four spaces. So that's what editor config is useful for is it makes VS code understand that I want two spaces.

[00:04:12]
Eventually prettier would fix all that but it's just easier while you're writing. And then the second part is, yeah, most editors understand editor config quite easily. And so it's to help all of your projects with all of your teammates across various different languages. It's not totally essential, but it's something that I do for every project.