DEV Community: Gunjan Mishra

Mastering VIM: A Complete Beginner's Guide to the Command-Line Editor

Gunjan Mishra — Thu, 09 Jan 2025 14:53:51 +0000

1. Introduction to VIM

1.1 What is VIM?

Remember the last time you had to quickly edit code on a remote server? That's where VIM shines! While VS Code needs a graphical interface, VIM lets you edit code right in your terminal, making it perfect for cloud servers and remote development.

Let me share Anaya's story. She was a full-stack developer working on a client's e-commerce website. During a crucial product launch, her client Ashish called in panic: "The payment gateway is down! Can you fix it immediately?"

The issue was on the production server, and Anaya needed to quickly edit a configuration file. She tried logging into the server's control panel, downloading the file, opening it in VS Code, editing it, and uploading it back - but the server was restricting file uploads for security reasons.

Then she remembered VIM. She simply:

Connected to the server via SSH
Opened the config file with VIM
Made the fix in seconds
Saved and tested

The site was back up in minutes, and Ashish was impressed with the quick resolution.

Why developers like Anaya choose VIM:

Perfect for quick server fixes (no downloading/uploading needed)
Works smoothly even with slow internet connections
Great for pair programming through shared terminal sessions
Makes you look like a coding wizard 😉

Remember: Tools like VS Code are great for development, but VIM is your best friend when you need to make quick fixes on servers or work in terminal-only environments.

1.2 Installing VIM

Setting up VIM is easier than you might think! Let's break it down:

First, check if VIM is already installed (it often is!):

vim --version

If not, here's how to get it:

For Ubuntu/Linux Users:

sudo apt install vim

For Mac Users:

# Using Homebrew
brew install vim

For Windows Users:

Visit https://www.vim.org/download.php
Download the latest version
Run the installer

Quick Test:

Open terminal
Type vim test.txt
Press i to start typing
Type "Hello VIM!"
Press Esc, then type :wq to save and quit
Type cat test.txt to see your saved code in terminal

Congratulations! You've just made your first edit in VIM! 🎉

Pro Tip: Start small! Begin by using VIM for simple config file edits on servers, then gradually expand to larger tasks as you get comfortable.

Note: Want to know the real power of VIM? Wait until you need to edit files on 10 different servers - that's when you'll fall in love with it!

2. Understanding VIM's Modes

2.1 The Concept of Modes

VIM works differently from typical text editors. Instead of always being ready to type text, VIM uses modes. What makes a mode? It's a state where your keyboard keys behave in specific ways. Pressing 'x' in Insert Mode types the letter 'x', but in Normal Mode, it deletes a character. This might seem strange at first, but it makes editing much more efficient.

The Two Main Modes You Need to Know:

Normal Mode: This is your default state. Here, your keyboard becomes a command center for navigation and text manipulation. Every key can perform a special action.
Insert Mode: This works like a regular text editor. When you need to type or edit text, this is where you'll be.

Switching Between Modes is Simple:

Press Esc anytime to get to Normal Mode. Don't worry about pressing it too much - it's always safe!
Press Esc + i when you want to type text (enters Insert Mode)

2.2 Normal Mode: Your Command Center

Normal Mode is where VIM's power lies. Think of it as your control room - a place where you can move around your text, make changes, select text, and execute commands. Almost everything you do in VIM starts here.

Moving Around in Normal Mode:


h - move left one character
j - move down one line
k - move up one line
l - move right one character
w - jump forward to the start of the next word
b - jump backward to the start of the previous word
0 - jump to the start of the current line
$ - jump to the end of the current line

Just press : and type your command:


