DEV Community: Ender

Why Jinno is a Better Alternative to Storybook

Ender — Mon, 17 Mar 2025 10:58:55 +0000

If you're using Storybook to document and test your React components, you know the hassle of setting up and maintaining separate component environments. While Storybook is a great tool for UI development, it requires extra effort to isolate components and work outside your actual project. But what if you could preview and test components directly inside your editor without extra setup? That's where Jinno changes the game.

What Makes Jinno Better?

Jinno is a developer-first tool that seamlessly integrates into your existing codebase, enabling live previews of React components right inside your editor. Unlike Storybook, which requires you to manually isolate components and navigate away from your development environment, Jinno lets you isolate any component with one click and preview it instantly. Here’s why it’s a huge productivity boost:

🔥 Instant Component Previews

Jinno allows you to see live previews of your components without switching tabs or launching an external UI playground. Everything happens inside your editor, making the development process smoother and more efficient.

⚡ One-Click Component Isolation

Instead of writing extra configuration files or adjusting your code to work with Storybook, Jinno lets you isolate any component in one click. This means faster debugging and a more seamless workflow.

🚀 Faster Iteration and Hot Reloading

With Jinno, you don’t have to restart your entire app just to test a component. Your changes are instantly reflected inside your editor, speeding up the hot reload process and keeping you in the flow of coding.

Jinno vs. Storybook: A Side-by-Side Comparison

Feature	Jinno	Storybook
Integrated into your codebase	✅	❌ (Runs separately)
One-click isolation	✅	❌ (Requires setup)
Live previews inside editor	✅	❌ (External UI)
No extra configuration needed	✅	❌ (Requires setup)
Faster hot reloading	✅	❌ (Slower iteration)
Works within VS Code & other editors	✅	❌ (Runs in browser)

How Jinno Handles Stories

Jinno offers a simple and flexible way to create stories for complex components, similar to Storybook but without requiring extra setup. If your component accepts complex properties (like another component), you can create a .story.tsx file next to your component file and define example input properties using regular TypeScript.

Example: Creating a Story in Jinno

For a UsersList.tsx component, you can create a UsersList.story.tsx file with the following:

// UsersList.story.tsx
import { User } from './types';
import { UserIcon } from './UserIcon';

export default {
  examples: {
    default: {
      users: [
        {
          id: '1',
          username: 'snow123',
          name: 'John Snow',
          age: 25,
          avatar: UserIcon,
        } as User,
        {
          id: '2',
          username: 'dan79',
          name: 'Dan Mayer',
          age: 23,
          avatar: UserIcon,
        } as User,
        {
          id: '3',
          username: 'george',
          name: 'George Smith',
          age: 30,
          avatar: UserIcon,
        } as User,
      ],
    },
  },
};

With this approach, you can easily define and test different component states without the need for external configurations or complex Storybook setups.

Conclusion

Jinno offers a smarter, faster, and more integrated approach to component previews and isolation than Storybook. If you're tired of constantly switching tabs, dealing with slow reload times, and maintaining separate configurations, it's time to ditch Storybook and switch to Jinno.

Give it a try and experience a truly seamless development workflow!

5 Must-Have VS Code Extensions for React development

Ender — Thu, 13 Mar 2025 05:49:56 +0000

Enhance Your React Development with These Top VS Code Extensions

VS Code is a powerful editor, and its extensions make it even better by streamlining development workflows. Whether you're debugging, formatting, or managing dependencies, the right tools can save time and boost productivity. This article introduces five must-have VS Code extensions to help you develop React applications more efficiently.

1. Jinno

Jinno enables live previews of React components directly within the editor. With Jinno, you can isolate any component with one click, speeding up your hot reload process and letting you focus on coding rather than switching back and forth between tools. It’s been a game-changer for my workflow, and I believe it could be for yours too!

Why Jinno is a huge productivity boost:

Instant component previews inside your editor
One-click isolation to test components without launching a full app
Faster iteration — no need to break focus by switching tabs

You can install Jinno by visiting the VS Code marketplace link here.

2. ESLint

ESLint is a widely used linting tool for JavaScript and JSX, helping developers detect and fix issues quickly. It ensures code consistency and prevents bugs before they happen.

The ESLint extension for VS Code seamlessly integrates ESLint into your workflow. To install it, search for “ESLint” in the VS Code extensions panel or follow this link.

