DEV Community: Anson Heung

Rust From & Into Traits - A Full Beginner’s Guide 🦀

Anson Heung — Sat, 11 Jan 2025 08:06:09 +0000

Rust provides the From and Into traits for converting one type into another. Mastering these two traits is crucial for beginners since they are used very frequently. I faced some questions and difficulties when I was learning them, and I think I’m not alone here. Hopefully this article will clear things up! 🦀

What is From trait?
What is Into trait?
Implement From gives you Into for free
When to use From or Into?
Use TryFrom if conversion may fail
impl Into<T> in function parameters

What is `From` trait?

The From trait has an associated function called from for converting a value’s type to another one. Here’s the simplified definition:

trait From<T> {
    // Converts to this type from the input type.
    fn from(value: T) -> Self;
}

Okay that isn’t too useful… Let’s look at an example.

Suppose we have a struct called Rectangle. We want users to easily create a rectangle from a tuple of dimensions (e.g. (10, 20)). To support type conversion from (usize, usize) to Rectangle, we implement the From trait:

#[derive(Debug, Clone, PartialEq)]
struct Rectangle {
    width: usize,
    height: usize,
}

// Convert (usize, usize) -> Rectangle
impl From<(usize, usize)> for Rectangle {
    fn from((width, height): (usize, usize)) -> Self {
        Self { width, height }
    }
}

fn main() {
    let rect = Rectangle::from((30, 50));
    println!("{rect:?}"); // Rectangle { width: 30, height: 50 }
}

Initially, I found impl From<A> for B tricky to read. If we read it out loud as “implement from A for B”, I got confused by whether it is “from A to B” or “from B to A” 😅. Eventually, I’ve come up with this visual cue:

You may already be using the From trait without noticing. For example, you can convert a string slice &str into a String by calling String::from().

fn main() {
    let str_slice = "Hello World!";
    let string = String::from(str_slice);
    println!("{string}");
}

This is because the standard library implements From trait for String to allow conversion from &str:

// In Rust standard library's source code
impl From<&str> for String {
        fn from(s: &str) -> String {
            // ...
        }
}

(🔼 Table of Contents)

What is `Into` trait?

The Into trait is another trait for type conversion. It has a method called into that turns a type into another. Here’s the simplified definition:

trait Into<T> {
    // Converts this type into the (usually inferred) input type.
    fn into(self) -> T;
}

Let’s head back to our Rectangle example. We can implement Into for (usize, usize) to convert it into Rectangle.

#[derive(Debug, Clone, PartialEq)]
struct Rectangle {
    width: usize,
    height: usize,
}

// Convert (usize, usize) -> Rectangle
impl Into<Rectangle> for (usize, usize) {
    fn into(self) -> Rectangle {
        Rectangle {
            width: self.0,
            height: self.1,
        }
    }
}

fn main() {
    let rect: Rectangle = (30, 50).into();
    println!("{rect:?}"); // Rectangle { width: 30, height: 50 }
}

💡 In practice we ONLY need to implement From trait instead of Into trait. We’ll explain that later in the next section.

Type Annotation

Using .into() has a huge caveat. Rust must be able to infer the type that you’re converting “into”. If we remove the type annotation from rect, it fails to compile:

error[E0283]: type annotations needed
  --> src/main.rs:17:9
   |
17 |     let rect = (30, 50).into();
   |         ^^^^            ---- type must be known at this point
   |

This is because (30, 50) can convert into other types that are not Rectangle, so Rust don’t know what you’re converting to! For example, Rust can convert the tuple back to a primitive array in addition to a Rectangle:

fn main() {
    let arr: [usize; 2] = (30, 50).into();
    println!("{arr:?}"); // [30, 50]

    let rect: Rectangle = (30, 50).into();
    println!("{rect:?}"); // Rectangle { width: 30, height: 50 }

    // 🚨 ERROR: Not sure what you're convering into!
    let unknown = (30, 50).into();
}

(🔼 Table of Contents)

Implement `From` gives you `Into` for free

If you look at From trait’s documentation:

One should always prefer implementing From over Into because implementing From automatically provides one with an implementation of Into thanks to the blanket implementation¹ in the standard library.

¹ See “What are Blanket implementations in Rust?”

To put it simply:

Let’s head back to the Rectangle example:

#[derive(Debug, Clone, PartialEq)]
struct Rectangle {
    width: usize,
    height: usize,
}

// Converts (usize, usize) to Rectangle
// You receive `impl Into<Rectangle> for (usize, usize)` for free!
impl From<(usize, usize)> for Rectangle {
    fn from((width, height): (usize, usize)) -> Self {
        Self { width, height }
    }
}

fn main() {
    let r1 = Rectangle::from((3, 4));
    let r2: Rectangle = (3, 4).into();
    assert_eq!(r1, r2);
}

As you can see, simply implementing From trait gives us two ways to perform type conversion:

From - Rectange::from((3, 4))
Into - (3, 4).into()

💡 IMPORTANT: Both ways converts (usize, usize) into Rectangle. The Into implementation you get for free has the SAME direction of type conversion as From (i.e. tuple to Rectangle)!

(🔼 Table of Contents)

When to use `From` or `Into`?

If both From and Into are for converting type A to B, you may ask:

When should I use from() or.into()?

The answer is:

Use .into() if you want less verbosity
- 👍 No need to import the type, no need to wrap in from() function call
- 👎 Less obvious on what type it is converted to
- 👎 More difficult to locate how the type conversion is implemented
Use from() if you want to be more explicit on what type it converts to

Verbosity

Using from() is more verbose than .into() because you may need to import the type that it’s converted to, and wrapping in function calls make the code longer.

If the struct has a long name (e.g. UserDefinedRectangle), then using .into() is much cleaner:

fn is_same(r1: UserCreatedRectangle, r2: UserCreatedRectangle) -> bool {
    r1.width == r2.width && r1.height == r2.height
}

fn main() {
    let dim_1 = (3, 4);
    let dim_2 = (5, 6);

    // 🤢 `from()` is a long beam of text!
    is_same(UserCreatedRectangle::from(dim_1), UserCreatedRectangle::from(dim_2));

    // 😍 `.into()` is very clean
    is_same(dim_1.into(), dim_2.into());
}

