Visual Studio Code Question posted in
View the official documentation.

Visual Studio Code – How to enable this automatic line break feature in VS Code?

I am learning JavaScript through some tutorials on Udemy. The tutor in the videos is teaching chaining methods in arrays and as soon as he saves the code, the code gets formatted neatly as you can see in the image. Each method goes into a separate line automatically. This is just one instance and such smart formatting is happening throughout the code at various instances. How do I do this?

I tried the Alt + Z and everything that keeps coming up when I search for a solution for this problem. But I am not getting any solution anywhere. Maybe I am putting incorrect keywords because I don’t know what this feature is actually called. Someone please help. I have to manually press Enter at every step and have to format my code so that it looks clean. It’s time consuming.

IMAGE

Tags:

2

Answers


  1. 0

    Most probably the tutorial you are using on udemy would be using VS Code. And there is very famous extension called Prettier. You should install it and restart the IDE.

    Also you might need to change the formatted settings. But first try this and let me know how it goes.

    Login or Signup to reply.
  2. 0

    You need a formatter like Prettier. You can install it directly via the VS Code Extensions tab. Then you can set up several configurations for changing the behavior of how prettier formats your code. These configurations belong in your user settings, which you can access via CMD + , -> click the little icon in the top right corner of VS Code to open the user settings in Json View

    Example Settings

    "editor.defaultFormatter": "esbenp.prettier-vscode", // sets prettier as default formatter
"prettier.enable": true, // enables prettier
"prettier.tabWidth": 2, // define the tab width
"prettier.trailingComma": "es5", // automatically adds a commas where they are supposed to be, based on the JavaScript ES5 Syntax

    And there are many many different settings, that you can explore, in VS Code when hovering over one, it also explains what the setting is doing.

    I can also recommend having a look at this one. It’s really beginner-friendly.

    Happy Coding 🙂

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search