It works with the ESLint package installed in your project’s workspace. If one isn’t found locally, it defaults to a globally installed version. To configure ESLint properly, check out the official setup guide.

3. Prettier

Prettier is an automatic code formatter that enforces a uniform style across your codebase. It eliminates the need for manual formatting, ensuring that every developer on your team follows the same structure.

To get started, install the Prettier - Code formatter extension by searching for it in VS Code or using this link.

If you want more control over when Prettier formats your code, consider installing vscode-status-bar-format-toggle to enable or disable automatic formatting with a simple click.

4. npm Intellisense

Working with npm packages? npm Intellisense is a handy extension that provides autocompletion for package imports, reducing keystrokes and potential typos.

Installing it is easy—search for npm Intellisense in the VS Code extensions marketplace or find it in the extensions panel within VS Code.

5. Import Cost

Understanding how dependencies impact your application is crucial. Import Cost helps by displaying the size of imported packages directly in the editor, so you can make informed decisions about which libraries to use.

You can install it by searching for the Import Cost extension in the VS Code marketplace.

Here’s an example demonstrating how Import Cost helps visualize the size difference between imports:

Bonus: Create Stories and design system with Jinno

Jinno isn’t just a live preview tool—it also enables you to create stories for your components, making it easier to document and test different prop configurations. With Jinno, you can save various prop examples, ensuring consistency across your project and improving collaboration with your team.

Example: Creating a Story in Jinno

Here's an example of how you can define a story for a UsersList component using Jinno:

// UsersList.story.tsx

import { User } from './types';
import { UserIcon } from './UserIcon';

export default {
  examples: {
    default: {
      users: [
        {
          id: '1',
          username: 'snow123',
          name: 'John Snow',
          age: 25,
          avatar: UserIcon,
        } as User
      ],
    },
  },
};

This feature makes it simple to isolate components with predefined props, allowing for faster iteration and better debugging. You can install Jinno and start creating your own component stories by visiting the [VS Code marketplace link here]

Conclusion

VS Code’s extensive extension marketplace provides countless tools to enhance your React development workflow. This article introduced some of the best ones for improving productivity, from linting and formatting to optimizing imports and enhancing styling workflows.

By integrating these extensions, you can make your development process smoother and more efficient. Happy coding!

How to Organize Your React Project Like a Pro

Ender — Wed, 12 Mar 2025 06:16:56 +0000

So, you’ve started developing your React app, and everything is going smoothly until you notice that your project folder is getting chaotic. Sound familiar? Don’t stress—we’ve all been there. Organizing a React app can seem daunting, but with the right structure, you can maintain a clean, scalable, and easily navigable codebase.

In this guide, I’ll walk you through a folder structure that has worked exceptionally well for me. It’s beginner-friendly, scalable, and ideal for small to medium-sized projects. Let’s get started!

1. assets/ 🖼️

This directory is for all static assets like images, icons, fonts, and other media. Keeping them in one place simplifies management and access throughout your app.

What to store here:

Images (logo.png, background.jpg)
Icons (SVGs or icon fonts)
Fonts (custom or third-party)

2. components/ 🧩

This is where all reusable UI components reside. Buttons, cards, modals, and any other elements used across your app should be stored here.

What to store here:

Reusable components (Button.jsx, Card.jsx)
Component-specific styles (if not using CSS-in-JS)
Subfolders for complex components (e.g., components/Header/)

3. contexts/ 🌐

React Context is great for managing global state without prop drilling. This directory stores all context providers and related logic.

What to store here:

Context providers (AuthContext.js, ThemeContext.js)
Reducers or custom hooks for managing context

4. Use Jinno to Create Stories for Your Components 🚀

Jinno is a VS Code extension that allows you to create component stories directly inside your editor. Unlike Storybook, where you need to modify your component or set up an external environment, Jinno integrates seamlessly with your code. This means you can define different examples for your components without modifying their implementation.

With Jinno, you can define a .story.tsx file next to each component, allowing you to quickly preview different prop variations.

Example: Create a [YOUR_COMPONENT_NAME].story.tsx file next to your React component. For example, if your file is UsersList.tsx, create UsersList.story.tsx in the same directory and define different prop examples.

// UsersList.story.tsx
import { User } from './types';
import { UserIcon } from './UserIcon';