:w     - save your current file
:q     - quit VIM (will warn if you haven't saved)
:q!    - force quit VIM (will no warn even if you haven't saved)
:wq    - save and quit in one command
:help  - when you need to learn about a command

Everyday Normal Mode Actions:


dd     - delete the current line
yy     - copy the current line
u      - undo your last action
Ctrl+r - redo what you just undid

2.3 Insert Mode

Insert Mode is straightforward - it's where you actually type your text, just like any regular editor. The cursor blinks, and your keys type letters instead of executing commands.

Quick Tips for Success:

Make Normal Mode your home - return there when you're done typing
Don't hold down the Esc key - one press is enough
Watch the bottom left of your screen - it shows which mode you're in
Practice the basic movements (hjkl) until they feel natural
Start with these basics and add more commands as you get comfortable

Remember: The power of VIM comes from Normal Mode. While Insert Mode is for typing text, Normal Mode is where you'll do most of your editing and navigation.

3. Essential VIM Commands:

Let's see a complete list of essential commands.
Remember: You need to press Esc first to use these commands, as they only work in Normal mode.

Essential VIM Commands List

Basic Workflow:

Esc         - return to Normal mode (use this before any command)
i           - enter Insert mode (start typing)
:w          - save file
:q          - quit
:wq or :x   - save and quit
:q!         - quit without saving

Navigation:

Esc then:
h           - move left
j           - move down
k           - move up
l           - move right
w           - jump to next word start
b           - jump to previous word start
0           - jump to line start
$           - jump to line end
gg          - jump to file start
G           - jump to file end

Text Operations:

Esc then:
x           - delete character under cursor
dd          - delete current line
yy          - copy current line
p           - paste below
u           - undo
Ctrl+r      - redo

Search and Replace:

Esc then:
/text       - search for 'text'
n           - next search result
N           - previous search result
:%s/old/new/g - replace all 'old' with 'new'

Quick Scrolling:

Esc then:
Ctrl+f      - page down
Ctrl+b      - page up

Pro Tips:

Keep hitting Esc whenever you're unsure - it's always safe!
After any command, you can press i to start typing again
If you're lost, press Esc and type :help
Save often using Esc then :w

Remember: Always start with Esc to ensure you're in Normal mode before using any command. It's better to press Esc too many times than too few!

4. Customizing Your VIM Environment

What is .vimrc?

VIM starts with basic default settings, but you can customize it to match your preferences. This is where .vimrc comes in - it's a configuration file that VIM reads when it starts up. Any settings you put in this file will automatically apply every time you use VIM.

Finding Your .vimrc

Your .vimrc file lives in your home directory:

bash
Copy
# Linux/Mac
~/.vimrc

# Windows
C:\Users\YourUsername\_vimrc

If the file doesn't exist, you can create it.

Creating Your First .vimrc

Let's make a simple .vimrc:

Open terminal
Type: vim ~/.vimrc
Press i to start typing
Add your settings (Copy and paste the settings given below)
Press Esc then type :wq to save

Basic .vimrc Settings for Beginners

Here's a simple, beginner-friendly .vimrc file:

" Basic Settings
set number         " Show line numbers
syntax on          " Enable syntax highlighting
set autoindent     " Auto-indent new lines
set tabstop=4      " Tab width of 4 spaces
set softtabstop=4  " Tab width while editing
set mouse=a        " Enable mouse support

" Make VIM more user-friendly
set confirm        " Ask to save changes instead of failing
set wildmenu       " Better command completion
set showmatch      " Highlight matching brackets
set incsearch      " Show search matches while typing

" Visual Helpers
set cursorline     " Highlight current line
set ruler          " Show cursor position
set showcmd        " Show incomplete commands

Pro Tips:

Add settings one at a time
Test each setting to see if you like it
Comment your settings (use " for comments)
Keep a backup of your .vimrc file

Remember: You can edit .vimrc anytime. Changes take effect when you restart VIM or type :source ~/.vimrc

5. Final Thoughts

Your VIM Journey

Starting with VIM is like learning to ride a bike - it might feel wobbly at first, but once you get the hang of it, you'll wonder how you managed without it.

VIM isn't just a text editor - it's an investment in your productivity. Take it one command at a time, and you'll be editing like a pro before you know it!

I hope this guide helps you get started with one of the most popular Command-Line Editor VIM !!
If you found this helpful, please consider sharing it on social media and following me for more tech content. If you have any feedback or suggestions, please share them in the comments. Your input will help me create better content going forward.

Happy VIMming! 🚀

The Ultimate Guide for Beginners: Navigating Git and GitHub in the World of Tech

Gunjan Mishra — Thu, 02 Jan 2025 13:59:34 +0000

Introduction

Imagine You’ve just finished a project for a client. After seeing it, she suggests some changes, and you spend a week tweaking the design and functionality. Excitedly, you present the updated version, only for her to say, “The previous one was more appealing. Can we go back to that?”

Here’s the problem:

You didn’t save the old version! All your changes overwrote the original, and now you’re stuck trying to recreate it from scratch, wasting time and effort. If you had used Git—your life (and sanity) could have been saved with just a click! 😅

What is Git?

Git is a distributed version control system. In simpler terms, it allows you to track changes in your files over time. Imagine you're working on a painting, and you want to be able to go back to previous versions if you don't like the changes you made. That's basically what Git does for your files!

Track Changes: With Git, every time you make a change and save it, you create a new version of your file. You can easily go back in time to see the evolution of your project.
Collaborate with Others: Git makes it easy for multiple people to work on the same project simultaneously. Each person can work on their own copy, and when they’re ready, they can share their adjustments.

What is GitHub?

It’s an online platform where you can store your Git-managed code, collaborate with others, and showcase your projects to the world. Together, Git and GitHub make development seamless, organized, and accessible from anywhere, saving you from coding disasters while helping you work smarter and more collaboratively.

Remote Hosting: Think of GitHub as a cloud storages for all your project files. You can store your code there and access it from anywhere.
Collaboration Tools: With features like issue tracking and pull requests, GitHub allows teams to communicate and integrate changes smoothly. This means if someone fixes a bug or adds a feature, you can review and decide whether to incorporate those changes into your project or not.

Simple Git Workflow

Here’s how a straightforward Git workflow might look:

Write the code on your PC: Start developing your application or project.

⇓
Stage your changes using git add <file name>: Select the files you want to include in your next commit.

⇓
Commit your changes using git commit -m "text": Save your changes with a descriptive message so you remember what you did.

⇓
Push your changes to the remote repo using git push origin <branch name>: Upload your changes to the GitHub repository for others to see.

⇓
Make a pull request: This is your way of asking others to review your changes and integrate them into the main project.

Simple GitHub Workflow

Here is a streamlined process for managing projects on GitHub:

Write the code on GitHub: You can edit files directly in your web browser.

⇓
Commit your changes: Each time you make changes, commit them to log what you’ve done.

⇓
Make a pull request: After making changes, propose those updates for review.

Basic Git Commands

Navigating Git is all about knowing a few essential commands:

git init: Initializes a new Git repository in your current directory. Imagine turning a folder into a Git project.
git add <file name>: Adds files to the staging area for your next commit. It’s like picking which items to pack for a trip.
git commit -m "message": Captures a snapshot of what you've done, complete with a message that indicates the changes.
git push origin <branch name>: Uploads your local commits to a remote repository on GitHub, making your changes accessible to others.
git diff: Shows the differences between the current state and the previous commit, helping you review changes.
git status origin <branch name>: Displays the current state of your repository, letting you know what’s been staged, what’s not, and if there are any changes.
git pull origin <branch name>: Fetches changes from a remote repository and merges them into your current branch, updating your local project.
git clone <url of repo>: Creates a local copy of a remote Git repository on your computer, allowing you to work offline.
git reset: Moves your current branch to a specific commit or resets your staging area. Perfect for reversing changes.

Uploading a Local Project to GitHub

If you have a project you want to upload, follow these steps:

Create a new repository on GitHub: Set up a space to store your project.

⇓
Initialize Git in your local project directory using git init: Begin tracking your local files.

⇓
Add files to the staging area using git add .: Choose the files you want to include in your upload.

⇓
Commit the changes using git commit -m "first project": Save your changes locally with a clear message.

⇓
Link your local repository to the remote repository on GitHub using git remote add origin main: Connect your local project to its online counterpart.

⇓
Push your local commits to GitHub using git push origin main: Upload your changes to your new GitHub repository.

Git Branches

Imagine you have a big drawing that you want to work on, but you're not sure if you want to make changes directly on the main drawing or try out different ideas first. That's where Git branches come in!

Branching: Think of branches like paths you can take in your project. You create a separate track and experiment without affecting the main project. Once you're happy with your changes, you can merge them back into the main project.

Branch-related Commands

Here are some commands to manage branches:

git branch -d <name>: Deletes the specified branch.
git branch: Lists all branches in the repository.
git checkout -b <name>: Creates a new branch and switches to it.
git checkout <name>: Switches to an existing branch.
git merge <feature branch name>: Incorporates changes from one branch into another.

Merge Conflicts

Sometimes, things can get a bit confusing – especially when two collaborators modify the same part of a file. This is known as a merge conflict.

Resolving Conflicts: Imagine you and a friend both editing the same sentence in a story. Git doesn’t know which version to keep, so it asks you to sort it out. You’ll have to manually choose which changes to maintain. It's a collaborative moment that requires a bit of negotiation and creativity.

Remember, resolving conflicts is a natural part of collaborating and can lead to even better results!

Final Thoughts

While Git and GitHub have many more advanced features to explore, the concepts and commands we've covered here are what you'll use 90% of the time. These fundamentals will serve as a strong foundation for your development journey.

I hope this guide helps you get started with version control and collaborative coding! If you found this helpful, please consider sharing it on social media and following me for more tech content.

👋 This is my first tech blog, and I'm excited to improve it further! If you have any feedback or suggestions, please share them in the comments. Your input will help me create better content going forward.

Connect with me on: