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
When I'm editing HTML or CSS in Sublime Text 3 the lines auto-indent when I hit the [ENTER] key, which generally is very useful.
On occasion I find myself wanting to paste a line of markup which is already indented, and this results in double indentation.
Is there some other key combination along with the [ENTER] key that prevents the next line from auto-indenting and instead returns the curson to the very beginning of the line? Please note I don't want to turn off auto-indent on a global basis.
You can do it in various steps, using various keybindings, so you can simply record a macro and do it in one simple custom keybinding (tools > record macro).
Steps:
Press [Enter] to move to a new line.
Press [shift+home] to select until the beginning of line (spaces or tabs used to indent).
Press [backspace] to remove the selected indentation charaters
You're done. Stop recording and save the macro, then use a custom keybinding to do it in a single step.
I found in Windows that CTRL + SHIFT + V (rather than just CTRL + V) does a "paste and indent" whereby the indentation is corrected as necessary.
It's also possible to switch the default paste for paste as indent as per these instructions: https://gist.github.com/twosixcode/1988097
I am in need of being able to select multiple cursors for thousands of lines that would then let me add content before each of them at the same time. Is there a way to select all and then select the multiple cursor option to put the cursor before each character of each line? Hope that does not sound confusing :-(
On Windows / OS X
Make sure you have View > Word Wrap off
Select all: Ctrl / Cmd+A
Split into Lines:Ctrl / Cmd+Shift+L
Put the cursor at the beginning of the line: Home / Ctrl+A
Yes, though I don't know how well multiple selections works with thousands of lines.
Start with Select All or select the lines that you need to edit.
From the Selection menu -> Split into lines. This will create multiple selections, one for each line.
Move the cursor to the beginning of each line by using the Home key.
Insert your content.
You can do as was suggested in other answers, it will work perfectly fine, sublime can handle thousands of selections for sure, but it might get bit slow sometimes.
Use regex in search n' replace, that's what it's for.
ctrl+h opens search and replace tab
make sure "Regular expressions" is pressed, "wrap" is pressed and "in selections" is NOT pressed.
type ^ to top field, it will mean "beginning of line" in this context
type your text in bottom field
ctrl+alt+enter or whatever the shortcut is to "replace all"
How do I list the lines that contains the matches from the "find" command ? ie., I would like to list all the matching lines in a separate window. Currently one can only goto next / previous 'find'.
Try 'Find in Files' (Cmd+Shift+F on a Mac, presumably Ctrl+Shift+F on a PC).
Search results will display in a new tab, and you can double-click any result to jump to that line in the matching file.
To search only open files, put <open files> in the Where field.
To show only the lines that matched without surrounding lines for context, toggle the 'Show Context' option (to the left of the 'Find All' panel).
1.Here is a reference: How can I filter a file for lines containing a string in Sublime Text 2?
Hit Ctrl+F(⌘+F) to "Find All" occurences;
Hit Ctrl+L to Expand All Selection to Line.
Then you can Ctrl+C(⌘+C) or Ctrl+Shift+K(⌃＋⇧＋K) to
copy/delete the lines.
2.There's now a plugin for filtering lines:
https://github.com/davidpeckham/FilterLines
It allows filtering and code folding based on strings or regular expressions.
I think the simplest way is just to search for the line like this -> ".*find_this_string.*" and make sure that regular expression is ticked. Then you can click "find all" (alt+enter) and just copy and paste all results to a new window.
I am using the "Find All" feature in Sublime Text and I want to see a few more lines back from the find results. I can't find a setting for this -- is there any way to do this?
To expand upon DarkWater's comment to your question:
Add new lines with a regex before and after your search string:
.*\n.*\n.*search_string.*\n.*\n.*
This will match 2 new lines before and after your search_string.
Make sure you enable regular expression searching in the find dialog. Also make sure that you escape any regex special characters in your search_string.
Are you using the Find in Files… command from the Find menu (SUPER + SHIFT + F)?
If so, there's an option in the find panel to see more lines than the result line alone -- the next to last button (there should be 5 option buttons in the find panel), which has a "Show Context" tooltip, should do the trick.
To expand on the solutions provided by #dasl and #zaboco
I found that this variation was more suitable.
Example:
(.*\n){0,2}.*search_string.*(\n.*){0,2}
This will match 0-2 new lines before/after your search_string. Adjust numbers as needed to provide more/less context, but always keep the 0 as the first number in the quantifier.
Again, make sure you enable regular expression searching in the find dialog.
(The original regexes required that 2 lines above/below are present in the files, and excluded some necessary files from the search results)