VS Code setup for your Nuxt/Vue project

hi everyone i guess you could say i'm live again well it's lunchtime here or it's just past lunch time i've just had my lunch so for those who are having lunch i hope you had or having a nice lunch and for those who's breakfast good morning and if you're on the other side of the world and you're about to go to bed well i hope you sleep well um so what am i going to do right now i'm live and i'm not telling anyone i know that's terrible of me but yeah um basically some people asked me to create a video of um i can see some people thomas is here great thomas so yeah some people asked uh requested that i actually let me turn notifications off otherwise it's going to be all those beeping going on during the whole video that would be a nightmare um yeah people asked me to create a video on my setup my vs code setup right and that's kind of um not so easy to do hi randy so i decided to just do it live and that means if you have any questions then you can just ask in the chat um so that's the plan and um let me just refresh this so i can see what's going on and i'm going to open this i can see the chat better and that should work a little bit easier because i think yeah the comments in here bonjour johan the comments in here sometimes like jump out so that's great okay cool so vs code setup how how do i do and what do i do debbie is live thanks eddie i am live i love doing this surprise debbie's live um it's kind of just fun right um so vs code setup um i am no expert at vs code setup but i have struggled and fought with prettier and eslint in order to get it all working just the way i want so it all just works and it makes my life easier so i'm just going to show you what i'm doing i'm not saying that what i'm doing is correct or better than anyone else is doing but for sure it might make your life easier so that's the kind of plan here in today's live stream um if you do have any specific questions or anything you specifically want me to cover then just kind of say hey how do you do this or how does this work or whatever so when i'm setting up my next application what i actually do is uh hey nico what i actually do is i choose everything right so when i'm doing the um crate next up i choose eslint i choose prettier i want them all right i want my lint stage set up i don't have to do it all myself i want i want the nooks crate next stop to do it all for me now once i've got that set up i have no problems now i've done live streams with other people live and they've had a lot of problems and it's been like really you had problems i don't get it so it depends on how your editor is set up right and my editor um is basically set up how do you recommend vs code instead of jetbrains tools uh great great question randy um i recommend vs code because um i was actually originally using webstorm webstorm is great and i was using that but i started working on a team with a lot of people and when everyone has a different editor and a different setup it can be quite a nightmare to jump from one and to the other and help them out so i chose to leave webstorm and go on to vs code um for that reason to to better work and at the time as well vs code was getting a lot better so i left webstorm a couple of years ago i still have a license and i don't use it and i should because it's great it is great if you're using webstorm webstorm is great um but vs code has some really really cool features and when you're collaborating on a team for example so all the nooks team are using vs code so for us to work together uh using vs code makes sense but it doesn't mean to say it's better or that i recommend it just it depends on your use case and that's one of the reasons why i use it so yeah i've set up my next application i'm gonna like i'm gonna um show you what's going on here and uh let me share a screen great so this is my basic application right and as you see in vs code um i've got like you know some things going on here right i've got my assets it's telling me what branch i'm on um and i've got no errors or warnings that's great and my name is debbie yay so this is for live sharing right so if i wanted to do a live programming with someone i could just click this and it's going to start up a collaboration session once you've got that extension um installed and then i can literally just copy that and send it in the chat and one of these could connect to my code now that's quite scary so i'm not going to do that i know i'm only mess and i trust all of you but yeah that's as simple as it is to to live code with someone and live sharing is really really cool then you kind of see down here what participants are are are live with you and you're able to there's even like a live audio that you can join with someone so that's kind of cool as well so that's one of the reasons why i use vs code is because the live the live sharing is is fantastic and we um and we do it quite a lot so i'm going to stop that collaborations um one so yeah once you do that that's cool uh live sharing totally recommend it try it out find a friend send them a link and just kind of play around get used to it really really cool tool so um then i've got some other things here this is just like you know the last file to open tab nine is something i'm doing um it's it kind of teaches me or you can install this right it's called tab nine and you can it basically like reads your code and then gives you better suggestions so it's still kind of um it's not fully amazing but it's getting there and it's gonna like you know give you better suggestions as you're writing a code so it can save you some time so i've got eslint here and i've got formatting so these are all kind of installed this is if i want to send twitter feedback and this is like there's no notifications right so it's a simple setup you're in a client meeting alba uh oh just forget the client meeting just join me instead uh thanks alva okay so cool we're here uh vs code so what's going on right so i open the index page and now whoa i've got all that other stuff at the bottom of my screen what is happening there so um as you can see now i've got these extra things i've got a spell checker this is uh my spell checker that's installed here because um because i'm really bad at spelling so i have a spell checker installed so i can like you know make sure my spelling is better that's just another extension i'm using like two spaces so this is uh i could just click here and change that if i wanted to uh i'm using utf-8 i could change that easily lf this is one problem i seen come across with a lot of people uh when i was doing workshops they didn't have lf they had crlf and then prettier was like going crazy so that's something to check um it's a view file and you know you could change that and say no it's not eslint so you could run that and you can see like the eslint the server is starting prettier and you're gonna go whoa that's all scary what's going on here so this is kind of like showing you the prettier um options and that's basically the options that you have installed so you can kind of see if something is you know going on you can see my end line is lf so if this was showing something different then you'd know like oh okay so that's that's why that's causing a problem and you can see i've got format formatting um activated so that's pretty easy to understand right um so what you can do is you can um change your settings this is the manage the settings if you click here you can open your settings and you can manage them directly in here now there's so much to go on in here like it's just crazy like you could spend so long just going through everything and i'm not going to go through everything what i'm going to do is make it a little bit easier and i'm going to just advise a couple of packages so if you're starting out in nooks for example there's a couple of extensions i really really really recommend uh let me have a look um so for example you could have you the one i i recommend is sarah dresner of course and you can um she has a whole package right so i'm gonna just make that a bit bigger so i can see what's going on um so the one i use is the view vs code extension right now this is a package of like 10 extensions all in the one um hello nook's queen thank you byron um you're not the only one in the client meeting any terrible client meetings great that you're able to be in two places at once these days so yes really really recommend this code extension pack why because you're getting vtor and vita is view tooling for vs codes it's going to really help you with your writing view code so really recommend you install that you've got vue vs code snippets and i'll show you that in a second then you've got prettier installed you get formatting toggle you got javascript code snippets bookmarks npm intellisense jumpy i don't use all of these bracket pair i love this one bracket pair colonizer and night owl my team is night owl i love this theme it's really really really nice so that's basically what i recommend so if you install all of that you're going to get pretty much everything out of the box right so i also make sure you have emmet i also really uh use a lot emmett uh is it e-m-e-t i can't remember yeah that one i think it is no that's not the one i haven't got installed e-m-e-t e-m-m-e-t emmet anyway emma is for when you're um i have to find out where where i have but emma is for when you're able to like write you know the div and then it kind of like writes it all out for you and stuff so my screen by the way is like four times bigger than normal so that's why it's kind of like hard to see sometimes you need like put your clothes on make it smaller okay so let me get rid of that and let me show you in the index page right so i'm just going to like close that up so if i wanted to for example let me just get rid of everything to make it easier start off with a nice clean clean slate so using the code snippets i can put um well i can actually start off with a completely clean page so imagine this is a new page should just create a new page that would have been easier never mind so i can actually just do vbase right and i'm gonna get you can see the options that are coming out for me and it's it's like really amazing because i can see here the base review file with with sas code from vs code snippets and i can see it like right this is what it's going to give me now is that what i want if it is then select it but maybe i want um view 3 and i clicked it without um without showing you terrible of me so like i'm just like using the the keyboard here and i'm just going down so i can see like the view base with the composition api if i wanted that one or maybe i want typescript or maybe i want um css or less or etc right so you can kind of go through these and see which ones you want so i'm not using sass in this one so this one will do right this is going to give me everything i want just like buying like that now that's cool right now the issue here is um i've got all these red squiggly lines not kind of ugly right but don't worry about it because you know i have different settings to other people so this code snippet is going to give me um settings that are different to to someone else now if i press save it's going to like get rid of all those from me because i have editing set up on save right now that's really really important um how do i do the editing on save and you can see this red line here right if i click over unexpected empty source no empty sources because i've got style lint also activated so like that makes sense right you don't want to be adding this so you could just delete it and that will get rid of that so how did i set up the formatting on save let me show you that so i actually have in here just created this just because it's easy to show you which is the settings dot json now you can put this in your file so you can have different settings like you can see for example i've got a window.zoom level three so if you do that now you're gonna get you're gonna see the code i'm seeing it's like whoa in your face so doing that for youtube videos is great but normally this would be zero you watch that it's gonna like go really really small as soon as i save and you're like whoa i can't see anything debbie right so that's how we're basically doing that and it's really really cool that you can do it per project um and very easily so what's going on here um code actions on save is set to true right source fix all eslint now i don't have to do this here and i have it in the vs code extension or the vs code folder but i could just put it in here uh go into settings and then just put in here and i think it's called unsave right vs code eslint code actions on save mode and you know you could only problems are all and you can like activate these as you need to so again this is all editor format on save this is you can format unsave you can uh you can do so much you can just edit the settings jason right so um everything is in here php you can even run php on save lovely so everything is in here right or you can just create the folder but remember if you create a folder in in one of your projects then you're going to have to copy that into every other project whereas if you're doing it at editor level you're going to get the same for all your at all your projects so it's a little bit easier okay if you have any questions um just just put it in the chat um and i will answer them if i can so yeah i've got some other stuff going on here so if you're kind of like looking there going oh that's a lot of stuff to take in there's just some fun stuff here uh for example sometimes you get like the mini map um over on the right hand side and that's kind of come down it gets in my way so i like to turn that off but sometimes i want it so sometimes i like to have this quickly easy to handle and just like quickly change to true so for for example um bread crumbs if you want breadcrumbs at the top i don't want them so i've got false but if you want them you can send them to true um my workbench is on the left right but i could just as easily send it to the right and then you'll see that now everything is over here instead so i'm going to open which is um sometimes kind of nice um some people use it for a live coding because then you're never getting that shift you know between like the page and you're opening and closing so for recording videos and stuff it can be nice but i don't know i try to use it and i find it easier to to do it on the left and then go there but you know i might get used to it one day and i might change who knows i'm using material icon theme team so i can get like these you know nice icons looks cool uh what else um sometimes i turn off the css and stuff just because i'm writing very bad css for demos and therefore i just don't want it to be really formatted as much and then this one is really important so e-s-b-e-n-p prettier dot vs code so the editor default formatter so this is where a lot of problems come from right it defines a default formatter which takes precedence over all other formatter settings it must be the identifier of an extension contributing effect a formatter right so um i'm using this one i'm not saying that this is the best one to use i'm just saying that that's what i use um so that can be said in here you can literally just like go in here and find that default formatter and uh it's a good practice to commit the vs code no no you shouldn't commit the vs code configuration folder um that's kind of just for you because otherwise people will have different settings and stuff so you're better off if you want to set something at project level you set your linter rules at project level and your prettier rules at project level but not your code settings your code settings is you right it's what you want imagine i submitted this and then everyone's window went to like zoom to three right so you don't want that so no you don't want to um you don't normally want to send that up so let me see if i can find this right so the default formatter is here right and like you can see there's so many in here it's like oh my god oh my god what would i whoa too many so don't ask me which is the best or why i choose one over the other this is the one i've been using for a while and um and it works for me so that's why i'm using it basically right uh hi toppo uh welcome okay so that's the settings done of of that let me show you some other cool stuff right so again i have this in this folder because i'm making videos and it's easy but sometimes i don't have this folder and i just have everything set at this level and you can set up a workspace as well so it's kind of like a lot of cool things you can do so with our template um we can do so i have i should have emmet set up um i don't come up with the extension name but anyway i can say for example ul dot um and you can see over here right dot let me see what am i going to say um container it's a terrible class name for ul but anyway you can see over here my emma abbreviation is saying ul class equals container so you're seeing exactly what i'm getting and then i can um i can just oh i made a mistake one second ul dot container container and then i press enter and it's going to give me that right and i can even do like li um times three and it's going to give me like you know i should have star three to get that i never do these i never do the ul's actually but basically any time i want a class div dot main for example and i just get that really easy yeah so i'm just pressing li and tab and i'm getting all this and you can see what you know this is coming from tab 9 which i have installed but you can see like there's so much to choose from here right so um that's kind of just simple stuff um cuando un corso in castellano i don't know good question um si hablo perfect castigano well perfect maybe not so much but anyway yeah i should do some spanish ones soon uh maybe i will um so yeah another couple of things from the code snippets that we can just put in here let me see what we can what can we put in here let me think data so v data right now you can see over here on the on the box let me see if i can hover here yeah so you can see here that i'm going to get data would return the key in value right there to the menu espanol no because then all the other people won't understand me i will do i will do a spanish one soon um so yeah if i do v data i'm gonna get that data property right and that's really cool and then i can change that to my key being i don't know sharp on my value being um oops in my value being my shop or whatever i don't know that was a terrible example i know um so there's a lot of really cool stuff you can do by just using the code snippets um if you want more information on the code snippets just like go to the extension pack and you can see everything that's possible so let me see if i can remember there's a next async data for example so if i just do this like you can see it here let me go down and you can see i'm going to get async data with the params and con state equals away fetch endpoint like this is cool right ah now i've got everything already already set up for me and i can use async data without having to actually you know type it up but i just change the things i need to change so that's kind of really really cool and there's so much in there for example there's just make sure you're using v and then p i'm getting plug-in i don't want plug-in now i want props yes this is exactly what i want and i just like enter and i get props so if somebody asks me um and gives me a blank piece of paper and says you know write everything out the export default the props the data i will fail the exam because sarah dressner has made my life easier by just putting all these like you know code snippets in so i'm basically just making my life a lot quicker but yeah don't ask me how to write the props because i'll probably write it wrong um so yeah there's a lot of like really cool things that you can do in here let me see what else is there in next there is um you can see down here i've got next fetch right instead of acting data i've got a n font and then head i'll have a look at those in a second let me have a look at the in head oh look at that i get my meta my hid description my name my content you see how fast that was you're probably thinking daddy you're too fast at typing i know so cool so yeah this is like oh let's not put in there um so let's see what else n gives me and fetch we saw as well and like you can just like you know hover over and you can see before you actually you know take it do i want constant name equals patterns no i want nooks fetch bam and then i've got the store commit as well so maybe i don't want that so then i can just delete it and use it however i want so um yeah and there's a couple of other ones up here actually um that you can use b and no no n link i think it's called i can't remember i never used this one but there is another one called uh v and v slot so you can get like a template with a slot name for example uh another thing is v4 i love doing the v4 uh no that's the vf not that one no not that one v4 like did you see that i just got like divvy for item and items key equals item id item right so this is really really cool so just kind of like play around with this v and kind of like see what else you can get uh v class bindings yes there we go dynamic classes so uh code snippets are amazing i encourage you to try them out um uh when i when i save this yeah i'm saving it and it's going to give me those errors because data is assigned a value but never used that's fair enough and then up here you know v-slot directive must be owned by custom element but div is is not so you can then just gonna have to fix those what extension is this so this is the code snippets um by sarah drostner so if you go to code snippets vs code snippets and i'm see i can never find things there's too many packages in here so i normally just look for her name there we go so this is vs code snippets here okay and you can you can get it if you include that whole extension package there which you get everything including the the theme as well and everything right but if you click on here and you actually scroll down it will show you how to use it as well and you can kind of like you know have a look at that it's got v2 and v3 and some nook stuff in there as well and you can see them all here right so if you ever kind of like get stuck and you don't want to type something out or you forget you can actually just read down through here and you can see all the snippets that um because you'd never remember them right so they're all there uh ux viewrooter uconfig nooksconfig next page a a in fetch and head and param um yep so all there right so that's that extension highly recommend it and if you are new to viewing nooks make sure i would i encourage you to install this because then you'll get vitor and you'll get the code snippets and you'll get everything else as well so that's just my recommendation okay so we have prettier we've got um code snippets we've got emmet set up uh terminal let me show you the terminal um so i'm using a shortcut of like control on that backtick and it's going to open up my terminal and it's great i've got all these silent errors that's cool because i don't need to fix them now but i'll fix them later so my terminal is opening on the right if you saw that that's really cool because i've got like a nice wide screen so i quite like the terminal opening on the right um some of you might have it at the bottom so that can easily be changed and it's really really cool um to change and you can change it even just like at project level will it clash with vitor if i have a v tour from earlier i think it's the same vitor um i think it's all yeah i think it's the same package so it's just it's just like an extension package that includes all the all the um all the other packages it's not a different one so in here terminal uh for example and you can just say oh do i want it on the right on the left or the bottom and depending on like maybe i was recording a video and i was using the terminal all the time so i might you know shift it over to the left instead right and then that would make it you know my head there instead of moving the camera so that's up to you or you can have at the bottom which is the default or the right that won't uh save unless you actually when you save it you might have to refresh that one for um to see the changes right but that's how you get it on the right so that's pretty much uh cool and um that's it that's how easy it is to work with with next onward view and with vs code um and i think i've pretty much covered everything i don't think i've anything else set up uh different so um i don't know do you have any other questions or doubts as to how how i how i code and how everything's set up if you do let me know and if not i will go back to work and get some more videos more videos coming i'm working on the twitter cards for the search engine optimization and things like that so that's what's the one coming next i should have that finished uh very very soon um and yeah like i i really do encourage you as well to um to read up on like the vs code um on the vs code user guide i mean it's it's pretty big right let me put that page over here oh i can't because it's like let me go over there that's better and then oh where'd you go yay there we go so this page here has got like so much information it's like literally um tips and tricks and like i encourage you to read the documentation of visual studio code so if you're new it's the first time using it especially if you're new to programming um this is going to tell you so much and it might be might tell you too much but there's a lot of things i don't even know half the stuff in here but you know if you wanted to change the theme for example it will tell you how to do it and it's really really easy and yeah just like do check them out and do play around with your settings and and like i said you know change your settings at one level or or change them at project level by putting a vs code vs code file and a settings.json and then you can kind of like play with these as much as you want and you can turn like prettier off if you wanted to uh very easily then just at that particular level that particular page as well okay i think i've covered everything um and if i haven't then just send me a message on twitter and i'll try and help you out and that's pretty much it i hope that was helpful and i will see you all again in the next video whenever that way may be uh take care everyone have a great day morning evening night and um and yeah keep working hard during the week see you all soon bye

Channel: Debbie O'Brien

Views: 1,906

Rating: 5 out of 5

Keywords: vs code, web development, vue tutorial, nuxt js tutorial, nuxt js, nuxt

Id: sq9bK3VGw0I

Length: 27min 40sec (1660 seconds)

Published: Tue Nov 24 2020