Elevate Your VS Code Terminal with a Sleek Starship Prompt

Devashish Nayak — Thu, 25 Jan 2024 08:47:28 +0000

Customizing your terminal can not only be a fun expression of your style but can significantly improve your productivity by providing essential information at a glance. Today, I'm sharing my starship.toml configuration which mimics the look of the terminal as shown in the VS Code documentation but adds a personal touch.

What is Starship?

Starship is a minimal, blazing-fast, and infinitely customizable prompt for any shell. It allows you to get information quickly about your current directory and project, all with a beautiful design that can be as simple or as complex as you wish.

Inspiration Behind My Configuration

The default terminal is functional, but it doesn't spark joy nor does it efficiently convey information. My aim was to create a prompt that is both visually appealing and informative, reducing the need for additional commands to understand my environment.

The Heart of the Terminal: `starship.toml`

Here's a peek at the starship.toml file that powers my terminal's appearance:

# Get editor completions based on the config schema
"$schema" = 'https://starship.rs/config-schema.json'

format = """\
[](fg:#da6871 bg:#00FFFFFF)\
$directory\
[](fg:#da6871 bg:#fef199)\
$git_branch\
[](fg:#fef199 bg:#3a9ef4)\
$git_status\
$git_metrics\
[](fg:#3a9ef4 bg:#00FFFFFF)\
$nodejs
$character\
"""

# Inserts a blank line between shell prompts
add_newline = true

[directory]
format = "[$path ]($style)"
style = "fg:#121111 bg:#da6871"

[git_branch]
format = '[ $symbol$branch(:$remote_branch) ]($style)'
symbol = " "
style = "fg:#121111 bg:#fef199"

[git_status]
format = '[ $all_status ]($style)'
style = "fg:#121111 bg:#3a9ef4"

[git_metrics]
format = "([+$added ]($added_style))[]($added_style)"
added_style = "fg:#121111 bg:#3a9ef4"
deleted_style = "fg:bright-red bg:235"
disabled = false

[nodejs]
format = ' via [ $version](bold green) '

Each element in the configuration serves a purpose:

The $directory shows the current working directory.
The $git_branch displays the current branch in the git repository.
The $git_status and $git_metrics provide at-a-glance information about the repository's status.
The $nodejs shows the currently installed Node.js version, which is especially useful for JS developers.

The Resulting Look

Once applied, this configuration transforms the prompt into a vibrant display of colors and icons. The directory path is highlighted in pink, the git branch in yellow, and git status in blue, followed by the Node.js version in green. It's a prompt that not only looks good but feels intuitive to use.

Why Customize?

A customized prompt can:

Reduce the time taken to understand the current project state.
Decrease the reliance on executing multiple commands.
Make the development environment more enjoyable.

How Can You Customize Your Own?

To use this configuration:

Install Starship, if you haven't already, from here.
Create a starship.toml file in your home directory.
Paste the configuration shared above into the file.
Open a new terminal window to see the changes.

Conclusion

A terminal is not just a tool; it's the developer's habitat. Customizing it can lead to a more pleasant and productive development experience. I encourage you to try this configuration and tweak it to match your workflow and style.

Share Your Setup!

Got an amazing prompt setup of your own? Share it in the comments below! Let's inspire each other and make our development environments a place we love to work in.

Forem: Devashish Nayak