How to save babeljs formatting for gulp task?

Question

I am using gulp and I want to save formatting of my .js files with babeljs task, how can I perform this?

e.g. I have:

var
  PC1   = 'Customer',
  PC2   = 'Purchase Frequency',
  PC3   = 'Purchase Value',
  PC4   = 'Most Viewed Category',
  PC5   = 'Brand',
  PC6   = 'Reduced Price',
  PC7   = 'Colour',
  PC8   = 'Material',
  PC9   = 'Gender',
  PC10  = 'Size',
  PC11  = 'Price';

It represents it into:

var PC1 = "Customer",
    PC2 = "Purchase Frequency",
    PC3 = "Purchase Value",
    PC4 = "Most Viewed Category",
    PC5 = "Brand",
    PC6 = "Reduced Price",
    PC7 = "Colour",
    PC8 = "Material",
    PC9 = "Gender",
    PC10 = "Size",
    PC11 = "Price";

How to avoid this?

Are you asking about Babel switching from single quotes to double quotes, or the fact that `PC1 = "Customer"` was moved "up" to the same line as `var`? — Mark Rousskov, Aug 03 '15 at 21:13
Not quotes, but exactly that fact of changing my style of writing. There are not only `var` statement in incorrect place, but also equal sign is not in place. Is it possible to avoid those changes? — Oleksandr Tserkovnyi, Aug 04 '15 at 21:47

score 0 · Answer 1 · answered Aug 05 '15 at 13:22

Babel tries to preserve some of your formatting (indentation, double or single quotes) but due to Babel's nature of generating the resulting code from an AST, it cannot preserve that which you want it to: at the generation phase, it does not know what the input looked like.

Babel's generator only knows the semantic meaning of your code. Since the semantic meaning was preserved, this isn't easily fixable on Babel's side, and I do not believe that it is one of Babel's goals to fix this.

Also, while Babel tries to generate good-looking code, you generally shouldn't be looking at the output it has generated (unless, perhaps, debugging).

It might help you if you use source-maps, you should see the Browser (if in a browser) showing you the resulting code as if it was the input, easing debugging, and Node can do the same for stack traces when using source-map-support package on NPM.

How to save babeljs formatting for gulp task?

1 Answers1