1

Is there some way to write/download rules for how VS. Code should format the code?

Example:

I have this nicely formatted (JavaScript) code:

var boundingBox        = Object.create(null);
    boundingBox.top    = 0;
    boundingBox.left   = 0;
    boundingBox.right  = window.innerWidth;
    boundingBox.bottom = window.innerHeight;

But after I do: Right-click --> Format Document

It destroys it into this (relatively) ugly & "unreadable" mess:

var boundingBox = Object.create(null);
boundingBox.top = 0;
boundingBox.left = 0;
boundingBox.right = window.innerWidth;
boundingBox.bottom = window.innerHeight;

Is there some plugin/.edditorconfig rules/settings/other thing I can do to tell VS. Code how it should format the code? (or at least not destroy the existing formating?)

Gama11
  • 31,714
  • 9
  • 78
  • 100
Sebastian Norr
  • 7,686
  • 2
  • 12
  • 17
  • Did not work: https://stackoverflow.com/a/19492318/7880517 – Sebastian Norr Aug 20 '19 at 08:03
  • Does not work: https://editorconfig.org/ (it does what it should, but still destroys the code) – Sebastian Norr Aug 20 '19 at 08:05
  • [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) offers a lot of options. Likely you'll need to customise its settings. – Richard Aug 20 '19 at 08:08
  • But also, why would those statements align? You have one declaration statement followed by a series of assignment statements. This isn't multiple declarations in one statement (would be comma separated), so you formatting is very unusual, to want statements indented but not being part of a control flow statement. – Richard Aug 20 '19 at 08:10
  • @Richard #1: I tried that, but I couldn't find an option to not mess up the existing code formatting. #2: Because I think it's easier to read it like that. #2b: I found this extension that aligns code pretty neatly: https://marketplace.visualstudio.com/items?itemName=wwm.better-align – Sebastian Norr Aug 20 '19 at 08:13

1 Answers1

1

I think what you want is this extension: https://marketplace.visualstudio.com/items?itemName=wwm.better-align

It allows you to align your code lines by colon(:), assignment(=,+=,-=,*=,/=) and arrow(=>)

However, my personal opinion is that it would likely be worth it to get used to other code formatting styles. From my experience, aligning code by specific characters is not common practice.

Thomas Kainrad
  • 2,542
  • 21
  • 26
  • Yes, I'm using that, but it's messed up as soon as I format the document, and that's the problem. – Sebastian Norr Aug 20 '19 at 08:38
  • But it (usually) works if I do a: `Ctrl + A` then `F1 --> Align`. – Sebastian Norr Aug 20 '19 at 08:43
  • If you do formatting, VSCode will just apply the regular formatting again. I guess you should just stop doing the formatting and use the extension instead. If you like, you could override the regular formatting shortcut with the extensions's command. – Thomas Kainrad Aug 20 '19 at 14:23