export default {
  examples: {
    default: {
      users: [
        {
          id: '1',
          username: 'snow123',
          name: 'John Snow',
          age: 25,
          avatar: UserIcon,
        } as User,
      ],
    },
  },
};

Why jinno is importent to structure your project:

Define component stories without modifying the component code
Live preview of different prop configurations inside VS Code
**Jinno will isolate the component for you, no need to change your code
No need to set up an external tool like Storybook or change your code to isolate the components

I’ve been using Jinno in my projects, and it has dramatically improved my development workflow. If you want to streamline your component testing process, try Jinno here.

5. pages/ 📄

This folder stores the main components that define each page of your application. Every file here corresponds to a specific route in your app.

What to store here:

Page components (Home.jsx, About.jsx, Contact.jsx)
Page-specific logic and styles

6. services/ 🌍

This folder is dedicated to managing API requests and external integrations. By keeping these files separate, it makes the code easier to manage and mock during testing.

What to store here:

API service files (authService.js, userService.js)
API configuration files (e.g., apiConfig.js)

7. styles/ 🎨

This folder is where global styles, themes, and CSS utilities are managed. If you’re using a CSS-in-JS solution, you might not need this folder, but it remains useful for defining overarching styles.

What to store here:

Global styles (global.css)
Theme configurations (theme.js for styled-components or Material-UI)
Reusable CSS utility classes

8. App.js 🎯

The App.js file serves as the entry point of your React application. This is where you define your app’s structure, routes, and global configurations.

What to include here:

Routing setup (react-router-dom)
Context providers (AuthProvider, ThemeProvider)
Global error boundaries and wrappers

With this structured setup, your React app will remain clean, maintainable, and scalable as it grows!

🚀 Final Thoughts

Building a React app can be overwhelming, but with a well-structured folder setup, you’ll have a strong foundation for scalability and maintainability. By organizing your files efficiently, you make it easier to collaborate with others, debug issues, and extend your application in the future. Plus, tools like Jinno can further enhance your development experience by making component previews and testing seamless. Now, you’re ready to build with confidence—go create something amazing! 🚀

Optimizing React Development: Fast Reloads with Vite, Webpack, CRA and Jinno

Ender — Tue, 11 Mar 2025 05:43:29 +0000

Vite vs Create React App vs Webpack: Which One is Best for Fast Reloads?

When developing React applications, fast reload times are crucial for maintaining a smooth workflow. Vite, Create React App (CRA), and Webpack all offer different approaches to bundling and development, but how do they compare when it comes to hot reloading speed? Let’s break down the advantages and disadvantages of each and explore the best way to optimize your workflow.

Vite: Lightning-Fast Hot Reloading

Advantages:

Uses native ES modules for near-instant server starts
Hot Module Replacement (HMR) is extremely fast due to optimized dependency pre-bundling
Out-of-the-box support for modern JavaScript and TypeScript
No need for extensive configurations

Disadvantages:

Less customizable than Webpack for large-scale enterprise projects
Some older libraries may not be fully compatible due to its reliance on ESM

Fast Reload Speed in Vite

Vite leverages ESBuild for lightning-fast transpilation, making it significantly quicker than CRA and Webpack when updating components. The speed advantage is most noticeable in large projects with many dependencies.

Create React App (CRA): The Traditional Choice

Advantages:

Easy to set up with minimal configuration
Works well for small to medium-sized projects
Supported by React’s core team, ensuring reliability

Disadvantages:

Slow build times, especially in large projects
Hot Module Replacement (HMR) is slower than Vite
Comes with a lot of pre-configured dependencies, which can slow development

Fast Reload Speed in CRA

CRA uses Webpack under the hood but doesn’t optimize for fast reloads the way Vite does. While HMR is supported, it tends to be sluggish, especially when dealing with deeply nested component trees.

Webpack: The Highly Configurable Powerhouse

Advantages:

Highly customizable with a vast ecosystem of plugins
Can be optimized for both development and production environments
Supports a wide range of asset types (CSS, images, fonts, etc.)

Disadvantages:

Complex configuration can be overwhelming
Slower dev server start times compared to Vite
HMR performance is inconsistent depending on configuration

Fast Reload Speed in Webpack

