I'm in PhpStorm and I need to select some text, press some shortcut and have that text wrapped in a function call (that I would have defined somewhere in the settings beforehand).
For example:
"Hello World" would become input("Hello World").
$_GET["foo"] would become input($_GET["foo"]).
I don't know if this is even possible, but it could help me save so much time if so.
Applying regex to solve this problem is unfortunately not possible. Manually selecting what I need to wrap isn't an issue.
Will the function name be the same every time or different?
In any case: it can be done this way:
Make a Live Template of "surround template" type with the following content:
$FUN$($SELECTION$)$END$
The $SELECTION$ variable here tells that it's a surround template.
Apply correct Context (where this template can be used)
Give it an abbreviation (name used to locate & invoke it) and brief description.
Here is mine:
NOTE: replace $FUN$ by a fixed function name if the function will always be the same. You can have additional templates with different abbreviations (that will have different hardcoded function names).
To use it:
Make a selection and invoke Code | Surround with... action where you select the right template. On Windows keymap it's Ctrl + Alt + T
In action (NOTE: it's without hardcoding the function name hence me typing the myFunc part):
(HINT: you can select the desired entry in a few keypresses if the name is unique -- just start typing the name in the popup -- the standard Speed Search work here)
P.S. Code | Surround with... can have other (possibly irrelevant for you in this case) entries. To list Live Templates only, use the shortcut for Surround with Live Template... action (Ctrl + Alt + J here on my Windows keymap). You can check the shortcut or change it in the Settings/Preferences | Keymap:
This way the popup menu will be a bit shorter:
Less keypresses:
You may be able to use Macros functionality to record the invoking the popup and selecting the right entry. You can then assign a custom shortcut to that Macros: select the text, hit the shortcut and it will playback the recorded sequence.
Sadly I cannot 100% guarantee that Macros will always work nicely (sometimes/on some setups it can "eat" keypresses).
P.S. It would be much easier if the IDE would support assigning keyboard shortcuts to specific Live Templates .. but it's in the backlog and no ideas on when this might be implemented. Anyway: https://youtrack.jetbrains.com/issue/IDEA-67811 -- watch this ticket (star/vote/comment) to get notified on any progress.
P.S. You can also try Postfix completion. It's good for writing the code and not really suitable for your case (editing small parts of it), but who knows. You will have to make a custom postfix for this -- should not be an issue though.
https://www.jetbrains.com/help/phpstorm/2021.3/auto-completing-code.html#postfix_completion
I am using VS Code to write some HTML. I noticed that the IDE will auto-insert some code for me. For example, if I want a <p> tag, VS Code will create <p></p> for me and the cursor will land in the middle (between the opening and closing paragraph tags). However, when I am done typing the content inside the <p> tags, typically, I use my mouse or the directional right-arrow to move to the end. Is there a way to not move my fingers from the typing positions (e.g. fdsa and jkl;) to go to the end of the line or tag, or would I always have to use the mouse or directional pad?
I find IDEs like what JetBrains provide do not have this limitation for certain languages. For example, in Python, if I want to print something using PyCharm, I can type (the closing single quote and right parenthesis are auto-added)
print('')
My cursor will land inside the single quotes. To simply get outside the closing parenthesis, I simply type in ' followed by ) and the IDE is smart enough to know to not place the single quote and closing parenthesis there (it's like using the right arrow twice to get outside the print statement).
WebStorm, like VS Code, has the "problem" when dealing with HTML. If I am inside an opening and closing <p> tag, and right next to the closing one </p>, simply typing <, /, p, > will not land me outside (as with Python and PyCharm). On Windows, I can press the End key or on Mac I can press fn+right to get to the end; but that requires breaking the flow and continuity of my hands in the typing positions (eyes have to be redirected too).
Any tips on how to be a more productive coder using VS Code or other modern IDEs with HTML? Are there plugins that we may use to address this problem?
You can paste this code in your keybindings.json file in vs code
ctrl+RightArrow ....>>> for Move cursor to Line end
ctrl+LeftArrow ....>>> for Move cursor to Line start
alt+RightArrow .....>>> for moving cursor word by word
alt+LeftArrow ....>>> for moving cursor word by word
Just paste this code into your keybindings.json in vs code
[
{
"key": "alt+right",
"command": "cursorWordEndRight",
"when": "textInputFocus && !accessibilityModeEnabled"
},
{
"key": "alt+left",
"command": "cursorWordEndLeft",
"when": "textInputFocus && !accessibilityModeEnabled"
},
{
"key": "ctrl+right",
"command": "cursorLineEnd"
},
{
"key": "ctrl+left",
"command": "cursorLineStart"
},
]
Make sure to adjust commas and brackets, if there is already some code.
Simply go look it up or change it in your key binding settings:
File > Preferences > Keyboard shortcuts
It's named cursorLineEnd.
Same can be done for cursorLineStart of course.
Interfering other shortcuts can be changed or deleted as well in that menu.
I often just use <CTRL> + → (right arrow) a few times to quickly navigate past words and code blocks. It won't immediately get you to the end but if there isn't a ton of code after your current cursor location, a few quick uses of this keystroke can be faster than lifting your hands and checking with eyes to find the key.
Depending on what your keyboard layout is, this could be faster. Personally, if it's a big issue, I would second other posters here and add a custom keybind / hotkey to a lesser-used key nearby.
//Begin CAVEAT
I'm not mentioning just using the <END> key here as a solution purposefully, since you indicated that using that using keys too far from home row broke your flow. Depending on my keyboard layout, that is often the fastest option by far, however my current keyboard makes that a non-starter.
Part of the issue here is that people's experience is so different based on what keyboard they're using, as well as hand size and dexterity. YMMV with any solutions we mention that isn't a custom keybind.
//END CAVEAT
Cmd + Right
This will go to the end of you current line.
Tips:
Hold down shift to start a selection
Use Alt or Ctrl instead of Cmd to change the distance the cursor travels
If you want to go to the end of a line, just press the End button on the keyboard, and press Home to go to start of a line.
Change the key binding for cursor down to Shift + Space. I didn't remap right Arrow for reasons I'll explain shortly, but I could have easily done that as well.
When I code, I like to use indented formatting. So, when I type <p> and </p> is automatically generated, I go one step further and press ENTER. By default, that causes </p> to move to the same indention level as <p> on the line below my cursor, and puts my cursor on an indented line below <p>. Gif for reference:
Shortcut to make an indented block:
That leaves my fingers basically on the home keys, because when I'm done in that level, I'll press Shift + Space to go to the line below, where the ending tag will be, and then I can press ENTER a couple times as normal and create a new tag or whatever else I'll be adding to the file.
If you would like to set up your key bindings like mine, or do something slightly different, here is what I did:
Ctrl + K Ctrl + S (to open key bindings)
Search for "cursorDown"
Highlight the row and press ENTER
Press Shift + Space
I'm not sure which OS you specifically use being that you mentioned but an OS agnostic approach is to create your own keybind / key chord (sequence).
A key chord is essentially a way to use another 'layer' of key shortcuts, if you use your imagination for lingo. To illustrate: consider CTRL + S is a keyboard shortcut. Now consider CRTL + K chord CTRL + S, which is a completely different shortcut even though you use the same sequence.
Consider an edit/insert mode
I don't use vim, nor have I ever tried, but I really find value in the idea of having different 'modes', one visual one for insert and edit. Personally, I have elected CTRL + E to be my chord sequence for 'edit mode'. Now, every single key and sequence of keys becomes a brand new possability. Why CTRL + E? Well 'e' for edit, naturally, but also because it is default duplicate; for whatever reason vscode identifies this shortcut to be the same as CTRL + P by default.
I then use $ to go to the end of the line and ^ to the beginning, arbitrarily because of regex, but the point is you can create your own according to your own preference, which appears to be that of the home row. So if you elect to go this approach you can use j if you want. If you were to argue this is too much user input for a single action, consider the position of using a PC at home and a mac at work, as I do, you would already be comfortable with your settings and not need to 're-learn' shortcuts.
This answer uses an approach that affords you the creative freedom to define what a 'productive coder' looks like for you, provides a different approach to going to the end of line while maintaining your home row position, and hopefully demonstrates to any new vscoders that you are not bound to just using the native CTRL + K sequence as the chord identifier.
Regardless, re:
without using ... some key combinations?
That's unavoidable, I think, unless you choose to remap normal typing keys for this purpose
If you like to stick to the home row and do not want to use arrow keys,
you can customize your keyboard shortcuts.
paste the below code to your keybindings.json file in vs code.
Feel free to customize these shortcuts by changing key combinations.
,{
"key": "alt+l",
"command": "cursorEnd",
"when": "editorTextFocus"
},
{
"key": "alt+j",
"command": "cursorHome",
"when": "editorTextFocus"
}
For me it is Fn + -> (Right Arrow Key) that's the quickest possible approach
No need to do these messy things, just use your keyboard's home key and end key
Press the home key to go to the beginning of the line
Press the end key to go to the end of the line
I added a package to the Atom code editor that closes HTML tags for me. This feature is included in many code-editors, so it isn't Atom-specific.
For example, I type
<h1>
and it conveniently changes the line to
<h1></h1>
and places my cursor between the two tags.
This is where the dilemma occurs: My cursor is placed between the words and the closing tag, and I wish to go to the next line. Moving my hand to the mouse and clicking to the end of the line and then pressing enter is out of the question, especially with long documents where this phenomenon occurs hundreds, if not thousands of times.
Is there any way, perhaps a keyboard shortcut that skips to the end of the line, to solve this?
In Atom, CmdEnter (Mac) or CtrlEnter (Windows/Linux) will make a new line and go there, skipping past whatever is presently on the line.
You can just push the end button. Mine is located above my backspace key, but it might be with the number pad if you have a separate number pad.
If you add the same element over and over again, you could copy & paste it. And for the sake of an empty element you could copy & paste something like <br /> (you can even leave out the space, I just like to add them to make self-closing tags easier to identify).
PS: empty headlines? shame on you!
Sublime Text 2 allows me to autocomplete the class or id attribute, but it is not adding the ="" automatically when I start typing class=" ".
I want to type in <div c and at the moment the c is typed the autocomplete should show the option class="" not just class but also the equal and the quotes. The same goes for id="" and style="".
I am sure this is fairly simple to do; just installed the software today.
Thanks
First, install the Sublime package manager Package Control to allow for the easy installation, removal, upgrading, and otherwise managing third-party plugins and packages. Next, after restarting Sublime, hit CtrlShiftP (Windows/Linux) or ⌘ShiftP (OS X) to bring up the Command Palette. Type pci to get to Package Control: Install. Hit Enter, then start typing in HTMLAttributes until it shows up. Hit Enter again to install it. You'll now have a much greater selection of auto-completions, including the class, id, and style elements you were looking for. So, inside a tag start typing class and when the autocomplete appears, hit Tab. The rest of the word class will complete, along with an equals sign and a pair of double quotes. Your cursor will automatically be positioned inside the quotes, and when you're done entering the value(s) you want just hit Tab again and your cursor will jump outside the quotes, ready to close the tag or enter the next attribute.
To see what sort of completions are available to you, check out the source here or go to Preferences -> Browse Packages... to open up your system's file explorer, then enter the HTMLAttributes directory and open the HTMLAttributes.sublime-completions as a JSON file in Sublime. If a trigger contains a \t (tabstop) character, the part before it is the completion, and the part after it is what appears in the autocomplete menu on the right. In contents, $1, $2, and so on are successive places where hitting Tab will land your cursor. $0 is the exit point. Something like ${1:form_id} gives a default value, and something like "draggable=\"$1${1/(t$)|(f$)|(a$)|.*/?1:rue:?2:alse:?3:uto/i}\"$0" is an autocomplete regex, so that if you type t inside the field, it autocompletes to true, if you backspace and hit f it becomes false, and a becomes auto.
This package is really great at supplementing the standard HTML autocomplete that ships with Sublime, but unfortunately it doesn't necessarily play nicely with Emmet, formerly known as Zen Coding, as some of the completions may clash with Emmet's abbreviations. Of course, as always, YMMV.
Good luck!
Is it possible for TextMate to syntax highlight the opening and closing tags of your current caret location? And I am talking about constantly, not by pressing a key combo.
Furthermore, if it possible, how can I do it? There doesn't seem to be any way that I know of except by using selectors in the theme, but I don't know if selectors can be context-sensitive.
currently, the TextMate language grammar has no concept of cursor position. Therefore, this is not achievable right now.
A workaround that I use is to define macros that select a block of text whose boundaries I define with regular expressions. You have to be handy with regular expressions, but you can make it work.
Essentially, record a new macro (option-command-m), use the find dialog to search for the beginning of the tag. Then, use the find dialog and provide a reg-ex that will match the entire contents you want to select. Press option-command-m again to stop the macro, and then save the macro to a bundle.
An example here:
http://github.com/timcharper/vines.tmbundle/blob/master/Macros/Select%20Tag.tmMacro
Tim