42 WebStorm Tips and Tricks

hi everyone and welcome to today's webinar organized by JetBrains I'm Ekaterina rebook ha Webster and product marketing manager and I'll be your host today the topic for today's webinar is for YouTube up some tips and tricks our guest today is Paul Everett our developer advocate for Webster and PyCharm Paul did a two-part react typescript and TDD webinar late last year hi Paul hey Kathy I'm I tell you I've been looking forward to this when you and I did that poll on the web store and Twitter and we got all those great ideas I've been thinking about it the whole time so today we are covering productivity tips for using Webster room can you talk a bit about what you're going to show please sure when we go to conferences we're in the booth and we're showing things people come up and say oh that thing you just did what is that that looks so great because people want to learn their tool they want to get good at using their tool to help them stay in the flow and so we've made a compendium of these tips and tricks that we're going to show today we also have them on a website the URL is down here called the webstorm guide we'll be showing that a little bit later the tips are roughly in the categories of how do I set up my webstorm personally and most of these tips are things that I personally use how do I set up my webstorm so that I can get in the flow turn off some of the tools focus on the code how do i navigate that's probably the biggest one that we'll be showing today navigating instead of using your mouse instead of thinking in terms of files use some of the other ways to navigate around then we'll go over some other tips on things like running code running tests and then we will get into a special feature at the end Kathy I think this was really your idea solicit some input and then show some tips from the audience at the end yeah so as Paul mentioned some of the tips we are going to show today are available in the webstorm guide and you can see the URL here on this slide and will also paste link into the webinar chat to window so and we're also going to show some tips that we our seasoned webstorm users share it on Twitter so when are you going to show those poll we're gonna do those near the end we're going to basically I'll show 41 and then tip number 42 will be 10 because that's cheating but we're going to show some of these directly in the guide instead of me showing them in webstorm in the IDE so you can see a little bit about the guide what it offers how its organized great thanks let's begin then alright let's have some fun we're gonna do 42 webstorm tips and tricks I'm gonna start not in Webster I'm gonna start in Firefox showing this site that we were just talking about the webstorm guide and it has tips that are organized by technologies you know things like jest and then by topics things like debugging and testing and stuff like that so you can see a whole bunch of tips and when I get off my butt and enter some of the other ones that Kathy has lined up for me we'll probably be around a hundred tips on this some of the ones you'll see today are in here certainly the ones that we will do in the bonus overtime segment at the end are queued up there as well so let's go ahead and start I'm gonna switch over to webstorm we're starting in the position of create react app and when you run create react app and I actually ran this from inside webstorm new project and I did react out this is the out-of-the-box experience from create react app I don't think anything I'm gonna show today is react specific it's just a helpful starting point for a reasonable project so this is the out-of-the-box experience with dorkula our dark theme let's begin with the most important thing to remember find action command shift a I want to find something I can't like for example I want I want to find keep the word keyframe somewhere in my project and I can't remember find in path I can't remember the shortcut I can't remember it but I can't remember a lot of things some get Nolan I'm a man of a certain age fine action is the way to not have to remember any other action you know this one and it will do the path to all the actions for you I will also point out that I have plug-in called presentation assistant and I've got it turned on for description of actions so when you when I do a keystroke like fine action you'll see in the bottom what that sequence is for the different platforms so fine action is a way to it's the one ring that rules them all if you don't want to have to learn everything just learn that one let me go into the next one reduce clutter by disabling tools this is kind of the IDE look this is this is the default layout that you get in webs form but once you start to learn to use the tool and most specifically stop using the mouse so much what it turns some of this stuff off so my mode is to go to appearance I'm going to turn off the toolbar I'm going to turn off the tool windows bar I'm going to turn off the navigation bar I'm going to leave the status bar because I like getting to the the branches but you can also turn that off as well and this kind of gives you a little bit of a stripped down layout and we're going to show a little bit more as we go along this is going in the direction of some of the other modes that we have like distraction-free mode or Zen mode which really turn everything off but this is about as far as I go until I do the big one for many of you this is going to be a step too far experiment with it see if you like it turning off tabs and I'll show it and I'll do it and then explain why you should care about it I just showed find action which also gets you to preferences so for example tab placements top is what I currently have set up you see how I'm doing speed typing where I don't have to type all the words I could say tap Lata and get to that but what I really want is tab placement none from settings and what's cool is I can actually adjust that setting here in the find actions panel by hitting enter and there go the tabs and if I want to put them back on the top I could hit error and if I wanted to put them back on none I hit enter makes it really easy to switch back and forth between having tabs and not and having not having tabs I'll turn the mark down rendering off as well I'm gonna take a little bit of a tangent and go on a philosophical mode I turn off tabs because there's better ways to do navigation you want to focus on the code and on one hand you think I'll open a bunch of tabs and that's how I will switch between them so that I don't have as much work to do to go from one thing that I'm currently working on to another thing that I'm currently working on the problem is you get like tab amnesia or so I'll say where was that tab I've got so many times the help becomes a hindrance turn off the tabs and use other ways to navigate code tip number six is going to be the one where we really talk about that so we disabled tabs the first best way to not have to use the mouse is jump to recent file command II probably the one that you will use the most most of you are probably already using it it brings up a list on the right of the files that you have recently visited and so for example I can temporarily you my mouse and go to the CSS file I didn't have to go expand all the folders to get to it I could do recent files and for example go to fjs now the one that happens the most is the one you were just sitting on we all do that a lot we toggle between one pound another so that is simply command e enter command e enter going back and forth between two but if the one you want to go to is a little bit further down don't have to use the mouse don't even have to use the cursor to go up and down you can use speed typing again index J s IND J limited everything to show just the one that mattered and I hit enter I want to go back to where I was command e enter we can use recent files to to jump between things we can also to jump between files of code that I'm working on but clever people might have noticed there's two columns here files on the right what's that on the left those are the tools that we just turned off in tip number two we reduced clutter by turning off the window that showed all of our tools project etc and that's because it's really easy to get to them I can start speed typing and go to project or the one I do the most I'm sitting you're coding I need to go the terminal command ET ER enter I'm in the terminal that's from recent files which also gets you to your tool windows as well and on Web Store they got a neat thing called recent locations this one's a cool one I'm not going to show it today but I suggest going and looking at the blog posts and the webstorm guide to get more information about locations instead of files now the one that I promised before navigate to symbol when we turn off the tabs that helped us to stop thinking so much about files we are an IDE you might have noticed we index things we index things to give you the value of moving around your enormous create react app code base by symbols instead of final names or strings so for example I when I'm sitting here on in XJS and I think hey I want to go to app dot J s I don't reach for my mouse I don't reach for something else pointing to apt ideas I don't think about the file and where it's stored in instead I do find by symbol navigate go to symbol on the Mac its command shift o and I start typing the name of the symbol that's the name of the function that's over there and I hit enter and well in this case it went to the CSS file well that's prequel this something that's a good point is that we index symbols not just as strings in code we index them in JavaScript as well so this is the one that I wanted to jump to and it jumps to not it doesn't open the file it jumps to the it doesn't just open a file it opens the file and jumps to the line where that symbol is implemented declared created so again if I'm back on index dot JSP come over double click I could come up to here and command B to navigate to it I could go to the file name and command B to navigate to it but the fastest thing is navigate by symbol app and select the one that's in the J's file all right navigate the symbol means we can turn this off we don't care about the project tree anymore we're navigating by symbol however sometimes you actually need to work with a file for example creating a new file renaming refactor rename whatever I turned off the navigation bar which is the pretty cool way to not have to use the project tool window this navigation bar is an underused asset but when it's off what do I do I activate it temporarily command up brings up a floating non-disruptive non-distracting version of the navigation bar instead of it being on the screen all the time even when I don't want it I just slummin it when I need it and if I want to get rid of it I hit escape and it goes away what is this navigation bar let me do I can move around I can go down I can go I can go back up I can do all of those things and so for example I could just start typing speed typing to narrow my search to things just by up arrow and then start typing I could also do things such as make a new file right here in that directory I could activate it go up to and create a new file there I can go up to and delete this refactor delete create all kinds of things move around in the tree activating the navigation bar on demand and get ready getting rid of it on demand is a much more non-disruptive way of working with files than leaving this on your screen all the time when I was navigating to symbol now you might have spotted me do something about getting back to my position let's talk about that real quick let's say I'm on indexed ijs and I'm gonna go on a bear hunt I want to find out what's behind the scenes on this symbol so I go to the symbol I'm looking around like okay this is a react function so I'll go down and react okay I'm in some typescript definitions that looks pretty cool and you know I'll click here and maybe I'll you know click on this and click on that maybe navigate to the definition of that and then I'll think oh oh what was I doing I can't even remember how I got here another thing you gotta go back maybe turn on the project tree try and remember what you were doing look at recent files trying to remember what you were doing you could instead use navigate back and this walks the path that your cursor took not the files your cursor took walks it backwards eventually reaching the top where you started but let's say you get to the top and you think wait wait wait wait wait wait alright there was this tight this kind of typescript definition down there that I wanted to look at what was that I can navigate forward and see oh yeah component class and functional component oh yeah those are the two component types so navigate by symbol is a big one using recent files as a big one but this navigate forwards and backwards when you're going on an exploration is a useful one as well I'll do a couple more and then I'll see if we have any questions we did actually navigation bar and navigate files and open files with the navigation bar if I want to go to for example the CSS file just navigate and hit enter I could go back up to the readme all with activating the navigation bar and don't forget that these things I'll go back to here these things can be speed searched so I could say I n dot J s to filterless and this is a common thing in lots of places in the IDE as we have whenever we're presented with a long list don't get out your mouse don't get out your cursor arrow just start typing and it will filter the list intelligently until only the thing you're interested in is visible alright and I'd like to also remind that some things that you expect to work in other places also work here so for example I could do find in path by going somewhere for example here and finding in path starting at that route because that's where I did the activation using the navigation bar okay before getting into editing some code I will stop there and seek a Thea if we have any questions yeah we've actually got a lot of question and the first one would be why did you choose find action and not search everywhere because a lot of people you search everywhere and find it more convenient to use so why that's a really good point search everywhere has become very popular by search everywhere they mean shift shift and what that does it brings up this panel but instead of putting you on one of these narrowing to a smaller pile it puts you on the big pile organized and grouped by these kinds of things I I do it because when I'm looking for an action I want to find an action I don't want to accidentally stumble across something that is a symbol in one of the 2000 packages and create react app so for me specifically for find action I don't want a lot of false positives it has a higher signal-to-noise ratio okay thanks and the other question was about using switcher for navigation would you recommend Houston's feature what about it and you showed recent files instead of red circle yes yeah it's one of those where the thing that I learned is the thing that is stuck in my brain I really should change to using switcher war do you know if we have a tip in the guide for it yeah we do we should have a twist okay let's test you on this all right here you go using switcher for navigation here is what it looks like this is so cheating isn't it it lets you quickly chomp turmoil in its control tab to activate it right yep all right good any other questions there that's it for now the others these are good questions everybody please keep asking them adding a new line this was one that I see happen a lot with people that are kind of starting on programming and let's say I'm on this line and my cursor is in this spot and I add a new line after this so I see things like earlier in ER or if they're a little bit smarter they know maybe the keystroke sequence to go to the end of the line and then hit enter don't do that use smart new line shift enter and it will from the middle it will start a new line and put your cursor at the correct indentation for that context so for example if I wanted to add a span after this I wanted it to be indented and my cursor is in the middle of this symbol for the HTML tag header shift enter puts me in the right spot the same is true for adding something before this is what I'm still bad about my lizard brain from 70 years ago when I started programming it still does this end over up answer up I do that a lot when really what I should do is command alt enter or start new line before and it has the same kind of semantics about indentation it does the right thing so smart new line is one to save yourself some keystrokes and this isn't just about saving keystrokes this is about staying in the flow which is something we talk about a lot so that your mind can not get distracted and lose its focus on the code let the tool do the janitorial work for you as much as possible for example moving a chunk of code so let's say this header I want to kind of do some of that react stuff and and move it out to a little component or a little constant or something like that so that this Chuck isn't so long and I might be tempted to do select cut type it pace or even yeah I don't need that and then what do I have to do go back down and insert it instead several things that we can do differently about this first is selecting a block instead of taking your hands off the keyboard and making with your mouse a selection you can hit alt up alt up all it's up wait can we hit it one more time sure we can to get the new line and then cut let's say that I kept going how far can I go with alt up well i can select the whole file and then realize that's a mistake and hit alt down to shrink back to a little bit closer to what I was looking for so let's say this is what I was looking for yeah I'll say that's what I was looking for and before what I did was a command X to cut and then command V to paste go to the direction I want it instead I can with the mouse so I start with the keyboard alt shift up I can move the selection up and down I can move it all the way to the outside scope if I wanted to but instead I can put it here and then do Const header equal now maybe there's an even better way this is a little bit off off road on this that will also save me from the mistake the problem that I'm seeing right now which is undo takes a while if I've got this selection refactor this is what we had JetBrains are great at refactor introduce variable I'm going to call this header and look it made a variable and assign that it kind of inferred that I wanted it called header because that was where I was good job webstorm on that one and it left behind the insertion the usage of that variable one last awesome bonus part I want to put it back it's all one editor transaction so I can put it back the way that it was all right though I said command II was the one that you use all the time well there's one that you use more all the time than that imagine you've got some crapoly formatted code over and over little problems here and there oh and let's say I've got my imports and this next one stuff like that you may be tempted to go fix this manually life's too short for that let webstorm be your janitor reformat code is one that you will do over and over and over and over eat it refit fixes the annotation fixes the spacing issues it does all of these things and it does it under your control you can go to code style and for example in JavaScript you could set that lizi JavaScript you could set that punctuation to always use semicolons at the end or you could say don't use semicolons at the end and when I reformat it takes the semicolons out let me put that back since that's way that create react app shipped with semicolons and then when I reformat it puts the semicolons back in you might also notice that it left a space here because I put a space and there are some policies related to optimizing imports under code style that it will respect so sorting of things when to put new lines when to group them together when to split symbols from multiple imports from the same across multiple lines all those things are still under your control here's one leading to an even better one optimize imports so we just showed that a little bit and let's say I had it like this when i optimize imports it will take things in this case i could have had a better example with the organizing of the Soaring and things like that but it will for example let's say I had react and what else can I get from there oh yeah this well I didn't actually make this a functional component I didn't do FC this is a type script or whatever and so this is an unused import and yes let's mad about it webstorm is mad about it and then I gotta stop what I'm doing go up and fix it oh that's just driving me crazy optimise imports will remove unused imports amongst the other things that will do let's take a look though at the really really good one let's say I have not imported my app yet and I'm writing this from scratch and I get to this part and I'm like okay oh I gotta stop let me scroll all the way up to the top of the file what it's a default import what am I gonna cut out ok I'll name it app what was I'll even remember where it came from is it from app all right great if you solve that and now I got to remember what I was doing instead let the IDE generate your import for you in fact let it autocomplete and generate the import all at once I get to this point webstorm no it's indexed all the symbols in my project so it knows this symbol is out there somewhere I don't have to care what file it's in I just know it's there I hit enter it autocompletes and it generates the import for me if I was like 300 lines down at the bottom of the file that would be really handy so that I didn't have to stop what I was doing lose my place and try and come back to it I will do let's see I will do two more and then we'll take a question the next one is if you're into es6 classes either in typescript regular javascript and your writing called rectangle and it's got a constructor and it's going to take Heights and width and now you got to do this part of go inside the braces self dot hides itself don't with equal width would it be nice if the IDE would do the work for you alt enter and then initialize new fields from parameters and it will do that but it's also going to do one other thing I will pause for dramatic effect see if you can think about what it's going to do do I hit enter and it's asking me which two and now when I say okay not only does it do the assignment to this but it puts these little class level initializers there think of how much extra typing you'd have to do especially with it oops especially with a long argument list for creating instances of this class all right oh and that was a cool thing it's one editor transaction all of that typing is one editor transaction okay let me get rid of this and then do let's see one more and then take some questions this is another really cool one and I'm going to speak in terms of react but this isn't limited to react this is common it's not even limited to JavaScript and webstorm stuff it's across all kinds of programming languages you change your mind I don't want this called app I want it called my app so I'm sitting over here I've got a function called app it's got a default export app it's in a file named app thought j/s and then it's imported I don't even know where it's important it's imported in index dot JSP an app taught test I guess you know I could use the context menu and find usages and go find all of those places and fix it manually would it be nice if I change the name of the file and let the i de go find everything that uses it and fix it for me and do all the C via a VCS stuff for me so for example apt on GS I want to change it refactor rename I want to refactor the name of this file and rename it to my apt uh chance and I want the IDE to go find all the references to it and do the refactoring for me this is a cool thing there is a style in the world of react single responsibility principle where things modules should do one thing have one export with one main thing in them and they should all have the same name for the purposes of clarity we will offer when you rename the file we say hey you know maybe you want to change the name of the function to will do that for you as well will change it to my app and the export when I go back to the usage of it I see it's now import my app from my app and the the usage of it in the JSX changes to this component pretty cool you know what else is cool wait I made a mistake my app is dumb I wanted to go back to app oh no I gotta go find all the places in my project where I use this that's a bunch of janitorial work webstorm says it does the janitorial work for me will it fix it undo treats all of that work as one editor transaction undoes it and puts all the VCS all the get back the way it was don't believe me little go over and we see that the app was put back the way that it was I will mention I did this refactor rename from the implementation side you could also do it from the usage side I could be sitting here or here or even here and start the refactor rename call it my app it's going to say all the places it thinks to do it do it go back over to app yes it did it and I could undo the undo the refactor rename I think that I did my choices weren't good enough in that refactor rename pop-up that came up down at the bottom this one so it gave me a bunch of choices and then I just canceled out of that so but the point being you don't have to go to the definition of the symbol you can go to a usage of it we'll pause there see what kind of questions we have we've got a few questions sorry the first one would be what is a wizard brain you said that white what is green sorry could you repeat the question what is the laser brain you said something like that that there are parts of our brains that are below our conscious that we barely understand what they're doing so back when we were reptiles we have part of our brains that still control our behavior okay got it it just wasn't clear at psychology reference sorry okay and the other question was you said our symbols what exactly qualifies as a symbol in Webster very good point the things that you think are symbols such as symbols in JavaScript or symbols things that you might not think are symbols such as stuff in CSS you may have noticed the very beginning I accidentally stumbled across this as a symbol and then webstorm in our idea is to have support for kind of parsing things you wouldn't expect and getting symbols out of them and making them part of the IDE machinery so specifically things that we have parsed okay thanks and we also got a note from several users who said that they don't get the presentation assistant symbols for Windows and Linux so yeah they main you have to install a app so I'll show how we can go to plugins I say I have to plug in in in plugins you go to the marketplace and you type presentation assistant now Paul it's not exactly about that when you do an action like you when you use a shortcut don't try to use it for Windows and Linux it shows the symbols that are actually for Mac OS and not for Linux and Windows on windows control key with for example I don't know if that's a key map or custom key map or something like that kind of issue so I get them to follow up with us later okay thanks we'll just add a note with our Linux and windows shortcuts or go to our blog post later okay oh that sounds good for that that's that's it for now okay all right let's I'll try and speed up a little bit and get to the audience-participation part convert to an arrow function I'm sitting on an old-style function this is what create react app generated for me when I look at that and I think that should be an arrow function oh but now I've got to go and say cost and then app equals and then I'm here and I'm probably going to mess something up in there and look at multiple editor transactions would it be nice if the IDE could let me do alt enter and convert to an arrow function which it can and then you can undo it all in one editor transaction a lot of times you're debugging react with our good friend console dot log instead of using our debugger if I want to do console dot log I can type out console dot log I already made a mistake to see that console log I can put in some variable so for example let's say I had car cost year equal 2020 and I want to do year and see how much typing I had to do on that let's do all of that using this post fix notation not just for console not long so let's say I had 2020 and I wanted to assign that to a constant of year I could say dot Const hit enter now I'm invoking our post fix machinery and now I type in the value and I've got it great so what if I wanted to do an if based on year so I would say gear if yeh what if I want to do console.log of year year and then maybe log be kind of work indeed it does work so these postfix notation things are all defined in in settings we have some for typescript we have some for JavaScript for example you're doing in a weight this tells you what it is and then what happens before and after does the plus sign do what you think it does indeed it does you can create your own post fix notation symbol completion things and then here's a little bit of explanation it's also in the help system postfix notation is a far more civilized way to do common occurrences live templates or another we'll do that in the boat in the bonus round we talked a little bit about renaming symbols refactor rename and I change it to my app it goes and finds all the locations where that symbol occurs does the rename in some cases it will do a guided tour which we showed with the refactor tool window let's say I'm sitting on something this render function and I don't really know what it is what arguments does it want you know documentation of stuff like that I can put my cursor on it and I can do f1 and get some inline non-disruptive easy to dismiss documentation about the possible arguments and then what were their types and things like that in fact in recent webstorm I don't even have to do the f1 I just hover over it and I get that pop-up a lot better than having to click on it stop what you're doing go to the definition or even worse open a browser google search react tom render quick documentation very helpful what if I'm sitting in a function and I want to know what are its arguments command P gives me the parameter info or for example unregister wonder what it wants for parameters it doesn't take any parameters okay that's quick documentation and parameters running code so far we've been doing navigating and editing this is a create react app project it has in the package.json some scripts for start build test eject I want to run them but I want to do them in a kind of badass way I don't want to go to a menu or leave some toolbar visible all the time just so that I can run things two ways to do it kind of the old-school way which is what I still use is I temporarily bring up the run menu on Mac it's ctrl alt or in any defined run configurations or visible here whether temporary or permanent ones I can add a new run configuration I can also hit enter to run it or right arrow to do other things with it debug it edit it whatever a quick way to jump between run configurations and run things using the keyboard but there's also run anything which is as you can see I haven't been using it enough it is the action for what is it maybe someone in chat will tell me they run oh actually no we've got that in the guide let me switch over to it yeah we do Hobbiton think i'd all right we must have it with a name that doesn't match right have the right thing to search for it I'll continue run anything and again this is why fine action is useful because it lets you not have to memorize all the keystrokes won anything will provide a way to look in things like your npm scripts for build and you just start doing speed typing and then you can go find it or other little javascript command line things you have or running code and stuff like that run anything I think is becoming more popular than my way of doing it which is the old-school way this requires you to go set up run configurations first and that may not be as interesting maybe an even older school is to bring up the NPM tool window and just leave that visible all the time but that seems like such a waste of time and you generally have to use the mouse to go over and activate something so when you're running things there are other ways such as run anything or the run that I was doing to execute your code on to debugging so I'm going to bring up the test that ships with with create react app I split these into two for a reason that we will see a little bit later and I will first I'll run these tests so I'll run yeah I will show you what I did to be able to run tests I made a run configuration for gest so for example edit configurations and jest and I created this one configuration it is the thing that you get by default you don't have to type anything in in order to get this and so now if I want to run it run all tests I'm running the tests and they all pass but let's say I've got some really obscure error that you look at this enough times you don't tell the difference from HTTP and HTTPS and you're running your tests and it keeps failing I like how is that failing well debug it go put a breakpoint in your test and then one just one test and run it under the debugger and it will fire up and it will execute and it will stop on that line and you can look and see wait wait oh it's an s that's the problem perhaps though you still didn't figure it out you're like okay I want to poke around at this point in the execution where my breakpoint is stopped give me something interactive so I can keep poking until I figure out the problem I selected that and I want to evaluate expression using that and I get a result I could have typed it with autocomplete and hit enter and I can do other things such as define values that will then turn up higher up in the closure so then I hit continue to go on I see that I've got a problem I want to rerun this with fixing it rerun it but not under the debugger and now my tests pass so that's a little bit about debugging evaluate expression in tests I want to go into something that is a big deal for me about test-driven development I've went over this in my react tutorial I want to get my brain into testing mode and so I do that by splitting the screen vertically and on the left on the left I bring up the code that I'm testing on the right I have my test and on the bottom I have my test runner so that when I'm running things and when I'm poking around and when I'm making mistakes I have everything in front of me and my brain lets me focus on the task at hand you could even speed this up a little bit by editing this test run configure this run configuration and putting in - - watch also that it runs whether it's in a get change or not and then this will fire up the just test runner to run continuously and everything will be faster all right so that split screen without towns I split the screen into two but I did not go back to having tabs open which is pretty cool we ran a single test let's say I move on get out of the TDD mode oh yeah and I don't close that all right I just did some editing on this and let's say that I commit and I write a whole bunch of stuff and then I delete this in like two hours two days later I write a whole bunch of other stuff and then Armageddon hits I forgot to run my tests and now I've got now unscrewed how do I get back to where I was I can recover from I didn't mean to paste you I can recover from disaster that git won't save me from by using local history show history I can see going back a couple of weeks all the changes I might have made including this delete and putting things back the way they were so that was the editor transaction that I just did not the one before that as a note local history even works for deletes you delete a file you can go to the container and bring up local history and get it back creating a project from github let's say I want to go clone a project very quickly and have it open in my IDE I can get from version control go to get and bring up my Gatsby theme now I hit clone and it opens up everything in a new window if I want to put something into github it's a pretty similar thing we actually answered a question about it yesterday I can share a project on github rewording a commit message so let's say I delete this and then I commit and I say this was a mistake oh the irony and I commit as soon as I had come in I'm like oh my god did I really do that that I really make that mistake so what I can do is bring up hmm the get window go to my log get that come in right click on it edit the commit message and it's as if it never happened what if that was such a mistake it wasn't just the word mistake that was in sync the whole thing was a mistake if you haven't pushed yet then you can go do this revert commit undo commit so for example undo commit and I need to pick a place to put the changes I'll put it back on my default change list and poof we're back the way we were I'll pause for some questions and then we will do the last view you I'm still going through the questions so we all need some time let's do a pause a little bit later okay sure I will do the last couple and then before we do the audience participation part I'll stop for some questions all right we talked about the NPM tool window and I could run tests from there so I don't have to go to a terminal to type NPM run start we give you a way to browse and run and then have the output be in a tool window that's a very handy thing especially for people just getting started on front-end kinds of projects wrapping a selection with the tag let's say I want this to be a span save to reload well I could select it maybe delete maybe say span and then paste that's kind of dumb instead I can bring up surround with which has a couple flavors so command alt T surround with span enter and I could continue and put in things like class and stuff like that if you want the other flavor so I've got this and I could around within it and do span dot a container and it will add the class name so surrounded with tag is a very handy thing onto the audience-participation part and so what I'm gonna do on this I'm going to take a couple questions in just a second we're gonna switch over to Firefox and show you the tips for these and the place to find some of them instead of demonstrating them in the IDE so cats you do have any questions well I've just come across one question interesting one what about when you rename app to my app but want to rename collocated files like app dot test objects and app dot CSS if they're an automatic way of doing that - that is a damn good question I've never thought of that it's something that would be a good thing for the IDE to do and I wonder if we have a ticket for it if not let's encourage that questioner to get in touch with us and we'll make a feature request yeah I'll check that that's it for now ok audience participation so we're over here in the guide let's go over a couple of tips and plugins based on points that were raised in Twitter this is a great one especially in react where you're encouraged to refactor refactor refactor extracting things into small single responsibility principle components moving a function to a file you can select some code and then do a refactoring to extract that part into another file and so for example in react that would be something like I have this and I want to make a header and I could say refactor extract into a component and I have a choice between functional and class really handy scratch files this actually came up and with a number of people kudos to you for knowing about them and using them hey scratch file is when you want to do a little bit of experimentation but don't want to save anything that the file system certainly don't want to put it into get accidentally we have this facility called scratch files and you can make them you can give them a type and a name and they actually persist across projects multiple cursors this is personally this is paulie's I really should know but I don't this is my imposter syndrome thing which is why I'm chickening out and showing it in a browser instead of doing it if you want to do advanced editing of different kinds of rectangular regions we have pretty good multiple cursor support it's been there for years and years and years and gotten a little bit better over the years as well sitting on a string and you want to say this isn't just a string in JavaScript it's actually CSS and I won't autocomplete in there you can do language injections so for example this is going to be an cuss HTML kind of template yep and now I get syntax highlighting autocomplete all the things that you would expect from pug on to the question question 9 the way the suggestions suggestion lots of suggestions about using plugins the jetbrains IntelliJ IDEA platform has a lot of plugins some of them are unique to webstorm but a lot of them work in all of them for example if you like them we have a very mature very actively maintained plug-in to give you them style keyboards and modes and things like that inside the IDE want to move around your code in a really smart way ace jump which is popular in some other editors there's a plug-in for that want a lickable super sexy theme the material themed UI is one of the most popular ones we have actively maintained it actually has different varieties of it so that you can customize it and get different sub themes if you like the way some other ideas use the scroll bar to give you kind of a radar of your code code glance provides that and then the last one before we switch back over to cassia and get out of here if you just want something cute and you want your progress bar to be a radioactive kitten the nyan progress bar is astonishingly popular okay that's it for the presentation I'll switch back over to Kathy if there any more questions or if you want to go ahead and wrap up well we've got one interesting question what and a lot more but we'll follow up later the question is what are your favorite plugins power zero zero the problem for me is I have to give webinars and if I give a webinar and it's in something highly custom or I'm recording a video or something like that so I have unfortunately had to stay very close to the out-of-the-box experience but other than presentation it says that there are a few that I've used quite heavily over the years that it pained me to have to to get rid of them what we should do is get some plug-in authors on and get them to talk about some of the plugins because there's a lot of value out in the community that's a good idea actually okay thanks for this tips and tricks workshop Paul so as I said we'll get back to you with more answers to the question that were asked later in a follow-up email if you have any questions later please reach out to us by email or social media if you'd like to get more information on Webster please go to our website at chat brains that come slash webstorm we love your feedback on this webinar so please feel free to count that's on Twitter or in the after webinar survey the recording will be available on our YouTube channel soon if you haven't already please check out our web store blog where we'll publish a follow-up blog post about this webinar as well on our blog you can find the latest news about releases in addition to some educational resources today thank you very much for joining us and hope you have a nice day

Channel: JetBrainsTV

Views: 27,122

Rating: 4.9593496 out of 5

Keywords: software development, developer tools, programming, developer, webstorm, javascript, frontend development, webinar, webstorm productivity tips, webstorm tips, webstorm tutorial, customization, typescript, web development, intellij idea web development, react, webstorm shortcuts, webdev, angular, vue, webstorm productivity

Id: x8y_6Gg28GI

Length: 60min 3sec (3603 seconds)

Published: Thu Apr 30 2020