Webpack’s hot reload performance varies based on configuration. While it can be optimized to approach Vite’s speed, out of the box, it’s generally slower due to heavier bundling mechanisms.

The Best Way to Optimize Hot Reload: Using Jinno

While each tool has its strengths, hot reload performance can still be a challenge—especially in large applications. This is where Jinno comes in. Jinno enables live previews of React components directly within the editor, letting you isolate any component with a single click. This drastically speeds up hot reload times, regardless of whether you’re using Vite, CRA, or Webpack.

Why Jinno is a Game-Changer

Instant component previews: No need to refresh or switch tabs.
One-click isolation: Test components independently without reloading the full app.
Faster iteration: Focus on coding rather than waiting for slow builds.

Jinno works seamlessly with all three tools, making it the fastest way to work with React components. If you want to maximize your development speed, try Jinno for VS Code today.

Fast Reload Comparison Table

Tool	Hot Reload Speed	Component Isolation	Configuration Required	Best Use Case
Webpack	Moderate	No	High	Enterprise apps with custom needs
Create React App (CRA)	Slow	No	Low	Small to medium projects, beginners
Vite	Fast	No	Low	Modern projects needing speed
Jinno	Fastest	Yes	None	Any React project for maximum productivity

Conclusion

For the best out-of-the-box hot reload speed, Vite is the clear winner. However, Webpack offers more flexibility, and Create React App remains a simple choice for beginners. Regardless of which tool you choose, Jinno can take your workflow to the next level by optimizing component isolation and reducing reload times, ensuring you stay productive and focused on building great applications.

The Ultimate Guide to Props and State in React With Examples!)

Ender — Mon, 10 Mar 2025 05:51:10 +0000

Does React Confuse You with Props and State?

Props and state may look similar, but they serve different purposes—and misunderstanding them can lead to unexpected issues in your components. 🚀

Let’s clarify these concepts once and for all!

Props: Data Passed to Components

Props function like messages sent to components. They:

Are immutable (cannot be modified)
Flow from parent to child components
Work best for static or external data

🔹 Example:

function WelcomeMessage(props) { 
  return <h1>Hi, {props.user}!</h1>; 
}

Here, user is a prop—it is provided by a parent component and remains unchanged within this component.

🔑 Tip: Use props for data that should not be altered by the receiving component.

🟢 State: Data Managed by the Component

State represents a component’s internal data that can be updated over time. It’s great for:

Interactive elements (like inputs)
User-driven changes
Managing component lifecycle updates

🔹 Example:

function ClickCounter() { 
  const [clicks, setClicks] = useState(0); 

  return ( 
    <div> 
      <p>Clicks: {clicks}</p> 
      <button onClick={() => setClicks(clicks + 1)}>Increase</button> 
    </div> 
  ); 
}

Here, clicks is state—it updates dynamically using setClicks.

⚡ Key Differences at a Glance

Props = Data comes from outside the component 📨
State = Data is managed within the component 📤
Props stay unchanged unless modified by the parent.
State can be changed within the component itself.

🚨 Common Pitfall: Avoid modifying props inside a component. If you need dynamic behavior, handle state at the parent level and pass updated values as props!

🔥 Boost Your React Workflow with Jinno

While working with props and state, efficient component testing and previewing can make a big difference in your workflow. That’s why I use Jinno, a VS Code extension that enables live previews of React components directly in the editor. With Jinno, you can isolate any component with one click, speeding up your hot reload process and keeping you focused on coding rather than constantly switching tabs.

Why it’s a huge productivity boost:

Instant component previews inside your editor
One-click isolation to test components without launching a full app
Faster iteration—no need to break focus by switching tabs

🚀 Check out Jinno on the VS Code Marketplace and give your React workflow a serious upgrade!

📌 Simple Analogy:

Imagine a ticket vending machine 🎟️

Props = The price and ticket type set by the machine’s owner
State = The number of tickets remaining, tracked within the machine

When you buy a ticket, state updates, but the props stay the same until the machine's owner adjusts them.

💬 Have you mastered props and state, or are you still working through React’s quirks?

Share your thoughts below! 🚀

Tired of Switching Between Your Editor and Browser? This Changed My React Workflow

Ender — Sun, 09 Mar 2025 06:32:53 +0000

Hey devs,

