CODEWITHSUNDEEP
javascripttypescriptprettier
Steve
Steve

Reputation: 14912

Prettier config for javascript code indenting

I am using Prettier in Visual Studio Code for formatting.

Normally, it works great in my JS/TS files. But it insists on wrapping code like this onto single lines:

trigger('myInsertRemoveTrigger', [
  transition(':enter', [
    style({ opacity: 0 }),
    animate('5s', style({ opacity: 1 })),
  ]),
  transition(':leave', [
    animate('5s', style({ opacity: 0 }))
  ])
]),

becomes like

    trigger('fadeInOut', [
      transition(':enter', [style({ opacity: 0 }), animate('.5s', style({ opacity: 1 }))]),
      transition(':leave', [animate('.5s', style({ opacity: 0 }))])
    ])

Which I find harder to read. I've looked at the available options and don't see anything related to this. Can I configure this somehow?

Currently, my .prettierrc is

{
  "printWidth": 120,
  "singleQuote": true,
  "useTabs": false,
  "tabWidth": 2,
  "semi": true,
  "bracketSpacing": true
 }

Upvotes: 1

Views: 897

Answers (4)

Priyesh Diukar
Priyesh Diukar

Reputation: 2142

Just add a comment after the first element of the array.

var a = [
  1, //
  2,
  3,
];

Upvotes: 1

Sachit Shetty
Sachit Shetty

Reputation: 123

From what you are describing, it sounds like you are talking exactly about 'print width'. Try decreasing the 'print width' to 80 or less. Maybe 50 depending on what your preference is.

{
  "printWidth": 80,
  "singleQuote": true,
  "useTabs": false,
  "tabWidth": 2,
  "semi": true,
  "bracketSpacing": true
 }

Upvotes: 0

ilia
ilia

Reputation: 1333

I'm afraid the only thing you can do is reduce printWidth.
But that will obviously affect the rest of your code as well.

Upvotes: 0

Julien Deniau
Julien Deniau

Reputation: 5040

prettier is opiniated, and thus you can not configure the way it does reformat your code : you just have to accept the indentation made by prettier :)

Upvotes: 1

Related Questions