CODEWITHSUNDEEP
javascriptphpstormwebstorm
tvpmb
tvpmb

Reputation: 1477

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

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.

Upvotes: 76

Views: 36187

Answers (13)

ZhefengJin
ZhefengJin

Reputation: 1122

For Webstorm 2019.1

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

enter image description here

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

enter image description here

4 Select Code/Reformat from the menu.

Upvotes: 3

CrazyCoder
CrazyCoder

Reputation: 402543

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

You also need to check that Settings (Preferences on macOS) | Editor | Code Style | JavaScript | Punctuation | Use semicolon to terminate statements option is enabled.

Upvotes: 111

Archit Garg
Archit Garg

Reputation: 3277

In the latest 2020.3 you can find this here:

enter image description here

Upvotes: 1

ricka
ricka

Reputation: 1157

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...

Upvotes: 13

EmaX
EmaX

Reputation: 133

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.

Upvotes: 12

Kapil Lohakare
Kapil Lohakare

Reputation: 350

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.

Upvotes: 20

dubaniewicz
dubaniewicz

Reputation: 77

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

right click menu

Upvotes: 1

Geng Jiawen
Geng Jiawen

Reputation: 9166

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

Upvotes: 1

Andrew Willems
Andrew Willems

Reputation: 12458

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.

Upvotes: 6

Developer
Developer

Reputation: 1

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.

Upvotes: 0

Kesarion
Kesarion

Reputation: 2858

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.

  1. Type a function in the editor;
  2. Right before you type '(' go to Edit > Macros > Start Macro Recording;
  3. Type '();'and hit the 'Left' key 2 times so you're back inside;
  4. 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';
  5. 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!

Upvotes: 1

Barry Staes
Barry Staes

Reputation: 4123

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..

Upvotes: 0

Gilad Peleg
Gilad Peleg

Reputation: 2010

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.

Upvotes: 0

Related Questions