I used to waste so much time constantly switching between my VS Code editor and the browser just to check small UI tweaks. It slowed me down, broke my focus, and made debugging way more frustrating than it needed to be.

Then I found a game-changer: Jinno. It lets you preview your React components directly inside VS Code, so you don’t have to refresh your browser or set up an external preview environment.

🚀 Why it’s been a huge productivity boost:

✅ Instant component previews inside your editor
✅ One-click isolation to test components without launching a full app
✅ Faster iteration—no need to break focus by switching tabs

If you’re working on a component library, a big project, or just learning React, I highly recommend giving it a shot. It’s been a massive time-saver for me.

🔗 Check it out here

Would love to hear—what tools have helped you speed up your React workflow? 🚀

Jinno - IDE extension I made to preview React components

Ender — Thu, 23 Jan 2025 07:08:05 +0000

I built Jinno because I often found myself juggling between my code editor and browser to preview React components during development. It was frustrating and time-consuming, breaking my workflow and focus. With Jinno, I can now see live previews of React components directly in VS Code, allowing me to iterate faster and stay fully immersed in coding. It’s a tool that eliminates distractions and makes the development process smoother and more enjoyable.

You can try Jinno from here:Link

One of the key features of Jinno is its ability to isolate any React component from the rest of the project with just one click. By isolating the component, hot reload becomes significantly faster, as only the component itself is reloaded, not the entire app. I used to struggle with isolating components manually—it was a tedious and error-prone process that disrupted my workflow. This is why Jinno is such a game-changer: it handles the isolation for you, saving time and making development more efficient and enjoyable.

Developing Components in Isolation: The Pros, Cons, and a Game-Changer Tool

Ender — Tue, 21 Jan 2025 06:58:49 +0000

In modern front-end development, isolating components and pages has become a popular approach. It allows developers to focus on small, self-contained parts of an application, promising increased efficiency and reusability. But isolation is not always straightforward—it comes with challenges, especially when integrating isolated work back into a large application. In this article, we'll explore the benefits and pitfalls of isolated development and how a new VSCode extension, Jinno, changes the game by offering effortless live previews of React components while maintaining a seamless connection to the larger application.

👉 Check Jinno out here

The Pros: Speed, Focus, and Reusability 🚀

Faster Development Cycles

Isolating components reduces complexity and allows developers to focus on a single piece of functionality. Without the overhead of running an entire application, teams can iterate faster, leading to quicker delivery.

Focused, Cleaner Code

Developers working in isolation can avoid distractions caused by unrelated parts of the application. This leads to cleaner and more modular code.

Better Reusability

When components are built in isolation, they are often designed to be more generic and reusable. This improves maintainability and reduces duplication across projects.

The Cons: It's Not That Simple 🤔

Integration Challenges

A component that works perfectly in isolation may break when integrated with the rest of the application. Factors like global state, context providers, or CSS dependencies frequently introduce hidden bugs that don’t surface in isolated environments.

Simulating Real Context

To truly test components, developers need to simulate the application's context, such as state management and theming. Recreating this context is time-consuming and prone to errors, undermining the benefits of isolation.

Limited Real-World Testing

Isolated development environments can't fully simulate real-world interactions. Issues with performance, user interactions, and asynchronous data fetching often arise only after components are integrated.

Tools for Isolated Development 🛠️

Storybook

Storybook is a widely popular tool for developing, testing, and documenting UI components in isolation. It’s a favorite among developers and open-source projects.
Pros: Robust ecosystem, rich addon support, and integration with testing libraries like Jest.
Cons: Extensive configuration overhead and performance issues in large projects.

Bit

Bit specializes in sharing and collaborating on components, making it ideal for design systems and micro frontends.
Pros: Enables decentralized component sharing, promotes reuse, and provides a clear versioning system.
Cons: Steeper learning curve, reliance on a centralized platform, and added challenges in managing and maintaining the system.

Styleguidist

Styleguidist is a straightforward tool for creating living style guides for React components. It’s less popular but highly useful for simplicity-focused teams.
Pros: Minimal setup, live examples, and clean documentation generation.
Cons: Limited ecosystem and scalability for larger projects.

Jinno: The Future of Isolated Development

Despite the existing tools, isolation has always been tricky due to the need for real-world context during development. This is where Jinno, a revolutionary VSCode extension, comes in. Jinno eliminates the complexity of isolated development while maintaining a seamless connection to the larger application.

