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
How does one do this:
I found many useful tricks here Multiline editing in VSCode
I know I could use Ctrl+Alt+Shift+Up/Down
I know I could just press Shift+Up/Down to and delete the opening li tags together. But the closing li tags are not in the same line of sight.
How does one do what is being shown in the above example.
Alright, combining valuable comments by #Nick and #Strelok (thanks guys), Here is the answer:
Step 1: Select <li> using Shift+Right
Step 2: Press Ctrl+D several times till all the <li> tags are selected.
Step 3: Press Del
Step 4: Press End
Step 5: Press Backspace to delete closing </li> tags
Step 6: Press Home
Step 7: Press Left key till you are at the right spot inside <a> tag. And then type whatever you wish to.
Even though I could deduce this answer only from the comments by #Nick and #Strelok, I decided to post the answer myself because it would be unfair to mark one as answer when both the comments were equally helpful. I am going to keep the question open for now just in case someone comes up with a better way. Perhaps a way to avoid pressing Ctrl+D multiple times.
There is an emmet command that will remove a tag for you: editor.emmet.action.removeTag. It is currently unbound to any keybinding but you could easily make your own. Here is a demo without binding that command:
Select your <li>'s however you choose [I use Ctrl-Shift-L in the demo - but that selects all of them in the file which may or may not be appropriate for your use case.]
Trigger the editor.emmet.action.removeTag
Arrow over to your insertion points.
Pretty easy especially if you give that emmet command a keybinding.
You have the entire keyboard shortcut overview directly in VSC Ctrl + K or Ctrl + R or Help menu 'Keyboard Shortcuts Reference'
Mark your desired characters.
Hit Ctrl + F2 to mark all similar occurrences.
Change everything simultaneously.
Repeat for additional changes.
When I type in class="" it autofills and puts the cursor after the closing quote.
This means I need to delete a quote to enter the class name or click between them. Both of which ruin my workflow.
Is there a way to put the cursor inbetween the quotes in settings? And if there is, is there a way to jump out of the quotes and keep adding to my markup?
In Sublime Text it puts the cursor in the class and then tab takes you outside of it. I'm sure PhpStorm can do the same.
Instead of typing the whole class="" thing by yourself -- just let IDE autocompletion to do the job for you.
Just two characters (cl) is enough to make class entry first in the list (unless you have used some other similarly named attributes/properties recently that would temporarily bring them higher than class):
Completing with Enter will have the text inserted into current position with caret located in the right place class="[CARET_HERE]".
Completing with Tab does the same but replaces the text that is currently under caret (useful when changing class/image name/function/etc completely).
If standard code completion is not good enough for some reason or you do not like automatic completion popop (and prefer invoking it manually only when needed) -- you will be interested in Live Templates functionality that allows creating some abbreviation and expanding it into the final snippet with minimal key presses (e.g. cl[Tab] into class="|")
IDE also has options to:
insert quotes ("" or '') after typing = in XML/HTML attributes.
Settings/Preferences | Editor | General | Smart Keys --> Add quotes for attribute value on typing '=' and attribute completion
insert pair quotes (closing one) when entering opening one -- works in different contexts/languages. It will "eat" the closing quote preventing you from typing too many.
Settings/Preferences | Editor | General | Smart Keys --> Insert pair quote
In Sublime Text it puts the cursor in the class and then tab takes you outside of it. I'm sure PhpStorm can do the same.
If I understood you correctly (sorry, never used Sublime myself) -- No... and may not have it for quite some time (devs say that the way how IDE works somehow conflicts with proposed Tab or Esc behaviour).
Better explanation/arguments from both sides can be found in actual ticket: https://youtrack.jetbrains.com/issue/IDEABKL-6984
My print preview from MS Access shows everything perfectly fine. Here's the actual PDF file snapshot which shows some letters are cut in half. It happens inconsistently with this report and not always for the same data.
In this report only 5 out of 40 questions had their first letter cut in half.
Please advise.
I've tried adjusting where the data field must start, i.e. I've moved the start of the question a bit more right, but no difference.
Here's the design view I've highlighted in yellow where the question starts. I've moved it more right, makes no difference.
Here's where the user captures questions]
Your problem text lines have a stray Tab character (ASCII 9) at or near the beginning of the line, which is being interpreted as a lateral positioning move for the string. Your correct lines do not have a stray Tab. If you use Acrobat's text editor to delete the Tab, the rest of the line jumps properly into view.
Below, I've extracted the text of each line in your sample, and replaced the unexpected Tab character with an "X." If you use Acrobat text editing to navigate carefully to the spot in the line where the Tab is located (you won't see it directly, but it's there), Shift-cursor sideways to highlight the Tab alone, and delete it, you'll see the text revert to its normal appearance.
Note that the Tab is usually not the first character in the line, in lines where it appears:
SXources of polyunsaturated fats include
LXack of calcium is one of the major causes of osteoporosis
XDisaccharides are the simplest form of carbohydrate
Excessive long term protein intake may lead to kidney problems
Water soluble vitamins taken in excess have toxic effects in the body
LXack of calcium is one of the major causes of osteoporosis
SXources of polyunsaturated fats include
VXitamin B12 is involved in
I'm going to hazard a guess here that the problem was introduced in the text before it was uploaded to your final document, so that the unwanted Tabs somehow snuck in as body text. I hope that helps.
That is one weird effect. It is a bit suspicious that it only occurs towards the end of the document, but I have no idea what causes it.
Two workarounds worked for me:
1) Use
=" " & [Question]
as control source of the text box, and rename it to txtQuestion to avoid a circular reference. That's two spaces, one wasn't enough.
Move it a bit to the left, to make up for the increased indentation.
2) Don't use the Access-integrated PDF creator, use a PDF printer instead.
I used the Windows 10 integrated "Microsoft Print to PDF", but there are many free ones, e.g. https://en.pdf24.org/ (just google "pdf printer driver").
This created a larger .pdf file for me, but it doesn't show the error.
Edit: Interestingly, while Adobe Acrobat Reader shows the error, Foxit Reader or the Firefox integrated PDF viewer doesn't. Here is a single page example if anyone else wants to check.
So I'm curious how to disable the 'code-view' 'shift+enter' 'line break' shortcut in Dreamweaver. All I can find on the internet is 'why would you want to do that?' - so I can tell you ahead of time that won't be helpful to me in any way.
To answer the question however, because I know the first thing to run through everyone's head is 'why Does he want to do that' is a simple one; So I can parenthesis+linebreak+openbracket. If you follow the keystrokes, you'll note that if I hold shift across the whole thing ( which is required for the first and last ) - that I will end up with 's all over the place. This is becoming quite the annoyance and everyone on the internet has useless responses.
Thanks in advance.
As noted by #Carson Myers in the comments following my question:
To remove the Shift+Enter Keyboard Shortcut in Dreamweaver that inserts an HTML Line Feed, follow these steps:
In Dreamweaver;
Edit > Keyboard Shortcuts...
From the edit screen;
Click the 'Duplicate Set' button, and name your new set something relative to your reasoning for making the change, I went with 'Dreamweaver PHP Development', as it was in this environment that I encountered the necessity to make this change.
In your newly generated keyboard shortcut set, find the shortcut for a Linebreak in the following sub-'folder':
Insert > HTML > Special Characters > Linebreak
Once you have located this 'key', remove the 'Shift+Enter' shortcut from its list of shortcuts, and add another one if you feel the necessity.
Following these steps removes the automatic insertion of an HTML Linebreak when using Shift+Enter. In my scenario, this allowed me to type the following sequence; '()\n{\n}' without having to release the shift button.
Thanks to #Carson Myers for the information.