Moreover, it’s common to use .into() instead of constructors (e.g. new()) to reduce verbosity. For example:

#[derive(Debug, Clone, PartialEq)]
struct Rectangle {
    width: usize,
    height: usize,
}

impl Rectangle {
    // Rectangle constructor
    fn new(width: usize, height: usize) -> Self {
        Self { width, height }
    }
}

impl From<(usize, usize)> for Rectangle {
    fn from((width, height): (usize, usize)) -> Self {
        Self { width, height }
    }
}

fn compare_rectangles(r1: Rectangle, r2: Rectangle) -> bool {
    r1.width == r2.width && r1.height == r2.height
}

fn main() {
    // 🤢 Constructors are verbose
    assert!(compare_rectangles(
        Rectangle::new(2, 3),
        Rectangle::new(2, 3)
    ));

    // 😍 Much cleaner with `.into()`
    assert!(compare_rectangles((2, 3).into(), (2, 3).into()))
}

Locating implementation

One drawback of .into() over from() is that it’s more difficult to find how the type is converted.

Usually from() is directly associated to a concrete struct/enum, so using “Go to Definition” in your editor will directly jump to the implementation 👇

However, the .into() method is usually derived from a blanket implementation of From<T>, so using “Go to Definition” on .into() will jump to the Rust’s blanket implementation! 👇

To see how the type conversion is implemented, you’ll need to find where impl From<(usize, usize)> for Rectangle is located. While our example places this implementation next to the Rectangle’s definition, this may not be the case for other libraries.

(🔼 Table of Contents)

Use `TryFrom` if conversion may fail

Sometimes converting from one type to another may fail. A noob may call panic if type conversion fail, but this may be a bad idea since the entire program will exit immediately.

For example, let’s say every Rectangle must not have a zero area:

impl From<(usize, usize)> for Rectangle {
    fn from((width, height): (usize, usize)) -> Self {
        if width == 0 || height == 0 {
            // 👎👎 AVOID panics! Handle it gracefully!
            panic!("Zero area rectangles are not allowed");
        }
        Rectangle { width, height }
    }
}

Instead, use the TryForm trait. The conversion will return a Result according to the trait’s definition. You’ll need to specify the input type T and also the error type Error if conversion fails:

// Simplified definition
trait TryFrom<T> {
    type Error;

    fn try_from(value: T) -> Result<Self, Self::Error>;
}

Here’s an example:

#[derive(Debug, Clone, PartialEq)]
struct Rectangle {
    width: usize,
    height: usize,
}

// We prefer enums over strings for errors
#[derive(Debug)]
enum RectangleConversionError {
    ZeroArea,
}

// ✅ Rectangle::try_from((usize, usize))
impl TryFrom<(usize, usize)> for Rectangle {
    type Error = RectangleConversionError;

    fn try_from((width, height): (usize, usize)) -> Result<Self, Self::Error> {
        if width == 0 || height == 0 {
            Err(RectangleConversionError::ZeroArea)
        } else {
            Ok(Rectangle { width, height })
        }
    }
}

fn main() {
    let r1 = Rectangle::try_from((5, 2));
    println!("{r1:?}"); // Ok(Rectangle { width: 5, height: 2 })

    let r2 = Rectangle::try_from((0, 2));
    println!("{r2:?}"); // Err(ZeroArea)
}

💡 Similar to From, implementing TryFrom gives you TryInto for free!

fn main() {
    // Don't forget to add type annotation, so Rust knows what you're casting into
    //        vvvvvvvvvvvvvvvvvvvvvv
    let result: Result<Rectangle, _> = (0, 0).try_into();
    assert!(result.is_err());
}

(🔼 Table of Contents)

`impl Into<T>` in function parameters

One trick that you can do is to use impl Into<T> as the type of a function parameter instead of just T. This is known as “impl trait type”.

For example, instead of requiring each call’s argument to add .into(), such as:

fn compare_rectangles(r1: Rectangle, r2: Rectangle) -> bool {
    r1.width == r2.width && r1.height == r2.height
}

fn main() {
    // I need to add `.into()` for each argument
    compare_rectangles((3, 5).into(), (3, 6).into());
}

You can specify the parameter type as impl Into<Rectangle>:

//                        vvvvvvvvvvvvvvvvvvvv      vvvvvvvvvvvvvvvvvvvv
fn compare_rectangles(r1: impl Into<Rectangle>, r2: impl Into<Rectangle>) -> bool {
    let r1: Rectangle = r1.into();
    let r2: Rectangle = r2.into();
    r1.width == r2.width && r1.height == r2.height
}

fn main() {
    // Notice I don't need to call `.into()` for the arguments
    println!("{}", compare_rectangles((3, 5), (3, 5))); // true
    println!("{}", compare_rectangles((3, 5), (5, 3))); // false
}

This works because impl Into<Rectangle> basically means:

“I accept any types that can turn into a Rectangle (i.e. implements Into<Rectangle>)”

Pros and cons:

👍 Less verbose to call .into() for every argument. This is especially useful if the function is frequently called using arguments with .into()
👎 Function signature looks more complicated

(🔼 Table of Contents)

That’s pretty much all I want to share. Don’t forget to like and share this post if you found it useful, cheers! 🙌

10 More VS Code Vim Tricks to Code Faster ⚡

Anson Heung — Sat, 06 Jul 2024 10:57:13 +0000

💡 IMPORTANT UPDATE (2024-05-11)

Dev.to has a serious bug where GIFs cannot render properly. Please read the article in the below alternative link instead 🙏

https://gist.github.com/AnsonH/c4c9f5d3b363a51c192269efc806b8c2

Around a year ago, I published the article “10 VS Code Vim Tricks to Boost Your Productivity ⚡”, which I shared various tips for the VSCodeVim extension. Turns out that the article was a hit, so allow me to share a few more VS Code Vim tips that I have up my sleeves 😆.

Prerequisites:

