Document display line movement best practices #3623

karlhorky · 2019-03-25T10:21:41Z

Thanks for this project! It's really great to be able to use most common things from Vim in VS Code!

What this PR does / why we need it:

Best practices are not documented for how to vertically move to wrapped lines when word wrap is on.

Ref: #2403 (comment)
Ref: #2924 (comment)

Which issue(s) this PR fixes

This documents the movements in a FAQ item:

How can I move the cursor by display line with word wrapping?

If you have word wrap on and would like the cursor to enter each wrapped line when using j, k, ↓ or ↑, set the following in VS Code's keybindings.json settings file (other options exist but they are slow):

{
  "key": "up",
  "command": "cursorUp",
  "when": "editorTextFocus && vim.active && !inDebugRepl && !suggestWidgetMultipleSuggestions && !suggestWidgetVisible"
},
{
  "key": "down",
  "command": "cursorDown",
  "when": "editorTextFocus && vim.active && !inDebugRepl && !suggestWidgetMultipleSuggestions && !suggestWidgetVisible"
},
{
  "key": "k",
  "command": "cursorUp",
  "when": "editorTextFocus && vim.active && !inDebugRepl && vim.mode == 'Normal' && !suggestWidgetMultipleSuggestions && !suggestWidgetVisible"
},
{
  "key": "j",
  "command": "cursorDown",
  "when": "editorTextFocus && vim.active && !inDebugRepl && vim.mode == 'Normal' && !suggestWidgetMultipleSuggestions && !suggestWidgetVisible"
}

Special notes for your reviewer:

In case I've missed some case in which rebinding j and k in Normal mode and ↓ and ↑ in all modes to the VS Code default would cause a problem, please let me know and we can change this.

To vertically move to wrapped lines when word wrap is on. Ref: #2403 (comment) Ref: #2924 (comment)

TravisBuddy · 2019-03-25T10:24:09Z

Travis tests have failed

Hey @karlhorky,
Please read the following log in order to understand the failure reason.
It'll be awesome if you fix what's wrong and commit the changes.

Node.js: 8

View build log

if [[ $(git diff-index HEAD -- *.js *.ts *.md) ]]; then git diff; echo "Prettier Failed. Run `gulp forceprettier` and commit changes to resolve."; exit 1; fi

diff --git a/README.md b/README.md
index 904f215..6350df3 100644
--- a/README.md
+++ b/README.md
@@ -642,7 +642,7 @@ Vim has a lot of nifty tricks and we try to preserve some of them:
   If you have word wrap on and would like the cursor to enter each wrapped line when using <kbd>j</kbd>, <kbd>k</kbd>, <kbd>↓</kbd> or <kbd>↑</kbd>, set the following in VS Code's keybindings.json settings file ([other options exist](https://github.com/VSCodeVim/Vim/issues/2924#issuecomment-476121848) but they are slow):
 
   ```json
-  {
+  ({
     "key": "up",
     "command": "cursorUp",
     "when": "editorTextFocus && vim.active && !inDebugRepl && !suggestWidgetMultipleSuggestions && !suggestWidgetVisible"
@@ -661,10 +661,9 @@ Vim has a lot of nifty tricks and we try to preserve some of them:
     "key": "j",
     "command": "cursorDown",
     "when": "editorTextFocus && vim.active && !inDebugRepl && vim.mode == 'Normal' && !suggestWidgetMultipleSuggestions && !suggestWidgetVisible"
-  }
+  })

❤️ Contributing

This project is maintained by a group of awesome people and contributions are extremely welcome ❤️. For a quick tutorial on how you can help, see our contributing guide.
Prettier Failed. Run [10:23:21] Using gulpfile ~/build/VSCodeVim/Vim/gulpfile.js
[10:23:21] Starting 'forceprettier'...
[10:23:36] Finished 'forceprettier' after 15 s and commit changes to resolve.


</details>


###### TravisBuddy Request Identifier: 0d16d490-4ee8-11e9-af0a-1da2f5ed2a53

TravisBuddy · 2019-03-25T10:27:51Z

Travis tests have failed

Hey @karlhorky,
Please read the following log in order to understand the failure reason.
It'll be awesome if you fix what's wrong and commit the changes.

Node.js: 8

View build log

if [[ $(git diff-index HEAD -- *.js *.ts *.md) ]]; then git diff; echo "Prettier Failed. Run `gulp forceprettier` and commit changes to resolve."; exit 1; fi

diff --git a/README.md b/README.md
index 86188df..6350df3 100644
--- a/README.md
+++ b/README.md
@@ -642,7 +642,7 @@ Vim has a lot of nifty tricks and we try to preserve some of them:
   If you have word wrap on and would like the cursor to enter each wrapped line when using <kbd>j</kbd>, <kbd>k</kbd>, <kbd>↓</kbd> or <kbd>↑</kbd>, set the following in VS Code's keybindings.json settings file ([other options exist](https://github.com/VSCodeVim/Vim/issues/2924#issuecomment-476121848) but they are slow):
 
   ```json
