Sublime Text 3 Indents An Extra Tab After Hitting Enter For Only Parentheses In Javascript

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:

enter image description here

Current Result

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

enter image description here

Desired Result

This is my desired result after hitting enter:

enter image description here

Thank you in advance!



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.