You’ve installed the VSCodeVim extension
Basic understanding of Vim keybindings. This guide is NOT for total beginners!

(Previous 10 Tips)

Navigation
- #1 - Tabs Management
- #2 - Splits Management
- #3 - Multi-Cursor
- #4 - Quick Search
Vim Features
- #5 - Emulated Plugins
- #6 - Macros
Git
- #7 - Peek Diff
- #8 - Revert Hunk or Selected Lines
- #9 - Jump to Previous/Next Changes
- #10 - Open File on Remote

(Full Settings: settings.json | keybindings.json)

Navigation

#1 - Tabs Management

I prefix all my custom keybindings for managing editor tabs with the Shift key so that it’s easy to remember. For tab navigation:

Shift + h - Focus the left tab
Shift + l - Focus the right tab
Shift + q - Close current tab

Notice how intuitive they are, since h and l keys in Vim means left and right, and q means “quit”.

(💡 Click on the GIF if it's not playing)

To define the custom keybindings, open settings.json by pressing "Ctrl+Shift+P" and search for “Preferences: Open User Settings (JSON)”. Then, add the following item:

{
  "vim.normalModeKeyBindings": [
    {
      "before": ["H"], // Focus previous tab at the left
      "commands": ["workbench.action.previousEditor"]
    },
    {
      "before": ["L"], // Focus next tab at the right
      "commands": ["workbench.action.nextEditor"]
    },
    {
      "before": ["Q"], // Close current tab
      "after": ["<C-w>", "q"]
    }
  ]
}

As for reorganizing the order of tabs:

Shift + LeftArrow - Move tab leftwards
Shift + RightArrow - Move tab rightwards

Setting up this keybinding is a bit tricky. VS Code has default keybindings where “Shift + LeftArrow” will select one character at the cursor’s left side (similar for “Shift + RightArrow”).

Actually we don’t need that since Vim’s Visual Mode can achieve the same thing via vh and vl keybindings. Thus, we need to disable VS Code’s default keybindings for Shift + Left/Right.

Open keybindings.json via “Ctrl + Shift + P” → “Preferences: Open Keyboard Shortcuts (JSON)” and append the following items:

[
  {
    "key": "shift+left",
    "command": "-cursorColumnSelectLeft",
    "when": "editorColumnSelection && textInputFocus"
  },
  {
    "key": "shift+left",
    "command": "-cursorLeftSelect",
    "when": "textInputFocus && vim.mode != 'Visual'"
  },
  {
    "key": "shift+left",
    "command": "workbench.action.moveEditorLeftInGroup",
    "when": "vim.mode == 'Normal'"
  },
  {
    "key": "shift+right",
    "command": "-cursorColumnSelectRight",
    "when": "editorColumnSelection && textInputFocus"
  },
  {
    "key": "shift+right",
    "command": "-cursorRightSelect",
    "when": "textInputFocus && vim.mode != 'Visual'"
  },
  {
    "key": "shift+right",
    "command": "workbench.action.moveEditorRightInGroup",
    "when": "vim.mode == 'Normal'"
  }
]

(🔼 Table of Contents)

#2 - Splits Management

I prefix all splits-related keybindings with Ctrl key, similar to Tip #1 where I prefix all tabs-related keybindings with Shift key.

To create splits easily, I’ve defined 2 custom keybindings:

| (Shift + \) - Split tab vertically
_ - Split tab horizontally

I picked these two symbols because it looks like the split direction (| is a vertical stroke, _ is a horizontal stroke).

{
  "vim.normalModeKeyBindings": [
    {
      "before": ["|"], // Split tab vertically
      "after": ["<C-w>", "v"]
    },
    {
      "before": ["_"], // Split tab horizontally
      "after": ["<C-w>", "s"]
    }
  ]
}

(💡 <C-w> is a Vim keybinding syntax that means Ctrl + w)

The Shift + q keybinding we saw from Tip #1 can also close a split if it only has one tab 👇

To navigate around splits, I don’t like Vim’s <C-w> h/j/k/l keybindings because I have to press Ctrl + w every time. To reduce the number of keystrokes, I use Ctrl + h/j/k/l instead:

{
  "vim.normalModeKeyBindings": [
    {
      "before": ["<C-h>"], // Focus split window at left
      "commands": ["workbench.action.focusLeftGroup"]
    },
    {
      "before": ["<C-j>"], // Focus split window at right
      "commands": ["workbench.action.focusBelowGroup"]
    },
    {
      "before": ["<C-k>"], // Focus split window at above
      "commands": ["workbench.action.focusAboveGroup"]
    },
    {
      "before": ["<C-l>"], // Focus split window at below
      "commands": ["workbench.action.focusRightGroup"]
    }
  ]
}

⚠️ For Windows/Linux users, the Ctrl + k keybinding may not work properly. You may see this message at the bottom bar:

(Ctrl + K) was pressed. Waiting for second key of chord…

This is because VS Code has a lot of default keyboard shortcuts that starts with Ctrl + k (e.g. Ctrl+K Ctrl+S to open keyboard shortcuts). As a fallback, you can use Vim’s original keybinding of Ctrl+w k.

(🔼 Table of Contents)

#3 - Multi-Cursor

VS Code’s multi-cursor editing is also supported in VS Code Vim.

Below are the built-in VS Code keybindings to enter multi-cursor mode:

MacOS - Cmd + d
Windows/Linux - Ctrl + d

Unfortunately for Windows/Linux users, pressing Ctrl + d will instead scroll down the file, because it clashes with Vim’s keybinding of <C-d> for scrolling down a file. As a workaround, I remapped Ctrl + d to Alt + d to enter multi-cursor mode. To do that, append these to keybindings.json:

[
  {
    "key": "ctrl+d",
    "command": "-editor.action.addSelectionToNextFindMatch",
    "when": "editorFocus"
  },
  {
    "key": "alt+d",
    "command": "editor.action.addSelectionToNextFindMatch",
    "when": "editorFocus"
  }
]

Alternative to Cmd/Alt + d, VS Code Vim also has a built-in keybinding of gb to enter multi-cursor mode. Here’s a demo in MacOS for both the Cmd + d and gb keybindings:

VS Code Vim treats multi-cursor mode as a variant of Visual Mode, so you need to use Visual Mode keybindings to perform multi-cursor actions, such as:

Shift + i - Move to beginning of selection and enter Insert Mode
Shift + a - Move to end of selection and enter Insert Mode
s or c - Delete word and enter Insert Mode

For example, I need to press Shift + a in order to start typing at the end of the word (unlike in Normal Mode where I only need to type a):

#4 - Quick Search

To quickly search text from files, I’ve created the <leader>f keybinding:

💡 <leader> stands for Leader Key, which is commonly used as a prefix for user-defined shortcuts. By default it's the backslash key (\), but we commonly map it to Space key (see vim.leader option below)

{
  "vim.leader": "<space>",
  "vim.normalModeKeyBindings": [
    {
      "before": ["<leader>", "f"], // Search text
      "commands": ["workbench.action.findInFiles"]
    }
  ]
}

I also created a keybinding of <leader>s to search all symbols in a workspace. This will save you a lot of time from locating the definition of a symbol.

{
  "vim.normalModeKeyBindings": [
    {
      "before": ["<leader>", "s"], // Search symbol
      "commands": ["workbench.action.showAllSymbols"]
    }
  ]
}

For example, I want to directly jump to a React component called SaveButton. To do that, I launch the symbol search via <leader>s and enter the component name:

💡 Tip: If you place your cursor under a word (e.g. SaveButton) and press <leader>s, VS Code will automatically fill that word in the search bar 👇

(🔼 Table of Contents)

Vim Features

#5 - Emulated Plugins

VS Code Vim emulates quite a number of Vim plugins. While I’m not going to walkthrough every plugin here (see docs for the full list), I want to highlight a plugin called vim-surround.

This plugin will save you tons of time when working with surrounding characters like paranthesis, brackets, quotes, and XML tags. Here’s a quick cheatsheet:

Surround Command	Description
`y s <motion> <desired>`	Add desired surround around text defined by
`d s <existing>`	Delete existing surround
`c s <existing> <desired>`	Change existing surround to desired
`S <desired>`	Surround when in visual modes (surrounds full selection)

For a full guide, please refer to vim-surround’s GitHub README.

Examples:

ysw) - Add () surround around a word
ds] - Delete the [] that surrounds the cursor
cs)] - Changes the () surrounding to []
S} - Surrounds the selected text with {} block

