如何在VSCode中覆盖react-beautify设置？

Question

I have a React Native project. In Visual Studio Code, I use the react-beautify add-in to beautify my code on the fly. The add-in uses a tool named prettydiff internally.

The only thing it does that I don't like is that it condenses

import { Componentname } from packagename

to

import {Componentname} from packagename

The correct prettydiff setting to change this behaviour is to set brace_style to collapse-preserve-inline .

However, I can't get prettydiff to accept the change.

I tried creating a .jsbeautifyrc file in my project's root directory, and added:

{
    "brace_style": "collapse-preserve-inline"
}

but this doesn't seem to work: the behaviour I don't want is still happening.

How do I do this correctly?

Answer 1

I have VS Code in Mac v1.8.1 and if you open a Folder with a .jsbeautifyrc you could override the properties, in your example if you create a folder with 2 files:

index.js

import {code} from 'source';
import {otherCode} from 'source';

.jsbeautifyrc

{
  "bracepadding": true
}

you will get the next result after run the beautifier:

import { code } from 'source';
import { otherCode } from 'source';

Answer 2

Yes there is a bug,the .jsbeautifyrc file doesn't seem to be read in the react-beautify add-in.

The settings mentioned during the setup of the addon don't seem to work and also I have tried installing prettydiff in my system and also the esformatter-jsx and changed the configuration but it doesn't read the files

Workaround

You can try the beautify add-in with the following repo here .

and add the file .jsbeautifyrc to your file tree structure ,and the options mentioned in the settings page work in it.

The project has been updated to the latest js-beautify code version 1.6.8 with the support of the jsx support as mentioned in the screen shot

and also the working example