-  {
+  ({
     "key": "up",
     "command": "cursorUp",
     "when": "editorTextFocus && vim.active && !inDebugRepl && !suggestWidgetMultipleSuggestions && !suggestWidgetVisible"
@@ -661,7 +661,7 @@ Vim has a lot of nifty tricks and we try to preserve some of them:
     "key": "j",
     "command": "cursorDown",
     "when": "editorTextFocus && vim.active && !inDebugRepl && vim.mode == 'Normal' && !suggestWidgetMultipleSuggestions && !suggestWidgetVisible"
-  }
+  })

❤️ Contributing

Prettier Failed. Run [10:27:02] Using gulpfile ~/build/VSCodeVim/Vim/gulpfile.js
[10:27:02] Starting 'forceprettier'...
[10:27:16] Finished 'forceprettier' after 14 s and commit changes to resolve.


</details>


###### TravisBuddy Request Identifier: 90630b20-4ee8-11e9-af0a-1da2f5ed2a53

karlhorky · 2019-03-25T10:28:43Z

Prettier has some strange styling for the configuration objects. Maybe we can disable it for this code block?

diff --git a/README.md b/README.md
index 904f215..6350df3 100644
--- a/README.md
+++ b/README.md
@@ -642,7 +642,7 @@ Vim has a lot of nifty tricks and we try to preserve some of them:
   If you have word wrap on and would like the cursor to enter each wrapped line when using <kbd>j</kbd>, <kbd>k</kbd>, <kbd>↓</kbd> or <kbd>↑</kbd>, set the following in VS Code's keybindings.json settings file ([other options exist](https://github.com/VSCodeVim/Vim/issues/2924#issuecomment-476121848) but they are slow):
 
   ```json
-  {
+  ({
     "key": "up",
     "command": "cursorUp",
     "when": "editorTextFocus && vim.active && !inDebugRepl && !suggestWidgetMultipleSuggestions && !suggestWidgetVisible"
@@ -661,10 +661,9 @@ Vim has a lot of nifty tricks and we try to preserve some of them:
     "key": "j",
     "command": "cursorDown",
     "when": "editorTextFocus && vim.active && !inDebugRepl && vim.mode == 'Normal' && !suggestWidgetMultipleSuggestions && !suggestWidgetVisible"
-  }
+  })

Switch to keybindings instead of settings Ref: VSCodeVim/Vim#3623 Ref: VSCodeVim/Vim#2924 (comment)

jpoon · 2019-04-02T03:47:23Z

Sorry for the delay in review, we had a 👶 recently so my spare time is pretty much filled with 🍼 and 😴 .

Seems reasonable. Feel free to disable it for all MD files; it'd be harder to maintain special casing specific blocks.

karlhorky · 2019-04-02T06:54:10Z

Seems reasonable.

Great, cheers for the feedback.

Feel free to disable it for all MD files; it'd be harder to maintain special casing specific blocks.

I'm not sure I understand here... Won't this also be needed for visual line movement across word wrapped Markdown files?

jpoon · 2019-04-02T18:37:59Z

My request was to disable whatever rule prettier requires for wrapping { ... json ... } with parenthesis (ie. your current build failure). I'd much prefer to disable this on ALL markdown files rather than special case your specific code block.

jpoon · 2019-04-02T21:24:47Z

Err, that (2d34a56) is exactly what I don't want. Can we just disable that specific rule globally for MD files? Does prettier have that option?

karlhorky · 2019-04-02T21:35:36Z

Hm, not really, Prettier doesn't work like ESLint in disabling certain rules - it's low-configuration by philosophy.

So unless we want to disable all of the Markdown formatting everywhere (*.md in .prettierignore or removing .md here), AFAIK there's no option in between that and single block ignore / range ignore as far as granularity goes.

jpoon · 2019-04-03T00:51:36Z

Lame.

jpoon · 2019-04-03T00:51:52Z

and merged. Thanks!

alexpattison · 2019-04-09T23:13:48Z

This has the drawback of breaking motions that involve j/k. For example 10j should move ten lines down, but it only moves down one line now. As a workaround I added editorLangId == markdown since that is my primary usecase for this. Keybindings would now read:

  {
    "key": "up",
    "command": "cursorUp",
    "when": "editorTextFocus && vim.active && !inDebugRepl && !suggestWidgetMultipleSuggestions && !suggestWidgetVisible && editorLangId == markdown"
  },
  {
    "key": "down",
    "command": "cursorDown",
    "when": "editorTextFocus && vim.active && !inDebugRepl && !suggestWidgetMultipleSuggestions && !suggestWidgetVisible && editorLangId == markdown"
  },
  {
    "key": "k",
    "command": "cursorUp",
    "when": "editorTextFocus && vim.active && !inDebugRepl && vim.mode == 'Normal' && !suggestWidgetMultipleSuggestions && !suggestWidgetVisible && editorLangId == markdown"
  },
  {
    "key": "j",
    "command": "cursorDown",
    "when": "editorTextFocus && vim.active && !inDebugRepl && vim.mode == 'Normal' && !suggestWidgetMultipleSuggestions && !suggestWidgetVisible && editorLangId == markdown"
  }

Any better way of getting around this so I could still use 10j in soft-wrapped markdown files?

karlhorky · 2019-04-10T13:43:45Z

@alexpattison ah, sorry about that. I've opened #3670 to document this and reword the note about the less-performant alternatives.

dwadden · 2019-06-13T16:14:14Z

Thanks for posting these keybindings, very helpful.

I'm using the VSCode Vim extension. When I add the keybindings mentioned at the top of the thread, things work great in Normal mode, but when I'm in Visual mode or Visual Line mode, using j and k doesn't move by visual line any longer. I tried the naive thing

{
  "key": "k",
  "command": "cursorUp",
  "when": "editorTextFocus && vim.active && !inDebugRepl && vim.mode == 'Visual' && !suggestWidgetMultipleSuggestions && !suggestWidgetVisible"
},

and this does move the cursor by visual line, but it doesn't expand the highlighted region correctly to match the cursor position. Any ideas how to get this to work when in Visual / Visual Line mode?

karlhorky · 2019-06-14T10:19:57Z

@dwadden Oh weird, the bindings work for me in visual and visual line modes 😕 Wonder what's going on...

My VS Code is at version 1.34.0 (a622c65b2c713c890fcf4fbf07cf34049d5fe758).
Edit: Updated to 1.35.0 (553cfb2c2205db5f15f3ee8395bbd5cf066d357d) and it's still working

My keybindings:

https://github.com/karlhorky/dotfiles/blob/b208498a34cea39f2109930686c7bab1534f5fca/settings/Library/Application%20Support/Code/User/keybindings.json

Here's a gif of it working:

dwadden · 2019-06-24T01:14:33Z

Hey @karlhorky thanks for looking at this. The issue only comes up when line wrap is toggled on. Here's a gif to show what I mean.

When visual mode is off and I press j or k, the cursor moves up and down by wrapped line. But when visual mode is on, it doesn't do that. Is that the behavior you're seeing?

karlhorky · 2019-06-24T06:12:44Z

Ah I understand now, ok... I believe this is also happening for me in visual mode - will test in the next few hours.

I wonder if this is actually possible with these key bindings. Maybe the less performant option would work here:

#2924 (comment)

karlhorky · 2019-06-24T08:32:06Z

Yep, can confirm that this is happening for me too.

Not sure about a good workaround here... I tried adding the code at the bottom in settings.json, but it is pretty buggy in the first few minutes using it:

once the selection extends through an empty line, k cannot move upwards through that line again
the first time pressing j or k after entering visual mode, it moves down/up a full line

These issues may be related to #1323.

  // Caution: Buggy!
  "vim.visualModeKeyBindingsNonRecursive": [
    { "before": ["j"], "after": ["g", "j"] },
    { "before": ["k"], "after": ["g", "k"] }
  ],

dwadden · 2019-07-09T21:42:41Z

OK glad you can reproduce. Has a fix actually been merged?

karlhorky · 2019-07-10T10:59:23Z

I didn't report an issue regarding this yet, so I don't think there's been any work on it.

I think that unless we find another solution, it's just a limitation of VSCodeVim for now (this limitation is also present using my workaround in amVim).

dwadden · 2019-07-10T16:58:17Z

OK sounds good. Thanks!

1dancook · 2019-11-08T11:54:54Z

This is such a hack but it seems to work to go past the blank line on the way back up (the issue that @karlhorkey showed above. Just added a little movement before gk

//Caution: still buggy
"vim.visualModeKeyBindings": [
        {
            "before": ["k"],
            "after": ["b","g","k"]
        },
        {
            "before": ["j"],
            "after": ["g","j"]
        }
    ]

karlhorky · 2019-11-09T12:16:14Z

Ah thanks for this @1dancook!

At the moment I'm using amVim, but this seems like it could be useful!

Wish this was just a built-in setting so that we wouldn't have to resort to using these hacks.

I'll have to check out VSCodeVim again some time in the coming months to see if it's more friendly with the default VSCode setup (the reason I'm using amVim now).

cc @J-Fields

bigunyak · 2020-04-02T12:24:25Z

Solution described here is not working for me as it breaks Visual and VisualLine modes completely. 😕
I had to use this method #1323 but yeah, then there is another problem.

karlhorky · 2020-04-02T12:52:39Z

it breaks Visual and VisualLine modes completely

Do you mean that the J and K keys don't move down a single display line in word wrap mode as mentioned above in #3623 (comment) ? Or do you have a different problem?

I'm assuming you meant you tried out the other fix in #2924 (comment) rather than #1323?

bigunyak · 2020-04-02T14:54:23Z

So what I tried is placing this into my keybindings.json

{
  "key": "up",
  "command": "cursorUp",
  "when": "editorTextFocus && vim.active && !inDebugRepl && !suggestWidgetMultipleSuggestions && !suggestWidgetVisible"
},
{
  "key": "down",
  "command": "cursorDown",
  "when": "editorTextFocus && vim.active && !inDebugRepl && !suggestWidgetMultipleSuggestions && !suggestWidgetVisible"
},

With this VisualLine mode doesn't activate at all. Normal Visual mode activates but can't go up/down to the next display line.

This works better in settings.json.

    "vim.normalModeKeyBindingsNonRecursive": [
        { "before": ["down"], "after": ["g", "j"] },
        { "before": ["up"], "after": ["g", "k"] }
      ],
    "vim.visualModeKeyBindingsNonRecursive": [
        { "before": ["down"], "after": ["g", "j"] },
        { "before": ["up"], "after": ["g", "k"] }
      ],

But only until you hit an empty line which break the cursor movement. Also the cursor doesn't keep vertical position for some reason.

UndesW · 2022-02-18T12:14:50Z

I let k and j behave natively as they should in Vim, and configure the up and down arrows to move across wrapped lines as typically desired in prose writing:

In VSCode settings.json, I added the following:
"vim.normalModeKeyBindingsNonRecursive": [
{ "before": ["down"], "after": ["g", "j"] },
{ "before": ["up"], "after": ["g", "k"] }
],
"vim.visualModeKeyBindingsNonRecursive": [
{ "before": ["down"], "after": ["g", "j"] },
{ "before": ["up"], "after": ["g", "k"] }
],

In VScode keybindings.json, I added the following:
{
"key": "up",
"command": "cursorUp",
"when": "editorTextFocus && vim.active && !inDebugRepl && vim.mode == 'Insert' &&!suggestWidgetMultipleSuggestions && !suggestWidgetVisible"
},
{
"key": "down",
"command": "cursorDown",
"when": "editorTextFocus && vim.active && !inDebugRepl && vim.mode == 'Insert' && !suggestWidgetMultipleSuggestions && !suggestWidgetVisible"
},

UndesW · 2022-02-18T14:23:50Z

If one wants to set up j and k to move across wrapped lines in normal and visual mode, while enabling up and down arrows to move across wrapped lines in normal, visual, and insert mode, one may use the following VSCode configurations:

Add the following in the settings.json:
"vim.normalModeKeyBindingsNonRecursive": [
{ "before": ["down"], "after": ["g", "j"] },
{ "before": ["up"], "after": ["g", "k"] },
{ "before": ["j"], "after": ["g", "j"] },
{ "before": ["k"], "after": ["g", "k"] }
],
"vim.visualModeKeyBindingsNonRecursive": [
{ "before": ["down"], "after": ["g", "j"] },
{ "before": ["up"], "after": ["g", "k"] },
{ "before": ["j"], "after": ["g", "j"] },
{ "before": ["k"], "after": ["g", "k"] }
],
add the following in the keybindings.json:

{
"key": "up",
"command": "cursorUp",
"when": "editorTextFocus && vim.active && !inDebugRepl && vim.mode == 'Insert' &&!suggestWidgetMultipleSuggestions && !suggestWidgetVisible"
},
{
"key": "down",
"command": "cursorDown",
"when": "editorTextFocus && vim.active && !inDebugRepl && vim.mode == 'Insert' && !suggestWidgetMultipleSuggestions && !suggestWidgetVisible"
},

Document display line moving best practices

be35a98

To vertically move to wrapped lines when word wrap is on. Ref: #2403 (comment) Ref: #2924 (comment)

karlhorky mentioned this pull request Mar 25, 2019

Arrow keys to navigate within soft-wrapped text block. #2403

Closed

karlhorky changed the title ~~Document display line moving best practices~~ Document display line movement best practices Mar 25, 2019

Remove extra line

a6f432e

karlhorky added a commit to karlhorky/dotfiles that referenced this pull request Mar 25, 2019

Improve config for display line movement

a0f8cd5

Switch to keybindings instead of settings Ref: VSCodeVim/Vim#3623 Ref: VSCodeVim/Vim#2924 (comment)

jpoon added the status/awaiting-feedback label Apr 2, 2019

Disable Prettier formatting on code block

2d34a56

jpoon merged commit 723fdff into VSCodeVim:master Apr 3, 2019

karlhorky mentioned this pull request Apr 3, 2019

[Feature Request] Treat lines with soft wrap the same way as non-broken lines when using j,k #2186

Closed

karlhorky mentioned this pull request Apr 10, 2019

Add note about unsupported motions #3670

Merged

This was referenced Jun 24, 2019

j doesn't go to next "virtual" line like down-arrow does aioutecism/amVim-for-VSCode#21

Closed

Screen Line/Character movement support aioutecism/amVim-for-VSCode#116

Closed

aurangzaib-danial mentioned this pull request Nov 21, 2023

Issue with cursor position using visual line movement (gj and gk) #1323

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Document display line movement best practices #3623

Document display line movement best practices #3623

karlhorky commented Mar 25, 2019 •

edited

Loading

TravisBuddy commented Mar 25, 2019

❤️ Contributing

TravisBuddy commented Mar 25, 2019

❤️ Contributing

karlhorky commented Mar 25, 2019

jpoon commented Apr 2, 2019

karlhorky commented Apr 2, 2019

jpoon commented Apr 2, 2019

jpoon commented Apr 2, 2019 •

edited

Loading

karlhorky commented Apr 2, 2019 •

edited

Loading

jpoon commented Apr 3, 2019

jpoon commented Apr 3, 2019 •

edited

Loading

alexpattison commented Apr 9, 2019

karlhorky commented Apr 10, 2019 •

edited

Loading

dwadden commented Jun 13, 2019

karlhorky commented Jun 14, 2019 •

edited

Loading

dwadden commented Jun 24, 2019 •

edited

Loading

karlhorky commented Jun 24, 2019

karlhorky commented Jun 24, 2019

dwadden commented Jul 9, 2019

karlhorky commented Jul 10, 2019

dwadden commented Jul 10, 2019

1dancook commented Nov 8, 2019

karlhorky commented Nov 9, 2019

bigunyak commented Apr 2, 2020 •

edited

Loading

karlhorky commented Apr 2, 2020 •

edited

Loading

bigunyak commented Apr 2, 2020

UndesW commented Feb 18, 2022

UndesW commented Feb 18, 2022

Document display line movement best practices #3623

Document display line movement best practices #3623

Conversation

karlhorky commented Mar 25, 2019 • edited Loading

TravisBuddy commented Mar 25, 2019

Travis tests have failed

Node.js: 8

❤️ Contributing

TravisBuddy commented Mar 25, 2019

Travis tests have failed

Node.js: 8

❤️ Contributing

karlhorky commented Mar 25, 2019

jpoon commented Apr 2, 2019

karlhorky commented Apr 2, 2019

jpoon commented Apr 2, 2019

jpoon commented Apr 2, 2019 • edited Loading

karlhorky commented Apr 2, 2019 • edited Loading

jpoon commented Apr 3, 2019

jpoon commented Apr 3, 2019 • edited Loading

alexpattison commented Apr 9, 2019

karlhorky commented Apr 10, 2019 • edited Loading

dwadden commented Jun 13, 2019

karlhorky commented Jun 14, 2019 • edited Loading

dwadden commented Jun 24, 2019 • edited Loading

karlhorky commented Jun 24, 2019

karlhorky commented Jun 24, 2019

dwadden commented Jul 9, 2019

karlhorky commented Jul 10, 2019

dwadden commented Jul 10, 2019

1dancook commented Nov 8, 2019

karlhorky commented Nov 9, 2019

bigunyak commented Apr 2, 2020 • edited Loading

karlhorky commented Apr 2, 2020 • edited Loading

bigunyak commented Apr 2, 2020

UndesW commented Feb 18, 2022

UndesW commented Feb 18, 2022

karlhorky commented Mar 25, 2019 •

edited

Loading

jpoon commented Apr 2, 2019 •

edited

Loading

karlhorky commented Apr 2, 2019 •

edited

Loading

jpoon commented Apr 3, 2019 •

edited

Loading

karlhorky commented Apr 10, 2019 •

edited

Loading

karlhorky commented Jun 14, 2019 •

edited

Loading

dwadden commented Jun 24, 2019 •

edited

Loading

bigunyak commented Apr 2, 2020 •

edited

Loading

karlhorky commented Apr 2, 2020 •

edited

Loading