How Jinno Works

Jinno scans your project, analyzing component dependencies, CSS, and other assets to generate a live preview of your component. The fact that Jinno is seamlessly integrated into the VSCode IDE, eliminates the need to switch between tools, enabling a smoother, more intuitive workflow.

But Jinno goes a step further - it identifies and incorporates key application dependencies like context providers, state management libraries, themes, and even analyzes and generates prop values. This ensures that the preview environment reflects the real application, enabling you to develop and test components as they would appear in production. The ability to have an accurate, live preview without leaving your IDE is a game-changer for productivity.

👉 Check it out here

Why Jinno Stands Out

Live Previews: See your components exactly as they would render in your main application.
Integrated with VSCode: Live previews are built directly into your IDE, providing instant feedback and making the development process smoother than ever.
Zero Configuration & Seamless Integration: Finally a tool where you don't need to write custom configurations or set up additional tools, it does it for you, it detects all of your project dependencies, eliminating the need to manually simulate application context.
Enhanced Productivity: Spend less time debugging integration issues and more time building features.

Isolated Development Made Easy with Jinno

Developing in isolation has its advantages, but without the right tools, it can lead to challenges when integrating with the broader application. Tools like Storybook and Bit have laid the groundwork for isolated development, but Jinno takes it to the next level by bridging the gap between isolation and real-world application behavior.

👉 Check it out here

With Jinno, front-end developers gain the best of both worlds: the efficiency of isolated development and the confidence of seamless integration. Whether you're working on a small personal project or collaborating on a large-scale application, Jinno empowers you to focus on what matters most—building exceptional user interfaces.

So what do you think? Can it change the way you develop? 🤔🚀

10 Must-Have VS Code Extensions for 2025 🔥

Ender — Tue, 14 Jan 2025 08:39:16 +0000

In the rapidly changing world of software development, having the right tools can significantly impact your workflow and efficiency. Visual Studio Code (VS Code) has become a favorite among developers globally, thanks to its flexibility and extensive features.

This article highlights 10 essential VS Code extensions I'm using personally that I think every developer should explore this year.

Whether you’re an experienced developer or just beginning your journey, these tools can help you code more efficiently, effectively, and with greater ease.

1. Jinno: live preview React components inside VS code

This is a new and exciting one. In my opinion the wet dream for every frontend developer, Jinno creates a live preview for React components, side by side your code in zero configuration or extra installations and it doesn't matter which framework you are using.

Extension link:
https://marketplace.visualstudio.com/items?itemName=jinno.codelens-sample

2. WakaTime
WakaTime is a super cool website / extension that keeps track of the time you spend programming. It provides insights about the languages you spend the most time on, your coding trends, set goals, and more!

Extension link:
https://wakatime.com/

3. Markdown Preview Enhanced

A Markdown VS Code extension enhances Visual Studio Code by providing features like syntax highlighting, previewing, linting, and editing support for Markdown files, improving the writing and formatting experience.

Extension link:
https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced

4. Code Runner
Run C, C++, Java, JS, PHP, Python, Perl, Ruby, Go, Lua, Groovy, PowerShell, CMD, BASH, F#, C#, VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml, R, AppleScript, Elixir, VB.NET, Clojure, Haxe, Obj-C, Rust, Racket, Scheme, AutoHotkey, AutoIt, Kotlin, Dart, Pascal, Haskell, Nim,

Extension link:
https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner

5. REST Client
REST Client for Visual Studio Code

Extension link:
https://marketplace.visualstudio.com/items?itemName=humao.rest-client

6. Git History
Explore the Git log, review file history, and compare branches or specific commits.

Extension link:
https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory

7. Code Spell Checker
Spelling checker for source code

Extension link:
https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

8. Git Lens
Supercharge Git within VS Code — Visualize code authorship at a glance via Git blame annotations and CodeLens, seamlessly navigate and explore Git repositories, gain valuable insights via rich visualizations and powerful comparison commands, and so much more

Extension link:
https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

9. Bookmarks
Mark lines and jump to them

Extension link:
https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks

10. Multiple Cursor Case Preserve
Preserves case when editing with multiple cursors

Extension link:
https://marketplace.visualstudio.com/items?itemName=Cardinal90.multi-cursor-case-preserve