Description
I can auto format jsx now in sublime so I do not have to manually do it at work! Buuuuuut.....
Now we're using happiness which will be the death of me because the options in the sublime settings for indents and whitespace are not being applied. I need '\t' values on everything in the class and spaces before and after function declartion parameters. The jsx formatting works fine but the regular js formatting options never have. Almost there!
options:
{
"preset": "jquery",
"alert-errors": true,
"autoformat": true,
"extensions": [
"js",
"jsx",
"sublime-settings"
],
"indent": {
"TopLevelFunctionBlock": 1,
"value": "\t",
"alignComments": true
},
"lineBreak": {
"value": "\n"
},
"whiteSpace": {
"value": " ",
"removeTrailing": 1,
"before": {
"FunctionDeclarationOpeningBrace": 1,
"FunctionDeclarationClosingBrace": 1,
"FunctionExpressionOpeningBrace": 1,
"FunctionExpressionClosingBrace": 1,
"FunctionGeneratorAsterisk": 0,
"FunctionName": 1
},
"after": {
"FunctionReservedWord": 0,
"FunctionName": 0,
"FunctionExpressionOpeningBrace": 1,
"FunctionExpressionClosingBrace": 0,
"FunctionDeclarationOpeningBrace": 1,
"FunctionDeclarationClosingBrace": 1
}
},
"options": {
"plugins": [
"esformatter-jsx"
],
"jsx": {
"formatJSX": true,
"attrsOnSameLineAsTag": false,
"maxAttrsOnTag": 1,
"firstAttributeOnSameLine": true,
"alignWithFirstAttribute": true,
"indent": {
"value": "\t",
},
}
},
"ignore-selection": true,
"node-path": "node",
"options-JSON": {
"plugins": [
"esformatter-quotes"
],
"quotes": {
"type": "double"
},
"indent": {
"value": "\t"
}
}
}
sample jsx file:
'use strict';
import React from 'react-lite';
export default class CounterComponent extends React.Component {
constructor() {
super();
this.state = {
count: 0
};
}
setCount() {
this.setState({
count: this.state.count += 1
});
}
componentDidUpdate() {
}
render() {
return (
Count: { this.state.count }{ this.getDOMNode() }
<input value="Add"
type="button"
onClick={ this.setCount.bind(this) } />
);
}
}