Code faster and make less mistakes

hi my name is Tim Bennigsen welcome back to my youtube channel in this video I'll show you how to create a badass development environment now let's roll that intro before we start the video I want to thank everybody who already subscribed even after two videos you guys are just awesome every video about web development that I create in this channel will go into the programmer series but as a programmer you say a programmer is this combination of a developer and a dude a programmer would say protein shakes and weightlifting sessions in between coding right nowadays everybody is a programmer everybody who code JavaScript or does fancy stuff on the web is kind of a cool kit but then you have me and this old guy I'm considered to be a dinosaur in this industry I would consider myself to be the original programmer enough jibber-jabber on to the good stuff so I'll show you the tools that I use to get a great developer experience at work I use a Mac but at home I use a PC but I figured out all these tools that I love so much at work but I also wanted to run them exactly the same at home on my PC as it turned out you can run Linux on your PC now it's an official package called wsl by Microsoft this is just awesome so once I installed that I can actually run all my whole tool chain in this virtual ice-t-- environment on my Windows machine it's just great so if you want to install that for yourself there's a link in the description too to explain how to do that first things first your IDE or your text editor this is the heart of your system this is where you write your code so being a dinosaur in this industry I have gone over a lot of ideas in my time just to find the one that feels right for you and you're in that context so I've written a list because I couldn't remember all of them so let me just read them to you and be amazed of the amount of stuff I've had to try over the years so I fused notepad Tim orphée I am textmate eclipse netbeans webstorm phpstorm sublime text 2 to bind text 3 notepad plus plus BB edit code add text Wrangler brackets approximately 10 hours later and now I use feeis code by Microsoft it's the best text editor there it is I set it and I'm gonna get some heat for this maybe but maybe not you know what for me at this moment it is awesome so let me show you why so this is my vs code I'm recording this on my Windows PC so as you can see in the bottom here I'm connect wsl ubuntu which is my virtualized Linux the app actually runs from there because of that you'll also see that if you look at installed extensions that I have they're actually installed in Ubuntu because I'm running it from there so it means have access there let's first have a look at the plugins I use and after that on how the IDE actually looks so initially you will see two Asscher plugins that I use because I used I do gem stack and server stuff quite a bit so to be able to be locked in through my IDE and to do stuff on the cloud from the IDE I have those two plugins for the core of what I'm showing you today you don't need those but I use them all the time so they're still there so let's go to the base of my development experience which is editor convict this is a great little plugin that I think Fiasco should have had by default but I don't know why it doesn't have it but anyways you can download it here it basically overrides the user settings for the workspace and how it deals with files or everybody in your project so if you open a file like that so you can see actually each file needs to have a certain identity in style a certain identity size line endings character set all of that and you can see for me for example markdown as one thing that's a little bit different than the rest of the files this can be a little bit more elaborate and the moment you use with different coding languages in one project with different people this actually helps you a lot next is es lint so we all know and love es link but it's generally in the build system rather than in your IDE but because it's in your build system there's this extra configuration file so yes lint in your IDE will look at that config file and inline while you are coding it will show you your mistakes or it will auto fix your mistakes like when I remove this space and I hit save it actually auto fix that for me this is great so next you get lens kaitlin's changed my life as a developer on the performance side of things not performance of the IDE but of me myself right so all those extensions and plugins that I use are either to make me not have mistakes as much plus it makes me faster if I want to know when I added a certain line and what was actually commit there it is I select a line and you can even see here on that line what did I change all the commit information so this is like kind of inline into your IDE it helps you to do get stuff and it adds a whole bunch of icons here and it even goes further and giving you all information about git I don't use this as much myself I tend to do get in the command line but this helps you a lot with giving you good overview so next one prettier prettier is very similar to the es lint configuration that I use on a configuration I mean plug-in prettier tends to be in your build system in your web pack and it does the stuff it needs to do but I've seen sometimes when I work with something that has prettier especially in few GS in my templates side of things when I start coding and I want to see something quickly prettier keep saying hey that's not correct that's not correct fix it fix it and it keeps on going and sometimes it takes me five minutes to figure out oh yeah but why did you want that space here but there he wants five spaces and stuff like that if you just install this tool and you hit you make it make sure that it auto saves and auto fix so when I click safer this fixes the the prettier stuff so again this makes me faster and then we have feature peter is one of my favorite plugins if you want to use few GS I work with Fuji as all the time so having this and hence my experiences enhances my experience by a lot it has syntax highlighting snippets omit abbreviations formatting stuff Auto completion it's basically the tool to use if you use Fuji s it's amazing okay so now we've talked about the feature set which is very small and minimal but it's all you need it's about being fast and making less mistakes that's what this does now let's have a look at how it looks which is the same it's about making less mistakes being able to look at your screen for a long time that is generally for me the most important part because I might call in code in the middle of the in the morning or a very long duration so it's all about accessibility how does this look is it not too drastic in the in how many colors it has and how dynamic it looks this one looks very calm to the eyes and the font is really smooth this is just a great experience to do coding so when I try to create this I spend hours and hours to do my own and then I just googled around a little bit and I found 9 oh this is by Sarah Dresner thank you Sarah this is freaking awesome I install it good to go it uses the tank mono font I managed to get that and put it in and everything just work together this is just great on top of that I have a couple of small things like I have to bracket pair coral colorizer which basically means when I select this one first of all it highlights but also you can see different brackets actually have different colors so here you yell out there they're pink so it's much easier to distinguish your brackets especially in JavaScript that's what you want and then on top of that I wanted to have some icons and the mid material thing by Google has great icons so you have a few icon we have a folders icon all of that stuff great great great it just is as you can see it's very simple but this really helps me to do proper code on to the terminal next so this is my terminal so asset terminal I'm using hyper touch is I use hyper both on Mac and on Windows and it's based on electron just like PS code because of that I can run it everywhere being on my Windows computer I'm actually running it through the Linux distribution just like vs code before and you can see that because I'm actually in mount see if you want to use a drive in Linux you have to mount it so I actually mounted the C Drive off my Windows PC and I went into the work folder where I found my project hyper is very fast small and extensible it installs stuff from NPM but super cool so I'll show you how I set it up so first other than on how it looks let go into the plugins that I use which is in my case actually very little because it does everything I needed to do I actually use hyperlinks which is a very simple plug-in that when it finds a URL you can actually control click it and you go to a browser and see that URL that's all I needed basically because most of the meat of all the functionality comes from another thing that I'll show you in a sec and the next plug-in is hyper night all which is the night oil theme that I also have in feels code the stuff needs to look the same for me I love that the only thing that's different in this theme on how it looks is actually the font family I don't use dank mono like tonight all uses but I use Roberto Mona for power line I have this because of how this hair looks those arrows should align up properly if I use a different font that doesn't work so actually let's go into why I use those how I get these arrows and how I get this to look that nice because this hair actually shows me where I am and get if there are changes or I have to do a pull or push it shows me everything here which is super handy while you're working right you can always see oh and this folder I haven't changed so I have to check what happened there how to get this I actually use something called set as H which is basically the base runner of your terminal on Windows you have like CMD or other stuff and on Mac you also have bash and you have a bunch more but you also have set as H and this is what I chose to use on both systems because it gives you slightly extra things so I'll show you the configuration I have for that I just have set the past H RC so even that auto-completion comes from said Sh so I just opened my configuration as you can see that is like super small so to set up set Sh I've actually used something called all my said SH which is a super handy tool - that wraps everything on set as H and makes it very easy to use because it goes quite deep in its complexity so if you want to use set as H with its fancy features just use all my set as age and you're good to go the theme I use is called a cluster and the plugins I use are only get so basically what this team provides you with is this awesome stuff so you can you can select what you want to see on every line you can do a lot of things you can even see the RPM of the fans on your video card or you can see how the load of your processor is like all of these things you can put on these lines for me I chose to just have the name my computer where I am and get keeping it simple but working really really well um that's it for the for the terminal the way I actually I'll show you that quickly the way I actually run it into set as H by default is by actually selecting which shell you want so I'm actually setting my shell to bash and in the configuration of my my set up it automatically always opens with set as H so it could also have been bash but that makes that work for me and that's it so there you have it as you can see it's a very simple and considered system over time I shaved it to what it is now minimalist and you don't need the hassle of configuration that doesn't scale or has issues also I need to share it between my PC and my Mac or when I get a new system it needs to be able to run they're all you know all I need is just to be less error-prone and to be faster if you've made it to this for any video awesome thank you for watching if you liked the video please consider giving it a like or even subscribing and if you have anything to say or give me some feedback please consider writing a comment down below bye