Search code examples
reactjsvisual-studio-codeprettierformatter

How do I make prettier keep the component's props on a single line?


I am using the VSCode plugin Prettier as a formatter for my jsx code. when it runs, it makes every props takes a line on its own

const Component = ({
    prop1,
    prop2,
    prop3,
    prop4,
  }) => {
    return ();
}

How do I make it keep them on a single line like this:

const compA = ({ prop1, prop2, prop3, prop4 }) => {
    return ();
}

Solution

  • Prettier can be told to ignore certain portions of code by inserting a comment // prettier-ignore just before that portion of code. However, if used in this case, it makes it ignore the whole function, which is not what's desired.

    So maybe something like this would be acceptable:

    const compA = (
      // prettier-ignore
      { prop1, prop2, prop3, prop4 }
    ) => {
        return ();
    }