(🔼 Table of Contents)

#6 - Macros

Macro is a powerful feature in Vim that lets you record a series of commands and replay them. It’s useful to perform similar code changes for many times.

For example, let’s say I have a JavaScript object and I want to turn each value from a string to an array of strings. It’d be very tedious to manually edit line-by-line:

const data = {
  item1: "one",  // -> item1: ["one"]
  item2: "two",  // -> item2: ["two"]
  ...
}

Here’s the anatomy of macros:

Record a macro: q<register><commands>q.
- Begin a macro recording with q followed by <register> (i.e. a single letter, which is like the name of a save slot). For example, qa means I record a macro to a slot named a.
- <commands> is the series of Vim keybindings you wish to perform.
- End the recording by pressing q.
To play a macro: @<register>.
- <register> is the single letter that you just recorded your macro to. For example, @a will play the commands that I’ve previously recorded via qa<commands>q.
- You can play the macro multiple times. For example, 4@a plays the macro 4 times.

Back to our example. We basically want to repeat the action of adding a [] bracket around the string value. Let’s record our macro:

Place our cursor at start of the object key name.
qa - Begin recording the macro to slot a.
f" - Move the cursor to the first double quote.
yst,] - A vim-surround keybinding that we saw from Tip #5. It means adding a [] bracket for the text from the current cursor’s position (first double quote) till the first comma (i.e. t,).
j0w - Places the cursor in an appropriate location before the macro ends. We move one line down with j, then move to beginning of first word with 0w.
- 💡 The cursor’s end position matters because it affects the repeatability of the macro.
q - Stops the macro recording.

To confirm the macro works, let’s replay it once via @a. Note how the cursor perfectly lands at the start of next line (item3), so that we can replay the macro consecutively via 4@a (i.e. play 4 times):

(🔼 Table of Contents)

Git

All my custom Git keybindings are prefixed with <leader>g, where g stands for git. I highly recommend grouping related keybindings with the same prefix so that it’s easier to remember 👍.

#7 - Peek Diff

If your cursor is located inside a Git hunk, I can press <leader>gp to peek the diff changes (gp = git peek).

{
  "vim.normalModeKeyBindings": [
    {
      "before": ["<leader>", "g", "p"], // Peek Git diff for the changed line
      "commands": ["editor.action.dirtydiff.next"]
    }
  ]
}

(🔼 Table of Contents)

#8 - Revert Hunk or Selected Lines

To revert a Git hunk (i.e. discard unstaged changes) in Normal Mode:

Place my cursor inside the Git hunk
Press <leader>gr (gr = git revert)

{
  "vim.normalModeKeyBindings": [
    {
      "before": ["<leader>", "g", "r"], // Revert hunk
      "commands": ["git.revertSelectedRanges"]
    }
  ]
}

To discard multiple hunks at the same time, I’ve also defined the same keybinding for Visual Mode:

{
  "vim.visualModeKeyBindings": [
    {
      "before": ["<leader>", "g", "r"], // Revert hunk
      "commands": ["git.revertSelectedRanges"]
    }
  ]
}

Then, I can first select multiple hunks in Visual Mode, then use <leader>gr to revert them:

(🔼 Table of Contents)

#9 - Jump to Previous/Next Changes

Sometimes I have many Git changes across a long file. To quickly jump between changes:

<leader>gj - Jump to next Git change (j = down)
<leader>gk - Jump to previous Git change (k = up)

{
  "vim.normalModeKeyBindings": [
    {
      "before": ["<leader>", "g", "j"], // Jump to next Git change
      "commands": ["workbench.action.editor.nextChange"]
    },
    {
      "before": ["<leader>", "g", "k"], // Jump to previous Git change
      "commands": ["workbench.action.editor.previousChange"]
    }
  ]
}

