Reformat Code to Fit the Screen

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet
Published 5 years ago
Updated 3 years ago

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.

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.

egghead
egghead
~ 16 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today