我想知道如何防止 Prettier 以这种奇怪的形式格式化我的 js 代码

Question

I started to use Prettier inside my Microsoft Visual Studio Code (MVSC), but, when formatting a javascript file, I get some strange formatting.

For example, if I have this code:

    if ($("#epgprogramdescription" + channelListIndexOffset + ":nth-of-type(" + (programListIndexOffset + 1) + ")" ).length) {
        $("#epgprogramdescription" + channelListIndexOffset + ":nth-of-type(" + programListIndexOffset + ")").removeClass("epgtablerowselected");
        $("#epgprogramdescription" + channelListIndexOffset + ":nth-of-type(" + (programListIndexOffset + 1) + ")").addClass("epgtablerowselected");
    } else {
        programListIndexOffset--;
    }

It get it formatted as:

    if (
        $(
            "#epgprogramdescription" +
                channelListIndexOffset +
                ":nth-of-type(" +
                (programListIndexOffset + 1) +
                ")"
        ).length
    ) {
        $(
            "#epgprogramdescription" +
                channelListIndexOffset +
                ":nth-of-type(" +
                programListIndexOffset +
                ")"
        ).removeClass("epgtablerowselected");
        $(
            "#epgprogramdescription" +
                channelListIndexOffset +
                ":nth-of-type(" +
                (programListIndexOffset + 1) +
                ")"
        ).addClass("epgtablerowselected");
    } else {
        programListIndexOffset--;
    }

Any way to configure Prettier to maintain the original formatting?

Thanks.

Answer 1

Prettier gonna always try to give line break your code if it exceeds your print width configuration.

You can change that by accessing vscode settings

1. Go to File -> Preferences -> Settings
2. Search for "Prettier"
3. Look for configuration called "Prettier: Print Width"
4. And change it to suit your needs !

Give it bigger value if you want your code to stay in the same line. Prettier only break your code into new lines if it exceeds the given configuration