'end_with_newline' didn't work and 'indent_size' isn't right after symbol function, more 2 spaces

[qianfeii]

• macOs 10.13.6:
• VS Code 1.25:
• beautify 1.3.2:

Here is my settings :

VS Code:

{
  "workbench.iconTheme": "vscode-icons",
  "workbench.colorTheme": "Dracula",
  "files.autoSave": "onFocusChange",
  "editor.tabSize": 2,
  "editor.fontSize": 14,
  "beautify.config": "/Users/aubrey/.vscode/.jsbeautifyrc",
  "html.format.wrapLineLength": 150,
  "html.format.endWithNewline": true,
  "files.insertFinalNewline": true,
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "beautify.language": {
    "js": {
      "type": [
        "javascript",
        "json"
      ],
      "filename": [
        ".jshintrc",
        ".jsbeautify"
      ]
    },
    "css": [
      "css",
      "scss"
    ],
    "html": [
      "htm",
      "html",
      "vue" //在这里加上vue
    ]
  }
}

.jsbeautifyrc

{
  "indent_size": 2,
  "indent_char": " ",
  "css": {
    "indent_size": 2
  },
  "end_with_newline": true,
  "space_after_anon_function": false,
  "keep_array_indentation": true,
  "unformatted": ["a", "pre"],
  "brace_style": "none,preserve-inline"
}

Action performed

Format javascript file with HookyQR.beautifyFile command provide example code Here is my code i want to format

export default class VISUAL {
  constructor(_dom) {
    this.name = 'visual'
    this.describe = 'visual class'
    this._dom = _dom
  }
  init(params) {
    this.type = params.type ? params.type : undefined
    switch (this.type) {
      case 'pie':
        this[pieCase](params)
        break
      default:
        break
    }
  }
  baseFun() {}
  [pieCase](params) {
      let _this = this
      let _body = d3.select(_this._dom)
      let _width = params.width ? params.width : parseInt(this._dom.style.width)
      let _height = params.height ? params.height : parseInt(this._dom.style.height)
      let _radius = Math.min(_width, _height) / 2
      /*  大小  */
      let _outer = params.serious && params.serious.outer ? params.serious.outer : _radius - 10
      let _inner = params.serious && params.serious.inner ? params.serious.inner : _radius - 100
      if (_outer < _inner) {
        throw new Error(`外圈大小小于内圈`)
      }
      let svg = _body
        .append('svg')
        .attr('width', _width)
        .attr('height', _height)
      /**  title */
      if (params.title && params.title.text) {
        let _title = params.title.text
        let _titleX = params.title.x ? params.title.x : _width / 2
        let _titleY = params.title.y ? params.title.y + 15 : 15
        if (_titleX === 'center') {
          _titleX = _width / 2
        } else if (_titleX === 'left') {
          _titleX = 20
        } else if (_titleX === 'right') {
          _titleX = _width - 20
        }
        svg
          .append('text')
          .attr('x', _titleX)
          .attr('y', _titleY)
          .attr('text-anchor', 'middle')
          .style('font-size', '16px')
          .style('text-decoration', 'underline')
          .attr('fill', params.title.style.color)
          .text(_title)
      }
      if (params.style) {
        svg.attr('style', params.style)
      }
      let g = svg.append('g').attr('transform', 'translate(' + _width / 2 + ',' + _height / 2 + ')')
      /*  颜色  */
      let _color = params.serious && params.serious.color ? params.serious.color : undefined
      let colorArr
      if (!_color) {
        if (params.data.length < 12) {
          colorArr = d3.schemePaired
        } else {
          let len = params.data.length
          let _arr = []
          while (len > 0) {
            _arr.push(d3.interpolatePlasma(Math.random()))
            len--
          }
          colorArr = _arr
        }
      } else {
        colorArr = _color
      }
      let color = d3.scaleOrdinal(colorArr)
      let data = params.data
      let pie = d3
        .pie()
        .sort(null)
        .value(function(d) {
          return d.population
        })
      let path = d3
        .arc()
        .outerRadius(_outer)
        .innerRadius(_inner)

      let label = d3
        .arc()
        .outerRadius(_outer)
        .innerRadius(_outer + _inner)

      let arc = g
        .selectAll('.arc')
        .data(pie(data))
        .enter()
        .append('g')
        .attr('class', 'arc')

      arc
        .append('path')
        .attr('d', path)
        .attr('fill', function(d) {
          return color(d.data.age)
        })

      arc
        .append('text')
        .attr('transform', function(d) {
          /**  标签贴圈 */
          let c = label.centroid(d)
          let x = c[0]
          let y = c[1]
          let h = Math.sqrt(x * x + y * y)
          let labelr = Math.min(_width, _height) / 2 - 30
          return 'translate(' + (x / h) * labelr + ',' + (y / h) * labelr + ')'
          /**  标签规整 */
          // let pos = label.centroid(d)
          // pos[0] = (_outer + _inner) * (midAngle(d) < Math.PI ? 1 : -1)
          // console.log(pos)
          // return 'translate(' + pos + ')'
        })
        .attr('dy', '0.35em')
        .text(function(d) {
          return d.data.age
        })
        .attr('fill', function(d) {
          return color(d.data.age)
        })
      /* line */
      svg.append('g').attr('class', 'lines')
      let lines = svg
        .select('.line')
        .selectAll('polyline')
        .data(pie(data))
        .enter()
        .append('line')
      // let polyline = svg
      //   .select('.line')
      //   .selectAll('polyline')
      //   .data(pie(data))
      //   .enter()
      //   .append('polyline')
      //   .attr('points', function(d) {
      //     // see label transform function for explanations of these three lines.
      //     var pos = label.centroid(d)
      //     pos[0] = (_outer + _inner) * 0.9 * (midAngle(d) < Math.PI ? 1 : -1)
      //     console.log(pos)
      //     return [label.centroid(d), pos, [10, 10]]
      //   })
      //   .attr('fill', function(d) {
      //     return color(d.data.age)
      //   })
    }
}

Actual results

Details of what happened ... the end_with_newline didn't work, it didn't add new line at the end automatically。and there are 4 spaces at the beginning at the new line after symbol function .it means there are 4 spaces at

[pieCase](params) {
      let _this = this

before 'let',and the lines under 'let _this=this' are all beginning with 4 space

and by the way ,how can i format json with beautify default , and i hope it can remove extra ',' .

and thanks ,i like this formatter plugin

[bitwiseman]

@HookyQR @qianfeii

What does [pieCase](params) { mean in javascript? This looks very odd.

[HookyQR]

[xxx] is a computed property name. xxx can be anything that evaluates to (basically) a string. ie.

function nameIt() { return "crazyMethod"; }
class Abc {
  [nameIt()]() { return "result"; }
}

Will create a class with a method of this.crazyMethod on it. You can define properties (keys) on an object the same way. Things like:

{
  [`${start}${end}`]: "some value"
}

Are perfectly valid.

[HookyQR]

Just looked at 1.8.3-rc2. Seems they're unrelated. This might be a harder one to solve.

[bitwiseman]

Computed property names ... I found this in ES6: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer Is that it?

[HookyQR]

@bitwiseman Yes, specifically https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names