(🔼 Table of Contents)

#10 - Open File on Remote

If your Git repo has a remote upstream (e.g. GitHub, GitLab), you can easily get a sharable URL to the file you’re currently opening.

Prerequisite: Install GitLens extension
Add these keybindings to settings.json

   {
     "vim.normalModeKeyBindings": [
       {
         "before": ["<leader>", "g", "g"], // Open file in GitHub
         "commands": ["gitlens.openFileOnRemote"]
       }
     ],
     "vim.visualModeKeyBindings": [
       {
         "before": ["<leader>", "g", "g"], // Open file in GitHub
         "commands": ["gitlens.openFileOnRemote"]
       }
     ]
   }

Move your cursor on a line you wish to open on remote, or enter Visual Mode to select multiple lines
Press <leader>gg (mnemonic: last g stands for GitHub)

To jump to a specific line on remote, use the keybinding in Normal Mode 👇

This also works for Visual Mode too. Try it yourself!

(🔼 Table of Contents)

For the full settings code, they can be found below 👇

(I used .jsonc instead of .json in the Gists. Otherwise, the syntax highlighting will add an ugly red background to all comments since theoretically comments are not allowed in JSON 😢)

Thanks for reading. Don’t forget to like and share this post if you found it useful, cheers! 🙌

10 VS Code Vim Tricks to Boost Your Productivity ⚡

Anson Heung — Tue, 13 Jun 2023 09:07:24 +0000

Learning Vim is one of the best things any aspiring software engineers can do to improve their productivity. I’ve been using the VSCodeVim extension in Visual Studio Code for the past few years, and this “VS Code × Vim” combo has greatly improved my coding speed.

In this article, I’ll share ten VS Code Vim tips to further boost your productivity so that you can code at lightning speeds ⚡.

Prerequisites:

You’ve installed VSCodeVim extension
You have a basic understanding of Vim keybindings (e.g. you should know what 5j, yy means)

Navigation
- #1 - Smart Relative Line
- #2 - Cursor Surrounding Lines
- #3 - Word Separators
Keybindings
- #4 - Navigate Menus without Arrow Keys
- #5 - LSP Keybindings
- #6 - Scroll in Show Hover
- #7 - File Explorer Keybindings
- #8 - Mapping Caps Lock to Escape
Yanking
- #9 - Highlight Yanked Text
- #10 - Yank to System Clipboard

(Full Settings: settings.json | keybindings.json)

Navigation

#1 - Smart Relative Line

This cool feature displays absolute line numbers only in insert mode and relative line number otherwise.

In the demo below, note that the line number gutter at the left shows absolute numbers only in insert mode 👇

(💡 If the GIF is not playing, click on it)

To enable it, open settings.json by pressing "Ctrl+Shift+P" and search for “Preferences: Open User Settings (JSON)”. Then, add the following item:



{
  "vim.smartRelativeLine": true
}

#2 - Cursor Surrounding Lines

When scrolling through a large file, it can be annoying that the cursor may locate at the very top/bottom of the screen, so you’re not sure what lines are before/after the cursor.

The “Editor: Cursor Surrounding Lines” sets the minimal number of lines to keep above and below the cursor. For example, setting it to 8 means that there are always ≥8 lines above my cursor and ≥8 lines below my cursor. It’s also known as scrolloff in Vim.

Add the following item to settings.json:



{
  "editor.cursorSurroundingLines": 8
}

#3 - Word Separators

If you frequently work with CSS class names (e.g. Tailwind CSS), you may find it annoying that Vim breaks down a kebab-case class name into multiple words.

For instance, I need to press e (jump forward to end of word) 5 times to select the word border-red-600 because the editor treats the - symbol as a word separator. While I can definitely use E (jump forward to end of word, ignoring punctuation) to do the same thing, I like spamming e to move forward (don’t judge me 😥) and I want a quicker way to do that.

