Pick a Lesson Title

Teach Step-by-Step

Show First, then Maybe Explain

Remove Distractions

Avoid Intros and Outros

Stay on Topic

Guide Their Eyes

Prepare to Record - Screen Resolution and Mic Check

Record One Thought at a Time

Edit with Ripple Delete

Reformat Code to Fit the Screen

Record Badass Screencasts for egghead.io

When making your font sizes large, your code will often get to long to fit on the screen. This lesson shows you how to use "word wrap" or "prettier print width" to adjust your code to fit within the editor.

https://app.egghead.io/api/v1/lessons/egghead-reformat-code-to-fit-the-screen/subtitles

Instructor: [0:00] You will often run into the scenario where your code is too long or too wide to fit on the entire screen so this part is cut off, but you'd prefer to show it all. One approach you can take is turning on word wrap. Then the lines will wrap around once it gets to the edge. You'll see that it automatically just wraps around to the next line.

[0:19] This is not reformatting your code. It's just changing how your editor displays the code. This can look a little unnatural. If you prefer to actually format, you can see how far your editor goes over. Like I'll click right around there. If you open up a goto line command, hit enter, you'll see that the current column is 48.

[0:41] We can use that number and go into our settings and search for print width, which is a property on Prettier. We'll put in our number of 48, hit save, and then go back into our JavaScript file. Hit save here. Now our code is reformatted to match a width where it locks down there and reformats according to that style.

[1:04] For example, with an even smaller print width, like right here, I could check the goto the line. It's column 27. Come into here. Put in 27. Then you'll see when I hit save now, we have a very tightly formatted block of code.

Reformat Code to Fit the Screen

Share this video with your friends

Course

Record Badass Screencasts for egghead.io