CODEWITHSUNDEEP
visual-studio-codecode-formattingprettier
Sohail
Sohail

Reputation: 2332

configure prettier to push curly braces on new lines & not clear empty lines

I am using prettier with VSCode, How can I configure it to format my code like this : 

function test() 
{

   if() 
      {

         MYCODE GOES HERE;

      }

}

I want the { and } on new lines, and an empty line after { and before }.

Currently, it moves the curly brackets to same lines if condition or function name, and also remove the empty lines after/before { and }.

Upvotes: 17

Views: 35343

Answers (3)

kai_onthereal
kai_onthereal

Reputation: 488

The default JavaScript formatter works well

Go to the settings icon, bottom left "gear cog" and search javascript new line and enable both for Control Blocks and Functions

Javascript new line options in Settings

Mac: option + shift + f is the format key binding, but initially will bring up the formatter configure dialog. If you haven't configured you formatter, click on configure and select the Javascript formatter (vscode) at the top of your editor.

Code should look like this:

    function toggleCameraFacing()
    {
        setFacing((current) => (current === "back" ? "front" : "back"));
    }

    async function handleRecordVideo() 
    {
        if (recording)
        {
            camera.stopRecording();
            setRecording(false);
        }

        try
        {
            const video = await camera.recordAsync();
        }
        catch (err)
        {
            console.error("Video Recording has errored.");
        }
    }

    if (!permission)
    {
        // Camera permissions are still loading.
        return ...;
    }

    if (!permission.granted)
    {
        // Camera permissions are not granted yet.
        return (
            ...
        );
    }

Upvotes: 0

ultraGentle
ultraGentle

Reputation: 6319

Prettier is considered an "opinionated" formatter, which means it doesn't let you choose things like that. If you want more control over the formatting, you can use a different formatter.

The built-in VS code formatter allows you to do what you're looking for, just search the settings for "function new line" and similar options.

There are of course many other formatting extensions available in the VS code marketplace as well. Whichever you choose, you will have to select it has your default formatter in your VS code settings.

Upvotes: 25

GlyphCat
GlyphCat

Reputation: 180

As mentioned in this answer, VS Code's formatter itself works quite well, but if you want this to be part of workflow, then using ESLint might make things easier. There's a rule called brace-style.

You can then run eslint ./path/to/your/file --fix to format your code, or eslint . --fix to format code in the entire project directory.

Disclaimer: I use ESLint for code formatting most of the time and it works for me. I actually use it to find & fix problems too so it's like killing two birds with one stone, but note that ESLint is more about finding problems in the code and fixing them, so using ESLint just for code formatting might not be the best idea.

Upvotes: 1

Related Questions