Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Prettier Config

trailingComma: es5 (default)

https://prettier.io/docs/en/options.html#trailing-commas

When set to none...

  • Often forgetting to add a comma when adding entries to an Object.
  • Commenting a property in an object currently removes the comma from the property above it.
  • Moving the last property of an object up requires an extra step to add a comma at the end.
  • Messes up Git diff and sometimes creates conflicts.

jsxBracketSameLine: false (default)

https://prettier.io/docs/en/options.html#jsx-brackets

When set to true...
Given the following code:

    return (
      <Box
        className={classnames(classes.root, className)}
        isElevated={this.state.isElevated}
        onMouseEnter={() => this.setState({ isElevated: true })}
        onMouseLeave={() => this.setState({ isElevated: false })}>
        <Grid container>
          <Grid item xs={12}>

I wanted to comment out onMouseEnter and onMouseLeave, resulted in broken code:

    return (
      <Box
        className={classnames(classes.root, className)}
        isElevated={this.state.isElevated}
        // onMouseEnter={() => this.setState({ isElevated: true })}
        // onMouseLeave={() => this.setState({ isElevated: false })}>
        <Grid container>
          <Grid item xs={12}>

This is a non-issue with the default false setting:

    return (
      <Box
        className={classnames(classes.root, className)}
        isElevated={this.state.isElevated}
        // onMouseEnter={() => this.setState({ isElevated: true })}
        // onMouseLeave={() => this.setState({ isElevated: false })}
      >
        <Grid container>
          <Grid item xs={12}>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment