如何设置 webstorm 以自动向 javascript 函数、方法等添加分号

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

提问by tvpmb

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.

当我编写 Javascript 时，我使用分号。但是，当我在 webstorm/phpstorm 中编写时，它会自动完成大括号和方括号，但不会自动添加分号。我知道这不是标准等所要求的，但这就是我编码的方式 - 而且我并不孤单，很多人都是这样编码的。

Example:

例子：

var data = $.ajax({});

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

通常，webstorm/phpstorm 会这样做，并将光标留在花括号内：

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.

我想要的是不必手动添加分号，而是让它自动完成，正如我在第一个示例中所指出的那样。

回答by CrazyCoder

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

有没有办法自动插入它，你需要使用完整的陈述作用（Ctrl+ Shift+ Enter）。

You also need to check that Use semicolon to terminate statementsoption is enabled in Settings| Code Style| JavaScript| Othertab.

您还需要检查是否在| 中启用了使用分号终止语句选项Settings。Code Style| JavaScript| Other标签。

回答by ricka

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 so, 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

来自https://gist.github.com/umidjons/9383758

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

如果有自动执行的选项会更酷...

回答by Andrew Willems

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

WebStorm 在我输入时很好地“完成”标点符号，即在我输入 后({['，它会自动完成为({[' <<cursor here>> ']})。我想确保我包括行末的分号，现在我做更多的打字之前，因为我以后可能会忘记。但是，添加分号后，我想继续在当前光标位置输入。我知道我可以使用自动完成在行尾添加分号，但这会使光标留在行尾，迫使我多次点击后箭头。此外，有时我的半完成行还不是正确的 JavaScript 语法，因此自动完成甚至可能不起作用。

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 findof 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 findroutine. I tried first typing garbage marker text, going to line's end, typing a semi-colon, and using Navigate/Last Edit Locationand deleting the garbage, but that also doesn't work.

解决方案似乎很简单：编写一个简单的宏来跳转到行尾，输入一个分号，然后返回到我原来的位置。问题是，很难弄清楚如何哄WebStorm回到我原来的位置！我尝试设置书签，转到行尾，输入分号，然后返回到我的书签，但这不起作用，因为据我所知，书签只记住行，而不记住列。我首先尝试在当前位置（例如xcursorx）键入垃圾标记文本，转到行尾，键入分号，然后find对我的垃圾标记文本进行简单的处理，但这也不起作用，因为 WebStorm 的宏似乎不起作用很好地将文本输入到find例程中。我试着先输入垃圾标记文本，到行尾，Navigate/Last Edit Location并删除垃圾，但这也不起作用。

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):

我制作了一个宏如下（各个步骤中显示的键盘快捷键来自“Mac OS X 10.5+”键盘映射...使用适合您设置的任何快捷键或菜单选项）：

• 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 notuse the normal findwhile 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 Occurrenceor 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 afterthe 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)

• 从所需位置的光标/插入符号开始，开始录制宏（即Edit > Macros > Start Macro Recording）
• 键入单个非空格/非单词字符，例如句点
• 之后立即输入一个垃圾标记文本的“单词”，您不会在其他任何地方使用，例如“xcursorx”
• 紧接着，输入另一个非空格/非单词字符，例如另一个句点（即您现在输入了“.xcursorx”。）
• 跳到行尾（例如命令右箭头）
• 输入分号
• 紧跟在分号之后（即没有空格），再次键入垃圾标记文本的同一个“单词”，但没有侧面的非空格/非单词字符，例如键入“;xcursorx”
• 将光标向后移动一个“单词”（例如选项左箭头）
• 找到光标处的单词（即Edit > Find > Find Word at Caret）（手动输入“xcursorx”时不要使用正常find）
• 删除选定的文本（即按删除或退格键删除行尾的第二个“xcursorx”）
• 查找上次选择的文本的上一次出现（即Edit > Find > Find Previous/Move to Previous Occurrence或 shift-command-G）；这将选择“.xcursorx”中的“xcursorx”。
• 删除选定的文本（即点击删除或退格键）
• 前进一个字符（即右箭头，到之后的第二期）
• 删除两个字符（即点击删除或退格两次，删除两个句点）
• 停止宏录制（即Edit > Macros > Stop Macro Recording）
• 给你的宏一个名字（例如'place-semicolon-at-end-of-line'）
• 给你的宏一个键盘快捷键（例如Preferences > (scroll down to) Macros > place-semicolon-at-end-of-line > (right click) > Add Keyboard Shortcut......并输入你想要的快捷键，例如选项分号）

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.

对于某些用例，并非所有上述步骤都是必需的。例如，在顶部的示例中使用func([{''}]). 但是，某些边缘情况需要额外的步骤，例如，如果您的光标已经在行尾。

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.

要使用宏，请从您的正常输入开始（在顶部的示例中，输入func([{'导致func([{''}])出现），输入您的快捷方式（例如选项分号），分号将出现在该行的末尾，但您的光标将保持在原处。

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.

这个解决方案有点麻烦，因为当插入垃圾文本然后删除时，显示确实会跳一点。但是，至少它有效。如果有人能弄清楚如何在不需要垃圾标记文本的情况下完成相同的最终目标，那就太好了。

回答by Kapil Lohakare

For IntelliJ Idea 2018, follow the steps below:

对于 IntelliJ Idea 2018，请按照以下步骤操作：

• 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

• 打开设置：Ctrl+ Alt+S
• 编辑器>代码风格>JavaScript
• 选择 Tab > 标点符号
• 在下拉列表中，选择“使用/始终使用”分号来终止语句
• 申请并确定

This will add extra semicolon in JS.

这将在 JS 中添加额外的分号。

回答by EmaX

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

您可以自动让 webstorm 或 phpstorm 为您添加分号。

This is how for webstorm:

这是 webstorm 的方法：

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

首选项 --> 编辑器 --> 代码样式 --> Javascript --> 标点符号

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

然后，无论何时格式化代码，使用快捷方式 OPTION+CMD+L 都会添加分号

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

您还可以将重新格式化配置为在保存时自动进行。这样分号总是会被添加。

回答by Geng Jiawen

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

你可以使用这个https://github.com/yyx990803/semi。提供cli和api来满足您的需求。

回答by dubaniewicz

You can use eslint:

您可以使用eslint：

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

将"semi"规则设置为"error"或2

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

在要添加分号的文件中右键单击，然后Fix ESLint Problems在菜单底部附近选择

回答by Gilad Peleg

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

是的，如果你不加分号，Webstorm 会将它标记为unterminated statement并突出显示。当您在行上（使用光标）作为右大括号时，只需键入：

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 statementand it will be automatically focused on, so just press the enter key for Webstorm to add the semi-colon.

希望如果您的代码是正确的，或者大括号是该行中唯一的符号，那么您唯一的选择就是Terminate statement它会自动聚焦，因此只需按 Webstorm 的 Enter 键添加分号。

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.

这种方式可以使您免于手动定位光标并自己输入分号，但只需以某种方式在该行上，然后执行 alt+enter+enter 就可以了。

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

是的，它不会自动出现，但它更快更容易。

回答by Barry Staes

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

通常，webstorm/phpstorm 会这样做，并将光标留在花括号内：

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

不过需要手动操作，但我只是打End和;每一次。但是Ctrl+Right也应该有效，这些键是触手可及的。

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

我不断地CTRL+S在每一行之后点击以保存文档，所以这对我来说只是一个小麻烦..

回答by Kesarion

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

在我看来，每次都必须按 Ctrl+Shift+Enter 然后回到括号中并不是一个解决方案。

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.

当您按 'Shift+9' 时，您通常希望在语句末尾使用分号，对吗？无需每次都在键盘上敲击其他疯狂组合。

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!

1. 在编辑器中输入一个函数；
2. 就在您键入“（”之前，转到“编辑”>“宏”>“开始宏录制”；
3. 输入 '();' 并按 'Left' 键 2 次，这样你就回到里面了；
4. 转到“编辑”>“宏”>“开始宏录制”并为其命名（例如自动分号；5 转到“首选项”>“外观和行为”>“键盘映射”>“宏”并右键单击“自动分号”，选择“添加键盘快捷键”并按“Shift+9” ;
5. 退出首选项并返回编辑器进行测试！

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!

您可以根据自己的需要制作多种此类。例如，在 '({})' 之间添加花括号，或者如果您更频繁地使用 '()' 而无需在末尾使用分号，您可以将快捷方式更改为 'Ctrl+Shift+9'，以及通常的组合只是添加了常规。你的偏好！