HookyQR
'end_with_newline' didn't work and 'indent_size' isn't right after symbol function, more 2 spaces
- 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
@HookyQR @qianfeii
What does [pieCase](params) { mean in javascript? This looks very odd.
[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.
Just looked at 1.8.3-rc2. Seems they're unrelated. This might be a harder one to solve.
Computed property names ... I found this in ES6: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer Is that it?
@bitwiseman Yes, specifically https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names