(💡 Again, click on the GIF if it's not playing)

The “Editor: Word Separators” setting controls what characters are used as word separators, which has the - character by default. In settings.json, if I remove the - character:

Then, the editor treats border-red-100 as a single word and I can select it by pressing e just once!

(🔼 Table of Contents)

Keybindings

#4 - Navigate Menus without Arrow Keys

The VSCodeVim extension has several built-in keybindings to let you navigate different menus and lists without arrow keys.

If you’re in an auto-complete menu:

Ctrl + J - Move to next item
Ctrl + P - Move to previous item

The <C-j> and <C-p> combination also works in the “Go to File” menu (i.e. the “Ctrl + P” menu):

If you have the File Explorer window in focus (e.g. by clicking the File Explorer window), you can navigate items via:

j and k - Move down and up
h - Move to parent folder
o - Open file or folder

We’ll soon look into more custom File Explorer keybindings in Tip #7.

#5 - LSP Keybindings

LSP (language server protocol) keybindings leverage the language server to let you quickly navigate through code, such as jumping to the variable/function definition and finding its usage.

All of my LSP keybindings start with g (means “go”) and followed by the first letter of the action. Some starts with gp, meaning “go peek”.

(Legend: 🔥 = Most commonly used)

gd - Go to Definition (🔥)
gpd - Peek Definition
gh - Show Hover (🔥)
gi - Go to Implementations (🔥)
gpi - Peek Implementations
gq - Quick fix (open the code action lightbulb menu)
gr - Go to References (🔥)
gt - Go to Type Definition (🔥)
gpt - Peek Type Definition

They can be set in settings.json under vim.normalModeKeyBindings:



{
  "vim.normalModeKeyBindings": [
    {
      "before": ["g", "p", "d"],
      "commands": ["editor.action.peekDefinition"]
    },
    {
      "before": ["g", "h"],
      "commands": ["editor.action.showDefinitionPreviewHover"]
    },
    {
      "before": ["g", "i"],
      "commands": ["editor.action.goToImplementation"]
    },
    {
      "before": ["g", "p", "i"],
      "commands": ["editor.action.peekImplementation"]
    },
    {
      "before": ["g", "q"],
      "commands": ["editor.action.quickFix"]
    },
    {
      "before": ["g", "r"],
      "commands": ["editor.action.referenceSearch.trigger"]
    },
    {
      "before": ["g", "t"],
      "commands": ["editor.action.goToTypeDefinition"]
    },
    {
      "before": ["g", "p", "t"],
      "commands": ["editor.action.peekTypeDefinition"]
    }
  ]
}

(Note: The gd (Go to Definition) keybinding is built-in so no need to re-specify in the above.)

#6 - Scroll in Show Hover

Starting from VS Code v1.77, it’s possible to scroll in a hover window (opened by gh) using keyboard shortcuts. With some hacks, we can use h, j, k, l keys to scroll in a hover window.

Make sure we’ve remapped gh in settings.json (this should be already done in Tip #5):



{
  "vim.normalModeKeyBindings": [
    // ...
    {
      "before": ["g", "h"],
      "commands": ["editor.action.showDefinitionPreviewHover"]
    }
  ]
}

Next, open keybindings.json via “Ctrl + Shift + P” → “Preferences: Open Keyboard Shortcuts (JSON)” and append the following items:



[
  {
    "key": "h",
    "command": "editor.action.scrollLeftHover",
    "when": "editorHoverFocused"
  },
  {
    "key": "j",
    "command": "editor.action.scrollDownHover",
    "when": "editorHoverFocused"
  },
  {
    "key": "k",
    "command": "editor.action.scrollUpHover",
    "when": "editorHoverFocused"
  },
  {
    "key": "l",
    "command": "editor.action.scrollRightHover",
    "when": "editorHoverFocused"
  }
]

(Credits to EdRW for this hack)

#7 - File Explorer Keybindings

While the VSCodeVim extension comes with several built-in File Explorer keybindings as seen in Tip #4, we can add custom keybindings to enrich the experience:

<leader>e - Toggles (and focuses) the File Explorer view
- 💡 <leader> stands for Leader Key, which is commonly used as a prefix for user-defined shortcuts. By default it's the backslash key (\), but we commonly map it to Space key (see vim.leader option below)
Inside File Explorer:
- a - New file
- f - New folder
- r - Rename item
- x - Cut item
- y - Copy item
- p - Paste item

To set up the custom keybindings:

Open settings.json and add the <leader>e keybinding to open File Explorer:



   {
     "vim.leader": "<space>",
     "vim.normalModeKeyBindings": [
       // ...
       {
         "before": ["<leader>", "e"],
         "commands": ["workbench.view.explorer"]
       }
     ]
   }

Open keybindings.json via “Ctrl + Shift + P” → “Preferences: Open Keyboard Shortcuts (JSON)” and append the following items:



   [
     {
       "key": "space e",
       "command": "workbench.action.toggleSidebarVisibility",
       "when": "filesExplorerFocus && !inputFocus"
     },
     {
       "key": "a",
       "command": "explorer.newFile",
       "when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus"
     },
     {
       "key": "f",
       "command": "explorer.newFolder",
       "when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus"
     },
     {
       "key": "r",
       "command": "renameFile",
       "when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus"
     },
     {
       "key": "x",
       "command": "filesExplorer.cut",
       "when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus"
     },
     {
       "key": "y",
       "command": "filesExplorer.copy",
       "when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !inputFocus"
     },
     {
       "key": "p",
       "command": "filesExplorer.paste",
       "when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceReadonly && !inputFocus"
     }
   ]

The first item enables <leader>e to close the File Explorer when it’s on focus and the remaining items are keybindings for manipulating items.

Demo:

Open File Explorer with <leader>e → New folder with f → New file with a
Open File Explorer with <leader>e → Cut a file with x → Paste the file with p

(Credits to v-iashin for this hack)

#8 - Mapping Caps Lock to Escape

While the Escape key is such an important key for Vim, I hate how every keyboard places it at the top left corner, which makes it inconvenient to reach when your hands are at the home row. I strongly recommend remapping the Caps Lock key to Escape since the Caps Lock key is rarely used and it can be easily accessible via your pinky finger.

Remapping Caps Lock to Escape also eliminates a common Insert mode keybinding where jj (or jk) exits Insert mode. Your editor no longer awkwardly pauses whenever you type j in Insert mode to wait for you to complete the jj keybinding.

Performing the remap requires a 3rd party utility program:

(🔼 Table of Contents)

Yanking

#9 - Highlight Yanked Text

You can enable highlighting when yanking, which is a great visual cue that shows what text you’ve yanked. Apart from the highlight duration, you can set a highlight color that matches your color scheme. For example, I used a green highlight color:

In settings.json:



{
  "vim.highlightedyank.enable": true,
  "vim.highlightedyank.color": "#a9dc7660",
  "vim.highlightedyank.duration": 250
}

#10 - Yank to System Clipboard

You can use the system clipboard register (*) as the default register. In other words, keybindings such as yy or dd will yank the text to your system clipboard. In settings.json:



{
  "vim.useSystemClipboard": true
}

(🔼 Table of Contents)

Last but not least, I highly recommend you to check out the README of the VSCodeVim extension. You’ll definitely learn something new that’s not covered in this article 😁.

For the full settings code, they can be found below 👇:

Thanks for reading! If you also have some VS Code Vim tips, feel free to share them in the comments 🙌.

Customize & Beautify your Windows Terminal (2022 Edition)

Anson Heung — Fri, 28 Jan 2022 09:47:37 +0000

Windows Terminal is a modern terminal application for developers who frequently uses command-line tools such as Powershell. In this article, I’ll show you how to customize the hell out of Windows Terminal and Powershell so that you can flex on your friends and colleagues 😎.

Here's our final result 👇

Before we begin, please download Windows Terminal from the Microsoft Store.

Table of Contents:

Windows Terminal Settings
Oh My Posh
Winfetch

Windows Terminal Settings

You can open settings via the Ctrl+, shortcut or the dropdown menu:

Color Scheme

My color scheme is a slightly modified version of Sonokai Shusia. To install the color scheme:

Open Settings in Windows Terminal and press the “Open JSON file” button at the bottom left corner. It will open settings.json in Notepad.

In settings.json, scroll down to find the "schemes" field, which accepts an array of color scheme objects. Next, paste in my color scheme object before the first object in the array (note that object order does not matter).

{
   ...
   "schemes":
   [
       {
           "name": "Sonokai Shusia",
           "background": "#2D2A2E",
           "black": "#1A181A",
           "blue": "#1080D0",
           "brightBlack": "#707070",
           "brightBlue": "#22D5FF",
           "brightCyan": "#7ACCD7",
           "brightGreen": "#A4CD7C",
           "brightPurple": "#AB9DF2",
           "brightRed": "#F882A5",
           "brightWhite": "#E3E1E4",
           "brightYellow": "#E5D37E",
           "cursorColor": "#FFFFFF",
           "cyan": "#3AA5D0",
           "foreground": "#E3E1E4",
           "green": "#7FCD2B",
           "purple": "#7C63F2",
           "red": "#F82F66",
           "selectionBackground": "#FFFFFF",
           "white": "#E3E1E4",
           "yellow": "#E5DE2D"
      },
      ...
  ]
}

Save your changes and head back to Windows Terminal. Go to Settings → "Windows Powershell" profile → "Appearance" tab → "Color Scheme", and choose the new color scheme. Then, press "Save".

If you don’t like my custom theme, check out Windows Terminal Themes website. There are 200+ themes to choose from and you get a quick preview of each theme 🌈.

Nerd Font

Nerd Fonts refer to programming fonts that are patched with a high number of glyphs (icons). Using a nerd font in Windows Terminal is essential because normal monospace fonts cannot render icons properly:

It’s likely that the programming font you’re using (eg. Cascadia Code, Fira Code) already has a Nerd Font version. Check out this link to see the full list of patched Nerd Fonts that you can install.

In my setup, I use Fira Code Nerd Font. The link will download a ZIP file that contains many TrueType font files. It’s OK to only install the files where the name looks something like Fira Code XXXXX Nerd Font Complete Windows Compatible.

After installing Nerd Font:

Restart your Windows Terminal by closing and re-opening it.
Go to Settings → “Windows Powershell” profile → “Appearance” tab → “Font face”, and choose your newly installed Nerd Font:

Now, your Terminal should look a bit more pleasing to the eyes:

Oh My Posh

Oh My Posh is a prompt theme engine that lets you beautify the prompt string. This engine requires your Terminal to use a Nerd Font so make sure that you followed along the previous steps.

Setup

Install “App Installer” from Microsoft Store to get the winget Windows Package Manager CLI.
- ⚠ Requires Windows 10 1809 (build 17763) or later
- Check out Oh My Posh’s documentation for alternative installation options.
Restart your Windows Terminal and run winget to check if the package manager is correctly installed.
In your Windows Terminal, run
```
winget install JanDeDobbeleer.OhMyPosh
```
Restart your Windows Terminal. Next, try running oh-my-posh in Powershell to see if it’s correctly installed.
Run the following command to open your Powershell profile.
```
notepad $PROFILE
```
If notepad shows a prompt saying that “Microsoft.Powershell_profile.ps1” is not found and asks if you would like to create the file, press “Yes” to create the file.

Inside the file, paste in the following code and save the file. This will load Oh My Posh on start-up with the default theme.

oh-my-posh --init --shell pwsh --config ~/AppData/Local/Programs/oh-my-posh/themes/jandedobbeleer.omp.json | Invoke-Expression

Restart your Terminal. Your Powershell should now load Oh My Posh automatically

Change Theme

Oh My Posh comes with >70 themes included out-of-the-box. Check out the “Themes” page documentation for a gallery of preinstalled themes.

All themes are located in ~\AppData\Local\Programs\oh-my-posh\themes if you used winget to install Oh My Posh. If you used an alternative installation method, visit the documentation and select your installation method to see where the themes are located.

Suppose you want to use the powerlevel10k_rainbow preinstalled theme:

Open Windows Terminal and run notepad $PROFILE in Powershell just like we did previously.

In the opened file, change the path after --config so that it uses powerlevel10k_rainbow.omp.json:

oh-my-posh --init --shell pwsh --config ~/AppData/Local/Programs/oh-my-posh/themes/powerlevel10k_rainbow.omp.json | Invoke-Expression

Restart your Terminal:

Custom Themes

You can easily create your own theme by writing your own JSON files. Here are some useful links:

“Configuration → General” page of the docs - Learn how to create custom themes
Nerd Font’s cheatsheet - List of different glyphs that you can use

I created a custom theme called p10k_classic, which is inspired by a preinstalled theme called powerlevel10k_classic.

To use my theme:

Visit the GitHub Gist link and click the “Download ZIP” button at the top right corner.
Extract p10k_classic.omp.json into a location of your choice. For example, let’s place it in the root folder (~).
Open Windows Terminal and run notepad $PROFILE in Powershell.

In the opened file, change the path after --config so that it uses ~/p10k_classic.omp.json

oh-my-posh --init --shell pwsh --config ~/p10k_classic.omp.json | Invoke-Expression

Restart your Terminal:

Winfetch

As an added bonus, we’ll install winfetch, a command-line tool that prints out system information. This is a great alternative to neofetch, which only works on Linux.

Setup

This wiki page lists several ways to install winfetch. We’re using the first recommended method: PSGallery.

Run Windows Terminal as administrator. To do that, search “Windows Terminal” in the Start Menu, right click the item, and press “Run as administrator”
In Powershell, run the command:
```
Install-Script -Name pwshfetch-test-1
```
Choose “Yes” for any prompts you encountered.
Run notepad $PROFILE to open Powershell profile. Add the following line of code at the end:
```
Set-Alias winfetch pwshfetch-test-1
```
Restart your Terminal. Then, run winfetch to see if it’s correctly installed.

The default winfetch config is saved to ~\.config\winfetch\config.ps1. Check out the “Configuration” wiki page to see all available configuration options.

Custom Image

The Windows logo at the left can be changed to a custom “image” (more like a low resolution pixel art because Windows Terminal cannot render full resolution images).

For example, I want to display my GitHub profile picture, which is a 8-bit Luigi art:

Save this image and place it in a location of your choice. For example, I save it at the root folder (~) with the name luigi.png.
Open ~\.config\winfetch\config.ps1 in Notepad. Change the first two variables to the following:
```
# ===== WINFETCH CONFIGURATION =====

$image = "C:\Users\User\luigi.png"  # ABSOLUTE path
$noimage = $false
```
⚠ I used absolute path in $image because winfetch in my PC is having trouble processing a relative path (~/luigi.png). The full path of my root folder is C:\Users\User.
Save the file and run winfetch in Powershell:

More Configuration

By default, winfetch only shows information about your C drive. To show all available drives, open ~\.config\winfetch\config.ps1 and uncomment the field:

# Configure which disks are shown
# $ShowDisks = @("C:", "D:")
# Show all available disks
$ShowDisks = @("*")

You can also display a bar chart for the memory (RAM) and disk usage:

# Configure how to show info for levels
# Default is for text only.
# 'bar' is for bar only.
# 'textbar' is for text + bar.
# 'bartext' is for bar + text.
# $cpustyle = 'bar'
$memorystyle = 'bartext'
$diskstyle = 'bartext'
# $batterystyle = 'bartext'

Here’s our final result:

That’s all the steps you needed to beautify your Terminal 🌈. Now it’s time for you to show off in front of your friends and colleagues! 😁

Thanks for reading! If you find it useful, don’t forget to like and share this post 🙌

Simplest Way to Install Babel Plugins in Create React App

Anson Heung — Mon, 27 Dec 2021 13:29:33 +0000

The traditional way of installing Babel plugins in a Create React App project requires you to eject the app via running npm run eject. However, ejecting may be a bad idea because it’s a one-way operation that exposes complex configurations files.

In this article, I’ll show you how to install Babel plugins WITHOUT ejecting your Create React App.

Steps

Install react-app-rewired and customize-cra:
```
npm install react-app-rewired customize-cra --save-dev
# or
yarn add react-app-rewired customize-cra --dev
```
Purpose of these two packages
- react-app-rewired: Overrides Create React App webpack configs without ejecting.
- customize-cra: Provides a set of utilities to customize Create React App config, such as reading from .babelrc. Requires react-app-rewired as a dependency.

Install your Babel plugin(s). Suppose our Babel plugin is called babel-plugin-myPlugin:

npm install babel-plugin-myPlugin --save-dev
# or
yarn add babel-plugin-myPlugin --dev

Open package.json located in the project root and edit the "scripts" field:

 "scripts": {
-  "start": "react-scripts start",
-  "build": "react-scripts build",
-  "test": "react-scripts test",
+  "start": "react-app-rewired start",
+  "build": "react-app-rewired build",
+  "test": "react-app-rewired test",
   "eject": "react-scripts eject"
 },

Create .babelrc at the root of the project (where package.json is located) and add the following code. Replace babel-plugin-myPlugin with the actual name of your plugin.
```
{
  "plugins": ["babel-plugin-myPlugin"]
}
```

Create config-overrides.js at the root of the project and add the following code:

// Overrides create-react-app webpack configs without ejecting
// https://github.com/timarney/react-app-rewired

const { useBabelRc, override } = require("customize-cra");
module.exports = override(useBabelRc());

Run npm start or yarn start to start the development server and see if everything works properly.

Without Using `.babelrc`

In the above, Step 4 requires you to create a new .babelrc file to register Babel plugins. Alternatively, you can skip Step 4 (i.e., no need to create .babelrc) by directly registering Babel plugins inside config-overrides.js:

// Overrides create-react-app webpack configs without ejecting
// https://github.com/timarney/react-app-rewired

const { addBabelPlugins, override } = require("customize-cra");
module.exports = override(
  ...addBabelPlugins(
    "babel-plugin-myPlugin"
    /* Add plug-in names here (separate each value by a comma) */
  )
);

Thanks for reading! If you find it useful, don’t forget to like and share this post 🙌

Follow me on Twitter: @AnsonH_
Personal website
GitHub profile: AnsonH

DEV Community: Anson Heung

Rust From & Into Traits - A Full Beginner’s Guide 🦀

Table of Contents

What is From trait?

What is Into trait?

Type Annotation

Implement From gives you Into for free

When to use From or Into?

Verbosity

Locating implementation

Use TryFrom if conversion may fail

impl Into<T> in function parameters

10 More VS Code Vim Tricks to Code Faster ⚡

💡 IMPORTANT UPDATE (2024-05-11)

Table of Contents

Navigation

#1 - Tabs Management

#2 - Splits Management

#3 - Multi-Cursor

#4 - Quick Search

Vim Features

#5 - Emulated Plugins

#6 - Macros

Git

#7 - Peek Diff

#8 - Revert Hunk or Selected Lines

#9 - Jump to Previous/Next Changes

#10 - Open File on Remote

10 VS Code Vim Tricks to Boost Your Productivity ⚡

Table of Contents

Navigation

#1 - Smart Relative Line

#2 - Cursor Surrounding Lines

#3 - Word Separators

Keybindings

#4 - Navigate Menus without Arrow Keys

#5 - LSP Keybindings

#6 - Scroll in Show Hover

#7 - File Explorer Keybindings

#8 - Mapping Caps Lock to Escape

Yanking

#9 - Highlight Yanked Text

#10 - Yank to System Clipboard

Customize & Beautify your Windows Terminal (2022 Edition)

Windows Terminal Settings

Color Scheme

Nerd Font

Oh My Posh

Setup

Change Theme

Custom Themes

Winfetch

Setup

Custom Image

More Configuration

Simplest Way to Install Babel Plugins in Create React App

Steps

Without Using .babelrc

What is `From` trait?

What is `Into` trait?

Implement `From` gives you `Into` for free

When to use `From` or `Into`?

Use `TryFrom` if conversion may fail

`impl Into<T>` in function parameters

Without Using `.babelrc`