Sublime Text 3 indents an extra tab after hitting enter for only parentheses in javascript

Question

Right now, I am working on a project using ReactJS in Sublime Text. Whenever I hit enter in between the parentheses it would break to another line and add an extra space. Here's an example:

Initial Start

The cursor is in the middle, then I hit enter:

Current Result

Then it adds this extra indent afterwards. Causing me to waste time and fix it.

Desired Result

This is my desired result after hitting enter:

Thank you in advance!

Answer 1

Open Preferences -> Key Bindings-User and add the following:

{ "keys": ["enter"], "command": "insert_snippet", "args": {"contents": "\n\t$0\n"}, "context":
    [
        { "key": "setting.auto_indent", "operator": "equal", "operand": true },
        { "key": "selection_empty", "operator": "equal", "operand": true, "match_all": true },
        { "key": "preceding_text", "operator": "regex_contains", "operand": "\\($", "match_all": true },
        { "key": "following_text", "operator": "regex_contains", "operand": "^\\)", "match_all": true }
    ]
}

If the file was previously empty, add square brackets [ ] around the key binding and save. If the file has other custom key bindings, paste it at the beginning just after the opening bracket [, and make sure you add a comma , after it to make sure the file is valid JSON.