I Brought Neovim’s Best Navigation Plugin to VS Code (And You Don’t Need Vim to Use It)

Sourav — Thu, 13 Nov 2025 08:35:45 +0000

flash.nvim for VSCode

We do it hundreds of times a day. We see a spot in our code a function name, a variable, a specific line and we need to get our cursor there.

So what do we do? We grab the mouse, breaking our typing flow. We scroll, scroll, scroll. Or we hit Ctrl+F, type a query, hit Enter (oops, wrong one), Enter (still wrong), Enter (there it is), and then Escape.

It’s a tiny, fractional waste of time. But add it up, and it’s a significant drag on our productivity.

In the world of Neovim (a hyper-efficient, keyboard-first code editor), they solved this problem. A plugin called flash.nvim is legendary for its speed. You press a key, type one or two characters, and the plugin overlays 1–2 character labels on every match. Type the label, and your cursor is instantly there. It’s navigation that feels like a superpower.

I work in Visual Studio Code, but I missed that superpower.

So, I decided to build it myself.

The Unofficial flash.nvim Extension for Visual Studio Code - Fast, precise, label-based code navigation inspired by Neovim's flash.nvim plugin.

Overview

flash.nvim for VSCode brings the power of Neovim's most popular navigation plugin, flash.nvim, to Visual Studio Code. This extension provides lightning-fast, label-based code navigation that lets you jump to any visible location with just 2-3 keystrokes.

Why Choose flash.nvim for VSCode?

⚡ Lightning Fast: Jump anywhere on screen in milliseconds
🎯 Precise Navigation: Label-based system eliminates guesswork
🧠 Smart Symbol & Treesitter Selection: Instantly select entire functions, blocks, or scopes - turns 10+ keystrokes into 2-3 for daily copy/cut/refactor tasks
🌐 Universal: Works with vscode.dev (VS Code for Web)
👥 For Everyone: No Vim knowledge required - great for all developers
🔥 Battle-Tested: Based on Neovim's most loved navigation plugin
🎨 Highly Customizable: Adjust colors, labels, and behavior to your preference

Perfect Alternative To

Looking for alternatives to EasyMotion, Jumpy, Jumpy2, or AceJump? flash.nvim for VSCode offers superior performance and a more intuitive label system, making it the best choice for fast code navigation in VS Code.

Installation

Install from VS Code Marketplace

Method 1: Direct Install (Recommended)

Click here to install flash.nvim for VSCode directly from the VS Code Marketplace
Click the "Install" button
VS Code will open and install the extension automatically

Method 2: Install from VS Code

Open Visual Studio Code
Go to the Extensions view (Ctrl+Shift+X on Windows/Linux or Cmd+Shift+X on macOS)
Search for "flash.nvim for vscode" or "flash vscode"
Look for the extension by souravahmed
Click Install
Reload VS Code if prompted

Method 3: Command Line

code --install-extension souravahmed.flash-vscode-latest

Usage

Tutorial

Tutorial Video

Activate Navigation: Flash VSCode provides two main functionalities:

flash-vscode.start: alt+f Moves the cursor directly to the selected target.
alt+f while some text is selected will search for the selected text.
Press alt+f or alt+shift+f then <search> then enter to goto next match, shift+enter to goto previous match.
Press alt+f or alt+shift+f then enter to search previously entered query.
Select text and press alt+f or alt+shift+f then enter to search and mark the selected text.
Press alt+f then alt+enter to mark all symbols (functions, classes, variables) in the current file.
Press alt+f (or any active flash mode) then shift+alt+enter for treesitter-style selection - marks hierarchical syntactic scopes (expressions, statements, blocks) around cursor for smart selection.
Press alt+f then alt+j or alt+k to mark all the next line or previous line.

Next Line	Previous Line

🚀 Smart Symbol & Treesitter Selection - Game Changer for Daily Coding:

Treesitter Selection

Treesitter Label	Treesitter Selection

Dramatically reduce the friction of selecting, cutting, and copying code. No more tedious click-dragging, Shift+Arrow key combos, or hunting for scope boundaries!

Symbol Navigation (alt+enter):

Instantly jump to and select any function, class, or variable in your file
Press alt+f → alt+enter to label all symbols
Hit a label key to select the entire symbol definition (from start to end)
Perfect for: Quickly selecting functions to cut/copy/refactor

Treesitter Selection (shift+alt+enter):

The fastest way to select code scopes - expressions, statements, blocks, functions
Press alt+f (or any active flash mode) → shift+alt+enter
Labels appear on both opening and closing boundaries ({ and }, function start/end, etc.)
Includes sticky scroll context - parent scopes visible at the top
Select a label to automatically select the entire scope
No more manual "find the matching brace" - LSP knows your code structure!

Why this matters for daily programming:

Want to copy a function? alt+f → alt+enter → hit the label → Ctrl+C ✅
Need to select an if-block? shift+alt+enter → hit the label → Done ✅
Refactoring nested code? Jump between scope boundaries instantly ✅
Turns 10+ keystrokes into 2-3 keystrokes for common selection tasks

Selection:

flash-vscode.startSelection: alt+shift+f Extends the selection from the original position to the target.

Preview
- Added a preview in status bar.
Cancel Navigation:
- Press Backspace to remove the last character of your query, or press Escape to exit jump mode.

Configuration

Case Sensitivity

