javascript - How to get {[space][caret][space]} and {{[space][caret][space]}} - Stack Overflow

admin管理员组

文章数量:1122846

I have a Vue project in PhpStorm and every time I want to import or use curly braces in Vue component, I'm having to add extra spaces inside my curly braces.

When I type import {, the closing curly brace is added in, so I end up with this:

If I press space once, I have of course:

What I would like, as soon as I press the space, that the IDE automatically inserts another space and moves caret one position to left, so end up with {[space][caret][space]}. And similarly, {{[space][caret][space]}} for double curly braces (used in Vue components).

I've tried with Live Templates (as mentioned here) but it doesn't seem to trigger after typing { ... (I've tried selecting 'None' and 'Tab' as expand but doesn't work).

It seems that a space is not allowed in the 'abbreviation' (when I Apply it and reopen this setting, the space is gone):

I have a Vue project in PhpStorm and every time I want to import or use curly braces in Vue component, I'm having to add extra spaces inside my curly braces.

When I type import {, the closing curly brace is added in, so I end up with this:

If I press space once, I have of course:

What I would like, as soon as I press the space, that the IDE automatically inserts another space and moves caret one position to left, so end up with {[space][caret][space]}. And similarly, {{[space][caret][space]}} for double curly braces (used in Vue components).

I've tried with Live Templates (as mentioned here) but it doesn't seem to trigger after typing { ... (I've tried selecting 'None' and 'Tab' as expand but doesn't work).

It seems that a space is not allowed in the 'abbreviation' (when I Apply it and reopen this setting, the space is gone):

• javascript
• typescript
• phpstorm
• webstorm

Share Improve this question Follow edited Nov 21, 2024 at 18:15 LazyOne 165k4747 gold badges412412 silver badges415415 bronze badges asked Nov 21, 2024 at 13:41 gvantogvanto 2,07433 gold badges2424 silver badges2727 bronze badges 8

• 1) Not using TypeScript ... so could easily be wrong, but anyway -- what about Settings/Preferences | Editor | Code Style | TypeScript | Spaces | Within | ES6 import/export braces 2) For {{ | }} -- can you check the available Code Styles for Vue --Settings/Preferences | Editor | Code Style | Vue template | Spaces | Within | Interpolations. P.S. At very least they should work on code reformat (in Blade/Twig the spaces are added on typing AFAIK). – LazyOne Commented Nov 21, 2024 at 18:13
• Regarding the Live Template that you have tried -- in that linked question the author does not use a space after { in the abbreviation. It's just { alone. So you just type { and press [TAB] (your expand key) and it should do that. – LazyOne Commented Nov 21, 2024 at 18:16
• Hi @LazyOne, in 1) yes, it ONLY fixes it on code reformat (which is a start, but not ideal). Regarding 2nd comment (Live Template), ideally I just want to do '{ ' (brace followed by space), not have to tab (I'm not really autocompleting anything). – gvanto Commented Nov 22, 2024 at 4:10
• "ideally I just want to do '{ ' (brace followed by space)" You can use just { as abbreviation and select Space as an expand key for that specific Live Template .. but that will be unwise (as it most likely will cause issues when you will be using the brace elsewhere, where you do not wish to have this behaviour). But try it anyway -- might work in your workflow. – LazyOne Commented Nov 22, 2024 at 9:50
• "not have to tab (I'm not really autocompleting anything)" But you are -- Live template requires expanding (a trigger that changes abbreviation into the final snippet). Tab in the default (and most often used) expand key. – LazyOne Commented Nov 22, 2024 at 9:52

 |  Show 3 more comments

1 Answer 1

Sorted by: Reset to default 0

Many thanks @lazyone! The below works well:

本文标签： javascriptHow to get spacecaretspace and spacecaretspaceStack Overflow