Prettier config for javascript code indenting

Question

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
 }

Answer 1

prettier是经过优化的，因此您无法配置它重新格式化代码的方式：您只需要接受prettier制作的缩进即可：)

Answer 2

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

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

Answer 3

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

Answer 4

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
 }