VSCode jsx expression formatting

Question

Hi I have a format in my existing code I want to change it to a different format, but cannot understand how to do it? if there is any eslint or prettier rules please suggest: The current format is:

                    {this.state.creatingNew && (
                        <Button color="primary" variant="contained" type="submit">
                            Poslať
                        </Button>
                    )}
                    <Button size="large" color="secondary" variant="contained" onClick={() => this.cancelEditing()}>
                        Zrušiť
                    </Button>

My desired format is:

{this.state.creatingNew && <Button color="primary" type="submit" style={{ width: '140px', marginRight: '10px' }}>Poslať</Button>}
<Button color="danger" type="button" onClick={() => this.cancelEditing()} style={{ width: '140px', marginRight: '10px' }}>Zrušiť</Button>

This is my .prettierrc.json:

{
    "tabWidth": 4,
    "useTabs": false,
    "semi": true,
    "bracketSpacing": true,
    "jsxBracketSameLine": true,
    "singleQuote": true,
    "printWidth": 140,
    "trailingComma": "all",
    "arrowParens": "avoid",
    "proseWrap": "never"
}

score 0 · Answer 1 · answered Aug 23 '20 at 13:58

0

Prettier is opinionated by nature so if you are unable to tweak it by changing the few options it has, then you have to either agree to its style or look for an alternative.

answered Aug 23 '20 at 13:58

yuriy636

11,171
5
37
42

VSCode jsx expression formatting

1 Answers1