By default, flash-vscode's search is using smart case. Meaning if any uppercase latter exists then becomes case sensitive, else becomes case insensitive. To change this behavior, add to your settings:

{
  "flash-vscode.caseSensitive": false
}

Appearance Customization

The following configuration options allow you to customize the visual appearance of Flash VSCode:

{
  "flash-vscode.dimOpacity": "0.65",
  "flash-vscode.matchColor": "#3e68d7",
  "flash-vscode.matchFontWeight": "bold",
  "flash-vscode.labelColor": "#ffffff",
  "flash-vscode.labelBackgroundColor": "#ff007c",
  "flash-vscode.labelQuestionBackgroundColor": "#3E68D7",
  "flash-vscode.labelFontWeight": "bold",
  "flash-vscode.labelKeys": "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()-_=+[]{}|;:'\",.<>/?"
}

flash-vscode.dimOpacity: Opacity used to dim text.
flash-vscode.matchColor: Color used for matched text.
flash-vscode.matchFontWeight: Font weight for matched text.
flash-vscode.labelColor: Color used for label text.
flash-vscode.labelBackgroundColor: Background color for labels.
flash-vscode.labelQuestionBackgroundColor: Background color for question labels.
flash-vscode.labelFontWeight: Font weight for label text.
flash-vscode.labelKeys: Characters to use for labels.

VSCodeVim Integration (Optional)

To invoke Flash VSCode commands from VSCodeVim, in your settings.json, add entries to "vim.normalModeKeyBindingsNonRecursive" as follows:

"vim.normalModeKeyBindingsNonRecursive": [
  {
    "before": ["s"],
    "commands": ["flash-vscode.start"]
  },
  {
    "before": ["S"],
    "commands": ["flash-vscode.startSelection"]
  },
  {
    "before": [ "<BS>" ],
    "commands": [ "flash-vscode.backspace" ]
  },
]

This configuration triggers Flash VSCode when you press s or S in normal mode.

Try It and Stop Scrolling

This was a passion project to bring a piece of navigation magic I loved into the editor I use every day. If you’re like me and you want to spend less time moving and more time coding, I’d be thrilled if you gave it a try.

You can install it directly from the marketplace or from your command line.

➡️ Install flash.nvim for VSCode from the Marketplace

Or via the command line:

code --install-extension souravahmed.flash-vscode-latest

Check it out, and let me know what you think on GitHub (I'll need to find your GitHub link for this part, but you can add it). Happy coding!

QWIK state management syntax for React with a custom hook. Alternative to setState.

Sourav — Sat, 03 Aug 2024 08:06:08 +0000

Utilizing Javascript proxy this custom changes the default way of setting state in React which is a function that requires a function.
By using this hook simply assigning value to state will result same as setState. It’s really a wrapper around useState.

Here is usProxyState simple 20 lines of code.

https://github.com/Sourav9063/watchtogether/blob/master/src/helper/hooks/useProxyState.js

    import { useState } from "react";
    export const useProxyState = (initialState = {}) => {
      if (typeof initialState != "object") {
        initialState = { value: initialState };
      }
      const [state, setState] = useState(initialState);
      state.setState = setState;
      const handler = {
        set(_, prop, value) {
          if (value !== state[prop]) {
            setState((state) => {
              return { ...state, [prop]: value };
            });
          }
          return Reflect.set(...arguments);
        },
      };
      const stateProxy = new Proxy(state, handler);
      return stateProxy;
    };

Notes

For Object type state, direct assignment will work i.e. state.count. Any other type state you can access and modify via state.value
You can get the default setState in state.setState()

    const state1 = useProxyState({ count: 1 });
    const state2 = useProxyState(1);
    //...
    state1.count = 100;
    state2.value = 200;

Comparisons

useProxyState

    "use client";
    import { useProxyState } from "@/helper/hooks/useProxyState";
    import styles from "../page.module.css";
    export default function Personal() {
      const state1 = useProxyState({ count: 1 });// object
      const state2 = useProxyState(state1.count * 2);// not object

      state2.value = state1.count * 2; //no need for useEffect. And cannot be changed else where.
      return (
        <>
          <main className={styles.main}>
            <div className={styles["cards"]}>
              <button
                onClick={() => {
                  state1.count++; //simple assignment will update the state
                }}
              >{state1.count}
              </button>
              <button
                onClick={() => {
                  state2.value++;// for values other than object, use value.
                }}
              >{state2.value}
              </button>
            </div>
          </main>
        </>
      );
    }

Default useState

    "use client";
    import styles from "../page.module.css";
    import { useEffect, useState } from "react";

    export default function Personal() {
      const [state3, setState3] = useState({
        count: 1,
      });
      const [state4, setState4] = useState(state3.count * 2);
      useEffect(() => {
        setState4(state3.count * 2);
        return () => {};
      }, [state3.count]);

      return (
        <>
          <main className={styles.main}>
            <div className={styles["cards"]}>
              <button
                onClick={() => {
                  setState3((state) => ({ ...state, count: state.count + 1 }));
                }}
              >
                useState {state3.count}
              </button>
              <button
                onClick={() => {
                  setState4((state) => {
                    return state + 1;
                  });
                }}
              >
                useState {state4}
              </button>
            </div>
          </main>
        </>
      );
    }

Demo Source

GITHUB: sourav9063
WEBSITE: https://sourav9063.github.io/
LINKDIN: sourav-ahmed

DEV Community: Sourav