Atom-beautify: Javascript Indent Size not working

[yannisalexiou]

Description

Trying to change the indent size for Javascript files not having the expected results.
The default value is 2 and every effort to change this value not having any results in my files.

Input Before Beautification

This is my input file before beautification with indent size 2

Ext.define('FindACab.view.DetailView', {
  extend: 'Ext.Container',
  xtype: 'detailView',
  requires: [
      'Ext.TitleBar',
      'Ext.Button',
      'Ext.layout.Card',
      'Ext.Map',
      'FindACab.view.RatingChart' //<1>
  ],
  config: {
    layout: 'card',
    items: [{
        xtype: 'titlebar',
        ui: 'light',
        docked: 'top',
        title: 'FindACab',
        items: [{
            iconCls: 'settings',
            itemId: 'settingsbtn',
            ui: 'plain',
            align: 'right'
        }]
      },
      {
        xtype: 'map',
        mapOptions: {
          overviewMapControl: false,
          panControl: false,
          rotateControl: false,
          streetViewControl: false,
          mapTypeControl: false,
          zoom : 12,
          mapTypeId : google.maps.MapTypeId.ROADMAP
        },
        useCurrentLocation: false
      }

Expected Output

After changing the indent size to 4, I would expect this result.
The beautified code should have looked like this:

Ext.define('FindACab.view.DetailView', {

    extend: 'Ext.Container',
    xtype: 'detailView',
    requires: [
        'Ext.TitleBar',
        'Ext.Button',
        'Ext.layout.Card',
        'Ext.Map',
        'FindACab.view.RatingChart' //<1>
    ],
    config: {
        layout: 'card',
        items: [{
            xtype: 'titlebar',
            ui: 'light',
            docked: 'top',
            title: 'FindACab',
            items: [{
                iconCls: 'settings',
                itemId: 'settingsbtn',
                ui: 'plain',
                align: 'right'
            }]
        },
        {
            xtype: 'map',
            mapOptions: {
                overviewMapControl: false,
                panControl: false,
                rotateControl: false,
                streetViewControl: false,
                mapTypeControl: false,
                zoom : 12,
                mapTypeId : google.maps.MapTypeId.ROADMAP
        },
        useCurrentLocation: false

Actual Output

But the actual results is the same as input.
The beautified code actually looked like this:

Ext.define('FindACab.view.DetailView', {

  extend: 'Ext.Container',
  xtype: 'detailView',
  requires: [
    'Ext.TitleBar', 'Ext.Button', 'Ext.layout.Card', 'Ext.Map', 'FindACab.view.RatingChart' //<1>
  ],
  config: {
    layout: 'card',
    items: [
      {
        xtype: 'titlebar',
        ui: 'light',
        docked: 'top',
        title: 'FindACab',
        items: [
          {
            iconCls: 'settings',
            itemId: 'settingsbtn',
            ui: 'plain',
            align: 'right'
          }
        ]
      }, {
        xtype: 'map',
        mapOptions: {
          overviewMapControl: false,
          panControl: false,
          rotateControl: false,
          streetViewControl: false,
          mapTypeControl: false,
          zoom: 12,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        },
        useCurrentLocation: false

Steps to Reproduce

1. Add JS code to Atom editor
2. Go to File -> Settings -> Packages
3. Locate atom-beautify and click Settings
4. Find Javascript and change Indent size: 4
5. Run command Atom Beautify: Beautify Editor
6. This beautified code still with the default size 2

Checklist

I have:

• [x] Tried every number in indent size without any effect
• [x] Reloaded (or restarted) Atom to ensure it is not a caching issue

[stevenzeck]

Can you please create a gist of the debug output? Go to Packages -> Atom Beautify -> Debug. Click the OK button a couple of times and it will open a new tab with debugging information. Copy/paste that into a gist here on GitHub and put a link to it in this issue.

[yannisalexiou]

@szeck87 Thank you for the help! I just create the debug file here

But as I saw, the Original File Language was JSX and no Javascript as I selected.

So the problem solved!

Thank you again @szeck87