How can I setup webstorm to automatically add semi-colons to javascript functions, methods, etc

Javascript Problem Overview

When I write Javascript, I use semi-colons. However when I write in webstorm/phpstorm, it auto completes braces and brackets, but doesn't auto-add a semicolon. I know that isn't required per the standards, etc., but that's the way that I code - and I'm not alone, many people code this way.

Example:

var data = $.ajax({});

Normally, webstorm/phpstorm will do this, and leave the cursor inside the curly braces:

var data = $.ajax({})

All in the world that I want is to not have to add the semicolon manually and have it just auto-complete as I noted in my first example.

Javascript Solutions

Solution 1 - Javascript

There is no way to insert it automatically, you need to use the Complete Statement action (Ctrl+Shift+Enter).

Solution 2 - Javascript

For IntelliJ Idea 2018, follow the steps below:

Open Settings: Ctrl+Alt+S
Editor>Code Style>JavaScript
Select Tab > Punctuation
In dropdown, select "Use/Use always" semicolon to terminate statements
Apply and OK

This will add extra semicolon in JS.

Solution 3 - Javascript

You can make a macro and keyboard shortcut:

Record Auto semicolon macro and bind shortcut to it:
1. Edit -> Macros -> Start Macro Recording
2. In the editor go to the end of line by pressing End
3. put semicolon ';'
4. Edit -> Macros -> Stop Macro Recording
5. Give a name, for example 'Auto semicolon'
6. Open settings (Ctrl + Alt + s), select Keymap
7. Expand Macros node
8. Select 'Auto semicolon', in the context menu choose Add Keyboard Shortcut
9. Set Ctrl + ; as First keystroke
10. Save/Apply settings
11. Enjoy!
12. Try it out, in the middle of code line, hit Ctrl + ;
 
// some useful combinations:
Ctrl + ,    put colon at the end of line
Ctrl + ;    put semicolon at the end of line
Ctrl + .    put => at the end of line

From https://gist.github.com/umidjons/9383758

Would be a lot cooler if there was an option to do it automatically though...

Solution 4 - Javascript

You can automatically have webstorm or phpstorm add the semi-colon for you.

This is how for webstorm:

Preferencess --> Editor --> Code Style --> Javascript --> Punctuation

In the semi-colon to terminate statements, select always.

Then anytime you format your code, with a shortcut OPTION+CMD+L it will add the semi-colon

You can also configure reformat to be automatic when you save. That way semi-colon will always get added.

Solution 5 - Javascript

What I Want To Do

My goal was to add a semi-colon at the end of my current line while maintaining my cursor position in the middle of the line.

e.g.

func([{''}])
//     /\
//     ||
//     ||
//     current cursor position
//
// Now I want to add a semi-colon to the end-of-the-line
// but then continue typing my string contents at the same
// cursor location. i.e. I now want this, with as few
// keystrokes as possible:
//
//          Add this semi-colon...
//          |
//          |
//          V
func([{''}]);
//     /\
//     ||
//     ||
//     ...while maintaining this cursor position

Why I Want To Do It

