Javascript: A Problem with Prettier Formmating

Question

I have an annoying problem with the Prettier formatter. Whenever I type in an object, array or a JSX component, there's a line break that I can't find a way to disable.

For example, trying to type a long mongoose enum:

I want it to look like this:

genres: {
    type: [String],
    enum: [
      'Pop', 'Rock', 'Disco', 'Jazz', 'Hip Hop', 'Folk', 'Blues',
      'Metal', Country', 'Classical', 'RnB', 'Soul', Dance', Funk','Reggae'],

But Prettier always formats it like this:

genres: {
    type: [String],
    enum: [
      'Pop',
      'Rock',
      'Disco',
      'Jazz',
      'Hip Hop',
      'Folk',
      'Blues',
      'Metal',
      'Country',
      'Classical',
      'RnB',
      'Soul',
      'Dance',
      'Funk',
      'Reggae',
    ],

JSX example: I want it to look like this:

  <SomeElement prop1="bla" prop2="bla" prop3="bla"
     prop4="bla" prop5="bla" prop6="bla" prop7="bla" />

But Prettier formats it like this:

  <SomeElement
    prop1="bla"
    prop2="bla"
    prop3="bla"
    prop4="bla"
    prop5="bla"
    prop6="bla"
    prop7="bla"
  />

Am I missing anything, or is this just not possible with Prettier? I tried changing the 'Print Width' option, but it didn't help much because whenever i pass the print width length it will break lines like this again.

score 0 · Answer 1 · answered Jul 14 '21 at 06:26

You can override the prettier rules,

Example:

{
  "semi": false,
  "overrides": [
    {
      "files": "*.test.js",
      "options": {
        "semi": true
      }
    },
    {
      "files": ["*.html", "legacy/**/*.js"],
      "options": {
        "tabWidth": 4
      }
    }
  ]
}

If overriding rules for specific JS files doesn't help with the way you wanted then try having your own configuration published to npm registry or use it from GitHub directly

module.exports = {
  extends: 'prettier-config-mycustomconfig',
  bracketSpacing: true,
  printWidth: 100,
  semi: false,
  singleQuote: true,
  trailingComma: 'all',
};

or simply module.exports = require("prettier-config-myownconfig");

Javascript: A Problem with Prettier Formmating

1 Answers1