WebStorm nicely "completes" the punctuation as I type, i.e. after I type the ({[', it auto-completes to ({[' <<cursor here>> ']}). I want to make sure that I include the semicolon at the line's end now before I do more typing, 'cause I might forget later. After adding the semi-colon, however, I want to continue typing at the current cursor location. I know I can use auto-completion to add a semi-colon at the line's end, but this leaves the cursor at the end of the line forcing me to hit the back-arrow multiple times. Moreover, sometimes my half-completed line won't yet be correct JavaScript syntax, so auto-completion might not even work.

Why It Was Hard

The solution seemed easy: write a simple macro to jump to the end of the line, type a semi-colon, and return to my original location. The problem is, it's hard to figure out how to coax WebStorm to return to my original location! I tried setting a bookmark, going to line's end, typing a semi-colon, and returning to my bookmark, but that doesn't work because, as far as I can tell, bookmarks only remember the line, not the column. I tried first typing garbage marker text at my current location (e.g. xcursorx), going to line's end, typing a semi-colon, and doing a simple find of my garbage marker text, but that doesn't work either because WebStorm's macros don't seem to play nicely with entering text into the find routine. I tried first typing garbage marker text, going to line's end, typing a semi-colon, and using Navigate/Last Edit Location and deleting the garbage, but that also doesn't work.

What Eventually Worked

I made a macro as follows (keyboard shortcuts shown in individual steps are those from the "Mac OS X 10.5+" keymap...use whichever shortcuts or menu options are appropriate for your setup):

starting with the cursor/caret at the desired location, start recording a macro (i.e. Edit > Macros > Start Macro Recording)
type a single non-space/non-word character, e.g. a period
immediatly after that, type a single "word" of garbage marker text that you won't use anywhere else, e.g. "xcursorx"
immediately after that, type another single non-space/non-word character, e.g. another period (i.e. you've now typed ".xcursorx.")
jump to the end of the line (e.g. command-right arrow)
type a semi-colon
immediately after the semi-colon (i.e. no space), type the same single "word" of garbage marker text again but without the flanking non-space/non-word characters, e.g. type ";xcursorx"
move the cursor back one "word" (e.g. option-left arrow)
find the word at the cursor (i.e. Edit > Find > Find Word at Caret) (do not use the normal find while manually typing in "xcursorx")
delete the selected text (i.e. hit the delete or backspace key to delete the second "xcursorx" at the end of the line)
find the previous occurrence of the last selected text (i.e. Edit > Find > Find Previous/Move to Previous Occurrence or shift-command-G); this will select the "xcursorx" within the ".xcursorx."
delete the selected text (i.e. hit the delete or backspace key)
go forward one character (i.e. right arrow, to after the second period)
delete two characters (i.e. hit delete or backspace twice, to delete the two periods)
stop the macro recording (i.e. Edit > Macros > Stop Macro Recording)
give your macro a name (e.g. 'place-semicolon-at-end-of-line')
give your macro a keyboard shortcut (e.g. Preferences > (scroll down to) Macros > place-semicolon-at-end-of-line > (right click) > Add Keyboard Shortcut ... and enter the shortcut you want, e.g. option-semicolon)

Explanation of Some Obscure Steps

Not all of the above steps are required for some use-cases. e.g. Adding the extra periods is not needed for this to function in the example at the top using func([{''}]). However, the extra steps are required for some edge cases, e.g. if your cursor is already at the very end of the line.

How To Use It

To use the macro, begin with your normal typing (in the example at the top, type func([{' causing func([{''}]) to appear), type your shortcut (e.g. option-semicolon), and the semi-colon will appear at the end of the line, but your cursor will remain where it was.

Caveat

This solution is a bit of a hack, as the display does jump a little as the garbage text is inserted and then deleted. However, at least it works. If anyone can figure out how to accomplish the same end goal without requiring garbage marker text, that would be great.

Solution 6 - Javascript

Having to hit Ctrl+Shift+Enter and then get back in the brackets every time is not a solution in my mind.

Here's a real solution:

You usually want a semicolon at the end of a statement right when you hit 'Shift+9' right? Without hitting some other crazy combination on the keyboard every time.

Type a function in the editor;
Right before you type '(' go to Edit > Macros > Start Macro Recording;
Type '();'and hit the 'Left' key 2 times so you're back inside;
Go to Edit > Macros > Start Macro Recording and name it (e.g. auto-semicolon; 5 Go to Preferences > Appearance & Behaviour > Keymap > Macros and right click 'auto-semicolon', select Add keyboard Shortcut and press 'Shift+9';
Exit Preferences and back in the editor test it out!

You can make many varieties of this depending on your needs. For example adding the curly braces in between '({})' or if you use '()' more often without the need for a semicolon at the end you can change the shortcut to 'Ctrl+Shift+9', and the usual combo just adds the regular. Your preference!

Solution 7 - Javascript

You can use this https://github.com/yyx990803/semi. Provide cli and api to meet your needs.

Solution 8 - Javascript

You can use eslint:

set the "semi" rule to "error" or 2

in the file that you'd like to add semi-colons right click and then select Fix ESLint Problems near the bottom of the menu

Solution 9 - Javascript

Yeah, if you leave it without a semi-colon Webstorm will mark it as unterminated statement and highlight it. When you are on the line (with the cursor) as the closing brace just type:

Alt + Enter

Which will bring up the light-bulb menu (auto corrects or changes stuff, I don't have a better name for it).

Hopefully if your code is correct, or the brace is the only symbol in that line, the only option you have will is Terminate statement and it will be automatically focused on, so just press the enter key for Webstorm to add the semi-colon.

This way saves you from manually positioning the cursor and typing the semi-colon yourself, but just be on that line somehow, and do alt+enter+ enter and there you have it.

Yeah it's not automatically there, but it's quicker and easy.

Solution 10 - Javascript

> Normally, webstorm/phpstorm will do this, and leave the cursor inside the curly braces:

Still requires manual action, but i'd just hit End and ; every time. But Ctrl+Right should work also, those keys are within reach.

I continuously hit CTRL+S after every line to save a document, so this would be only a minor nuisance to me..

Solution 11 - Javascript

Create a macro to move to the end of the line and insert the semi-colon. Then assign the macro to the semi-colon keystroke. Thus, at any point in your typing you can terminate the line of code.

Solution 12 - Javascript

In the latest 2020.3 you can find this here:

Solution 13 - Javascript

For Webstorm 2019.1

1 Select File/Settings... menu.
2 Select Editor/Code Style/JavaScript in the left sidebar of the Settings dialog.

3 Select the Punctuation tab and make sure that the "semicolon to terminate statements" option is "always".

4 Select Code/Reformat from the menu.

Content Type	Original Author	Original Content on Stackoverflow
Question	tvpmb	View Question on Stackoverflow
Solution 1 - Javascript	CrazyCoder	View Answer on Stackoverflow
Solution 2 - Javascript	Kapil Lohakare	View Answer on Stackoverflow
Solution 3 - Javascript	ricka	View Answer on Stackoverflow
Solution 4 - Javascript	EmaX	View Answer on Stackoverflow
Solution 5 - Javascript	Andrew Willems	View Answer on Stackoverflow
Solution 6 - Javascript	Kesarion	View Answer on Stackoverflow
Solution 7 - Javascript	Geng Jiawen	View Answer on Stackoverflow
Solution 8 - Javascript	dubaniewicz	View Answer on Stackoverflow
Solution 9 - Javascript	Gilad Peleg	View Answer on Stackoverflow
Solution 10 - Javascript	Barry Staes	View Answer on Stackoverflow
Solution 11 - Javascript	Developer	View Answer on Stackoverflow
Solution 12 - Javascript	Archit Garg	View Answer on Stackoverflow
Solution 13 - Javascript	ZhefengJin	View Answer on Stackoverflow