Tag Archives: webdevelopment

What’s new in Next.js 12: October 2021

Nextjs 12

Nextjs team has announced its latest addition, Next.js 12, the biggest release ever. Lets look into the improvements and new features that Next.js 12 offers to create and improve your web applications.

Speed test in Nextjs newest version

Faster builds and Fast Refresh with Rust compiler

Optimized bundling and compiling with ~3x faster refresh locally and ~5x faster builds

To improve performance, Next.js replaced the Babel compiler with an extensible Rust compiler — SWC — that takes advantage of native compilation.

Read more

Introducing Middleware

You can modify the response by rewriting, redirecting, adding headers, or even streaming HTML.

You can run code before a request is completed, and based on the request, we can modify the response by rewriting, redirecting, adding headers, etc.

nextjs middleware
NextJs and ReactJS

Preparing for React 18

Zero client-side JavaScript needed

Features including server-side Suspense and SSR streaming support also React Server Components which allow us to render everything, including the components themselves, on the server

URL Imports

You can CDN projects like Skypack and esm.sh in your Next.js app.

You can import directly tooling from the CDN without any extra builds or installs.

skypack

What’s new in Flutter 3: May 2022

Flutter v 3

Flutter transforms the app development process. Build, test, and deploy beautiful mobile, web, desktop, and embedded apps from a single codebase.

Flutter is an open source framework by Google for building beautiful, natively compiled, multi-platform applications from a single codebase.

Fast

Flutter code compiles to ARM or Intel machine code as well as JavaScript, for fast performance on any device.

Try it in DartPad

Multi-Platform

Reach users on every screen

Deploy to multiple devices from a single codebase: mobile, web, desktop, and embedded devices.

See the target platforms
Flutter multiplatform
Developer experience

Developer Experience

Transform your workflow

Take control of your codebase with automated testing, developer tooling, and everything else you need to build production-quality apps.

Flutter for developers

Stable & Reliable

Trusted by many

Flutter is supported and used by Google, trusted by well-known brands around the world, and maintained by a community of global developers.

Explore the ecosystem
Flutter project

Why You Should Use DigitalOcean for Your Next Project

why you should use do for your next project

DigitalOcean offers easy-to-use managed cloud hosting service with simple user interface and powerful command line tools, which make it easy to deploy your code quickly and manage your server from anywhere on the globe.

DigitalOcean has invested significant of money to its infrastructure to make it truly a complete cloud engine. They have expanded geographic footprint, and introduced new products such as DigitalOcean Kubernetes, App Platform, and Managed Databases to its infrastructure. Companies such as Gitlab, Slack, Ghost, Cloudways and Whatfix are using DigitalOcean for years now.

App Platform

DigitalOcean App Platform is very easy to use and you can get started with it right away. It also have a lot of great features so you can build, deploy, and scale apps quickly as possible. DigitalOcean will handle the infrastructure, app runtimes and its dependencies, that means you can focus more on your code and its business logic.

With DigitalOcean, you can scale your apps to handle traffic as it grows. It is very cost effective and effectively optimize resources as you scale your apps.

Kubernetes & Load Balancers

With Kubernetes, you can easily scale up and deploy containerized apps in clusters. If you’re ready to start using containers but don’t want to worry about managing them, DigitalOcean is a great choice. Load balancers on DigitalOcean are simple to set up. It helps to manage distribute incoming traffic across a group of Droplets and increase your application’s availability with Load Balancers.

Introducing a new $4 Droplet

If you have an existing business or other online presence, then you’re likely familiar with the cost of hosting and managing multiple server instances. DigitalOcean is introducing a new Droplet priced at $4/month encouraging more developers across the globe to try its Droplets. This Droplet comes with 1 vCPU, 512MB memory, 500GB bandwidth, and a 10GB SSD, perfect for developers want to learn new skills and proof of concept for the next big app ideas. The price changes will be available starting July 1, 2022.

Backup

Backups are an important part of any hosting environment, but they’re often overlooked or not easy to implement. Droplet backups have always affordable and simple to enable. Backup Droplets disk images once per week, priced at 20% of the cost of the Droplet. If you destroy the Droplet, backups will also be removed and purged. However snapshots, on-demand full disk image of a Droplet work opposite. They will still be on your account until you delete it even after the Droplet is removed. Snapshots can be used to restore an existing Droplet or create a new Droplet from that point in time.

Developer Support

DigitalOcean offers free 24/7 technical support. There are three levels of support provided by the support team to meet your needs. You can send inquiries and contact the support team agent at any time and get help. They also have an active forum, a community where users can post questions and get answers from other developers. In addition, you can find number of comprehensive articles, tutorials and official docs related to any products and services they provide to the customers.

Read 8 Important Ways to secure DigitalOcean Droplets

In summary here are the few reasons I use DigitalOcean:

  • They provide virtual machine, Kubernetes, App platform, storage, database, and many more.
  • Easy to use, economical, scalable, and adaptable for web.
  • Affordable, reliable and quick deployment.
  • Server quality is great and server spec is perfect for various business.
  • Droplet backups are easy to enable and affordable.
  • Excellent tutorials and articles provided by the community and expert.

DigitalOcean grow with a global community. Whether you’re a developer looking to deploy your next project or an enterprise business company looking to build out a new product, DigitalOcean has a solution for you. So what are you waiting for? Try DigitalOcean today with a $100, 60-day credit to get started. That’s enough resources to run a website or app that you can build and start growing a successful business.

What’s new in Flutter 3

whats new in flutter 3 for let me fail

Introduction

Google announces Flutter 3. We all have been waiting for Material 3, Games Toolkit, macOS, Linux Support and Fordable Phone Support. Wait is over, finally it has arrived. Google and the open source community has put a lot of hard works to Flutter 2.0 and now they have released Flutter 3.0 with much more exciting features. Today we look into the new features that Flutter has in this major changes!

1. Flutter Firebase

A collection of tools is always necessary to have when building and launching applications. Data storage, cloud functions, authentication and app testing for different platform requires comprehensive third-party tools such as Firebase, AWS Amplify and AppWrite.

For example, Firebase is an amazing back-end platform backed by Google which accelerate app development process providing powerful backend infrastructure for the applications.

Flutter and Firebase work hand-in-hand to help you build web and mobile apps. This is not a surprise for any of us as we know both these products are belongs to one company, Google.

Read more about How to connect flutter with firebase backend.

Majority of Flutter developers use Firebase in their apps. Over the last few releases Flutter team have been working with Firebase to expand and provide better integration for Flutter as a first-class integration. Flutter Crashlytics plugin helps to track real-time fatal errors with the same set of features through Firebase’s real-time crash reporting service. Firebase Crashlytics is a lightweight, realtime crash reporter that helps you track, prioritize and fix stability issues that erode your app quality.

2. macOS and Linux Support

According to a 2021 developer survey, Flutter is the most popular cross-platform mobile framework used by majority of global developers. Flutter desktop support is still far behind compared to mobile support specially in its early releases.

Flutter was stable for Windows in previous versions and now it supports both linux and macOS as well. Now you can build apps for all desktop platforms without ever worrying of breaking your code. You can build production ready applications for all platforms using flutter.

3. Mobile Updates

Smoother experience

Flutter apps now contribute 120Hz refresh rates that were previously limited to only 60Hz on iOS devices. This increase helps to have a smoother experience on iOS devices specially during animations.

Fordable Phone Support

Finally the newest release supports for fordable mobile devices. The new widgets and its core features will bring more natural experiences to fordable devices.

4. Web updates

Faster image decoding and scrolling

Flutter web now automatically detects and uses the ImageDecoder API in browsers that support it. As of today, most common browsers have added this API. Because of ImageDecoder API the image rendering for web is more efficient and the speed is twice faster than the previous versions. In overall the performance is major improvement for new update.

App lifecycle API

The new lifecycle API provides you flexibility to control over the Flutter framework. Now you can run Flutter apps in headless mode on the web. This gives you the flexibility to control the bootstrap process of your app from hosting HTML page, and check Lighthouse analysis for the performance of your app. For example you could preload the content while showing a login screen or a progress bar! You can get more information, Customizing web app initialization on docs.flutter.dev.

5. Material 3

Material 3 is known as the next generation of Material Design. Flutter 3 does not have full support for material 3 yet, only certain widgets support material 3. Flutter 3 provides opt-in support for Material 3. Maybe in future release, all the widgets might have material 3 support and could be the standard default for flutter.

6. Theme Extensions

Theme extension feature enable themes more convenient. It enables customizing theme by adding custom colors and custom color names to the flutter theme. You are not stuck with default colors that comes with flutter anymore. It is now much easier than ever to add our own color to flutter apps.

7. Flutter’s Games Toolkit

The Flutter team has released an easy-to-use casual games tool kit for casual gamers. It is a specialized starter kit of various templates which mean you can write your game code with Flutter casual Games Toolkit.

Now you can deploy casual games much quickly on multiple platforms. Flutter game repo has pre-integrated modules for in-app purchases, Ads & more. However if you want to develop 3D games, then flutter is not the right choice rather you want to go for Unity 3D.

8. Dart 2.17

Dart 2.17 stable was announced along with Flutter 3.0 with many long-awaited features that developers have been waiting for. Dart is the secret sauce behind Flutter, and any improvements in Dart would help improve Flutter’s development.

According to Dart and Flutter team, Dart 2.17 adds major new support for members on enums, refines how you can use named arguments in constructors, and makes code for forwarding parameters to superclasses much less verbose and repetitive. We will look into the new features of Dart 2.17 in more details in the coming articles.

Create a Responsive Layout in Flutter

Create a Responsive Layout in Flutter

Flutter is a powerful choice for web and mobile apps development. In Flutter, we can create a fully responsive designs for several platforms using one code base. As we all know a responsive design ensures the appeal of our application is consistent and gives users a seamless experience, no matter the size of the device. For example, when the screen size of the browser extends to a certain width the layout of the app will be changed.

In this short article, we’ll be covering how to create responsive designs in Flutter for web and mobile devices.

Getting Started

To begin, we’ll simply use the app we created in previous tutorial that looks like something like this👇.

💡 For simplicity we are using fixed numbers for screen resolution but when designing user interfaces for mobile apps, always avoid hardcoding numbers for widget sizes and instead utilize percentages. The MediaQuery class in Flutter may be used to do this.

Let’s work on coding…

Make a folder named layout and inside that create new file called layout.dart. Create a stateless widget for now, later we can use a stateful widget when we fetch dynamic contact from backend. We want to return a widget named ResponsiveLayout which helps in creating responsive layout. LayoutBuilder will give us a builder function which then return to us a context and constraints. Using constraints we can get the screen width.

Now create a file named dimensions.dart in the utils folder. Our web screen size starts at 600 resolutions so we will display web layout when the screen size is at 600 and above.

Now we want to create webScreenLayout and mobileScreenLayout widgets and accept these two widgets using a constructor as shown.

class ResponsiveLayout extends StatelessWidget {
  final Widget webScreenLayout;
  final Widget mobileScreenLayout;
  const ResponsiveLayout(
      {Key? key,
      required this.webScreenLayout,
      required this.mobileScreenLayout})
      : super(key: key);

We have accepted those two widgets via a constructor and we want to return those two widgets.

import 'package:flutter/material.dart';
import 'package:flutter_gradient_example/utils/dimensions.dart';

class ResponsiveLayout extends StatelessWidget {
  final Widget webScreenLayout;
  final Widget mobileScreenLayout;
  const ResponsiveLayout(
      {Key? key,
      required this.webScreenLayout,
      required this.mobileScreenLayout})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth > webScreenSize) {
          return webScreenLayout;
        }
        return mobileScreenLayout;
      },
    );
  }
}

Now go to main.dart file and replace Center widget with ResponsiveLayout. We then import layout.dart file top of the main.dart file. Then pass both mobileScreenLayout and webScreenLayout as shown below.

It is time to create mobile_screen_layout.dart and web_screen_layout.dart file, so we can use these two widget on main.dart.

import 'package:flutter/material.dart';

class MobileScreenLayout extends StatelessWidget {
  const MobileScreenLayout({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text("This is Mobile Screen"),
      ),
    );
  }
}

We use same stateless widget in both the widget. Make this simple for now by displaying a text on the screen as shown.

import 'package:flutter/material.dart';

class WebScreenLayout extends StatelessWidget {
  const WebScreenLayout({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text("This is Web Screen"),
      ),
    );
  }
}

Now run the app in google Chrome and also in a mobile simulator. So we can test the app. For that run:

flutter run -d chrome

If you want to see it on iOS simulator then run:

open -a simulator

You will notice it is working as expected. When we reduce the chrome screen size to 600 and below it changes to mobile view.

Step by Step Guide to Install and Set Sanity Cli for Your Next Project

Step by Step Guide to Install and Set Sanity Cli for Your Next Project

Introduction

In this tutorial, you will learn how to get start with Sanity.io for your next project. This tutorial will walk you through installing the necessary tooling, initiating project and starting the local development server for sanity studio. Before that lets understand what sanity.io is all about.


Sanity.io

Sanity.io is the platform for structured content that helps you to build better digital experience. Sanity provides you various features such as managing your text, image and other media files with the help of APIs libraries. Sanity studio offers rapid configuration and free form customization for its users. Using its plugins and toolkits you are able to create efficient workflows. With sanity CMS, now organizing and enhancing your content is easier than ever.



Getting started with Sanity

To begin with simply create a fresh project on your workplace, in this case sanity_backend type the following command on your terminal and let sanity do its thing. Basically this command is going to install a sanity cli globally and sanity init is going to setup a brand new sanity project for you.


npm install -g @sanity/cli && sanity init

The command-line tool is used to set up new projects, manage datasets, import data, and much more. We’ll be using it to get your project up and running.

During the installation process, Sanity wants you to complete a successful login process. It will provide you various login options such as Google, Github and E-mail/Password. Once you complete the login process, it is going to redirect you to Sanity dashboard showing a successful login message on the screen.



Now you can return back to terminal and create a fresh project by providing suitable name for your project. Press enter and you will get dataset configuration setup. You can choose default dataset configuration by pressing Yes and let it create a dataset config for your project.



Once you confirm your path it shows different project templates including blog, E-commerce and movie project.



Sanity provides you a lots of predefined project templates, however in this case we would like to choose a clean project with no predefine schemas.



Write a name for your project on the terminal (in this case sanity_test). Once you press enter, it starts bootstrapping product files and dependencies for your project.



Conclusion

That’s it. Congrats if you made it through the entire tutorial. You’ve just successfully install Sanity CMS to your next project. Sanity is wonderful tool to power your static application such as a blog or e-commerce website.

I hope you find this article helpful. Thank you for reading. Happy Coding..!! 🙂

 

Implement Load More Pagination in React

Implement Load More Pagination in React

Introduction

After Covid-19, Pandemic and now Russia-Ukraine War, so many things happening unexpectedly😔  but thats another story lets focus on our topic for today.

In this article, we will go through how to implement Load more functionality for your next React.js project.

Demo of what we are working on today…👇


Why we need Load more functionality?


For example, you have an e-commerce app and you may need to load products from Rest API or from any other backend database. If we only have 10 or 20 products, it will be easy to fetch them all in just one request. However, if you have hundred and thousands of products sometime even millions, you have to implement pagination to reduce the request hitting on the server. It is important to reduce latency and server load so that the app significantly improves the performance.

So if you want display so many data such as products list, items or blog posts on your web page then you need to implement pagination. For this reason we are learning how to implement basic Load more functionality for in this article. Keep in mind in this example, we will not use any server side rending rather fetch products locally for simplicity.


Steps to implement load more pagination in React

  1. Create a Next.js app
  2. Install TailwindCSS and Configuration
  3. Design the app
  4. Implement load more button functionality
  5. Output

1. Create a Next.js app

Start by creating new Next.js project with TailwindCSS. The quickest way to start using Tailwind CSS in your Next.js project is to use the Next.js + Tailwind CSS Example.


npx create-next-app load-more
cd load-more

2. Install TailwindCSS and Configuration

Install tailwindcssand its peer dependencies via npm, and then run the init command to generate both tailwind.config.js and postcss.config.js.


npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configure your template paths


module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add the Tailwind directives to your CSS

Add the @tailwinddirectives for each of Tailwind’s layers to your ./styles/globals.css file.


@tailwind base;
@tailwind components;
@tailwind utilities;

3. Design the app

Now let’s design the app. We will display list of groceries on the home page. Each product consists of item name, category and image. We will create few components and pages. We start with index.js page. This is main file for our app because it consists of <FreshProd /> component which is responsible to display all the products.


import Head from "next/head";
import Image from "next/image";
import Link from "next/link";
import FreshProd from "../components/FreshProd";

export default function Home() {
  return (
    <main className="container mx-auto px-8 sm:px-12">
      <section className="py-4">
        <div className="flex  items-center justify-between">
          <h2 className="text-md sm:text-2xl font-extrabold py-8">
            Stock Up on Fresh Favorites
          </h2>

          <Link href="/shop">
            <a className="text-base py-8 cursor-pointer text-black">See All</a>
          </Link>
        </div>
        <FreshProd />
      </section>
      <section className="py-4">
        <h2 className="text-2xl font-extrabold py-8">Recommended Products</h2>
        <FreshProd />
      </section>
    </main>
  );
}

As said before we will use all the data locally therefore we left all the data in FreshProd.js component as an object. All the images are also stored in images folder for simplicity. We will fetch data using an external APIs or maybe from firebase database later in another tutorial.


const freshProds = [
  {
    id: "1",
    src: "/images/100p.jpeg",
    name: "100 Plus",
    category: "Groceries",
  },
  {
    id: "2",
    src: "/images/Ajinomoto.jpeg",
    name: "Ajinomoto",
    category: "Groceries",
  },
  {
    id: "3",
    src: "/images/Almondnuts.jpg",
    name: "Almondnuts",
    category: "Groceries",
  }, 
];

Now, store this object in a map so we can display them on <Product /> component. For that we need to Destructuring Props.


function FreshProd() {

  return (
    <div>
      <div className="grid grid-cols-3">
        {freshProds?.map((freshprod) => (
          <Product
            key={freshprod.id}
            src={freshprod.src}
            name={freshprod.name}
            category={freshprod.category}
          />
        ))}
      </div>
    </div>
  );
}

export default FreshProd;

Up to this point, we are able to view all the products in Product component.


import React from "react";

import Image from "next/image";
function Product({ id, name, src, category }) {
  return (
    <div className="py-4">
      <div className="max-w-sm rounded overflow-hidden shadow-lg">
        <Image
          className="rounded-md"
          objectFit="fill"
          src={src}
          width={150}
          height={150}
        />
        <div className="px-6 py-4">
          <div className="font-bold text-xl mb-2">{name}</div>
          <p className="text-gray-700 text-base">{category}</p>
        </div>
      </div>
    </div>
  );
}

export default Product;

Now let’s try to write a function so that it display certain amount of products instead of displaying all the products on the screen. This is where we use Loadmore button and implement pagination on our app. In this case we want to display 6 products.


const [visible, setVisible] = useState(6);

  const showMoreItems = () => {
    setVisible((prevValue) => prevValue + 6);
  };

Lastly we slice the object, so in each time we press the button it will display 6 products on the screen. We use props to pass the data to Product component.


<div className="grid grid-cols-3">
   {freshProds?.slice(0, visible).map((freshprod) => (
      <Product
         key={freshprod.id}
         src={freshprod.src}
         name={freshprod.name}
         category={freshprod.category}
          />
     ))}
</div>

This is the button which is used to load more products on each click.


<div className=" flex flex-col  pt-8	">
    <button
      className=" content-between bg-transparent hover:bg-green-800 
      text-green-800 font-semibold hover:text-white py-2 px-4 border
      border-green-800 hover:border-transparent rounded"
      onClick={showMoreItems} >
          Load More
     </button>
</div>

Wrap Up

Thats it! Now we have implemented simple pagination or loadmore functionlity on our Next.js app project. We can improve this functionality and code but this is a good starting point.


Code

You can find the source code Github

Top 11 Best VS Code Extensions you Need in 2022!

Top 11 Best VS Code Extensions you Need in 2022 website

Top Must Have Extensions For Your Next Project

Visual Studio Code is undoubtedly the most popular code editor today. It is lightweight code editor developed by Microsoft for Windows, Linux and macOS. It includes various features such as syntax highlighting, debugging, intelligent code completion, snippets, embedded Git, code refactoring and many more. VS Code provides better performance and stability compared to other code editors in the market.

Microsoft has huge market place for VS Code where developers able to get third party plugins and extensions, availing VS Code more rich and efficient. Today we are discussing top 11 plugins for VS Code which provides invaluable to the speed and quality to your projects.

In this guide, we’ll explore the following extensions.

  1. Git Lens
  2. Peacock
  3. Tailwind CSS IntelliSense
  4. Bracket Pair Colorizer
  5. ES7+ React/Redux/React-Native snippets
  6. Prettier – Code formatter
  7. Auto Rename Tag
  8. Live Share
  9. Vscode-Icons
  10. TODO Highlight
  11. Tabnine AI Autocomplete for Javascript, Python, Typescript, PHP, Go, Java, Ruby & more

1. Git Lens

  • Publishers: GitKraken
  • Installs: 12,650,938 installs
  • Version: 11.7.0, Last Updated 11/18/2021 Free

Overview

GitLens supercharges the Git capabilities. GitLens helps you to understand code better. This powerful and feature rich tool helps to quickly look into code changes such as who, why, and when a line or code block was changed. You are able to find code history to gain further insights as to how and why the code evolved. With this tools, you can effortlessly explore the history and evolution of a codebase.

Here are just some of the unique features GitLens provides,

image visualstudio marketplace
  • Authorship code lens showing the most recent commit and number of authors at the top of files and/or on code blocks
  • status bar blame annotation showing the commit and author who last modified the current line
  • Code changes — highlights any local (unpublished) changes or lines changed by the most recent commit
  • Heatmap — shows how recent and often lines were changed, relative to all the other changes in the file and to now (hot vs. cold)

2. Peacock

  • Publishers: Johnpapa
  • Installs: 1,449,402 installs
  • Version: 4.0.0, Last Updated 11/17/2021 Free

Overview

Developers love to open multiple windows of VS Code as they work on more than one projects at the same time. For example, both backend and front end project could be opened in two separate VS Code instances and developers might want move from one project to another. Using this extension developers able to change the color of each project windows, so that it can be quickly identify which project or repo they are working.

image marketplace.visualstudio

Installation and Configuration

  1. Create/Open a VSCode Workspace (Peacock only works in a Workspace)
  2. Press F1 to open the command palette
  3. Type Peacock
  4. Choose Peacock: Change to a favorite color
  5. Choose one of the pre-defined colors and see how it changes your editor

3. Tailwind CSS IntelliSense

  • Publishers: Tailwind Labs
  • Installs: 871,182 installs
  • Version: 0.7.6, Last Updated 01/17/2022 Free

Overview

TailwindCSS is a utility-first CSS framework that has been gaining huge attention among the web developers. If you love Tailwind CSS then this is a must have extension to have. It is a free extension, published by Tailwind Labs (bradlc). This extension provides autocomplete, syntax highlighting, and linting for Tailwind classes. With this extension, developers don’t need to memorize the exact spelling of all the utility classes or to spend the time typing them out.

Linting

Linting highlights errors and potential bugs in both your CSS and your markup. It is the process of checking the source code for Programmatic as well as Stylistic errors.

Autocomplete

Intelligent suggestions for class names, as well as CSS functions and directives.

Installation and Configuration

In order for the extension to activate you must have tailwindcss installed and a Tailwind config file named tailwind.config.js or tailwind.config.cjs in your workspace.


4. Bracket Pair Colorizer

  • Publishers: CoenraadS
  • Installs: 7,279,363 installs
  • Version: 1.0.62, Last Updated 12/13/2021 Free

Overview

As our functions get more complex, it becomes more challenging to keep track of opening and closing brackets such as parentheses and curly braces.

We can use a VS Code extension called Bracket Pair Colorizer to add color to each set of opening and closing brackets, making it easier to identify each set of brackets.

image dev.to

Installation and Configuration

Install Bracket Pair Colorizer latest version from VS code package. After installation if you want customization:

  • Open up Settings by clicking Code > Preferences > Settings.
  • Search colorizer
  • Click Edit in settings.json beneath the bracket-pair-colorizer: Colors.

5. ES7+ React/Redux/React-Native snippets

  • Publishers: dsznajder
  • Installs: 4,344,921 installs
  • Version: 4.1.0, Last Updated 1/20/2022 Free

Overview

If you are a true React JS developer then this is a must have snippet for you, because it simply does just right for you. This plugin provides you JavaScript and React/Redux snippets in ES7 with Babel plugin features for VS Code.

image geeksforgeeks

Here you can see couple of popular PrefixMethod example for React developers, and the full list can be seen from official Github page.

To make a new class component, simply run:

rcc→

rce→

rfce

To make a functional component, simply run:

import React from 'react';

function $1() {
  return <div>$0</div>;
}

export default $1;

Installation and Configuration

Launch Quick Open:

Paste the following command and press Enter:

ext install dsznajder.es7-react-js-snippets

6. Prettier – Code formatter

  • Publishers: Prettier
  • Installs: 18,020,985 installs
  • Version: 9.1.0, Last Updated 1/3/2022 Free

Overview

Developers have different opinions on how to format the code structure so it would be readable. Prettier was created as a means of alleviating this challenge and ensures one unified code format within the development team.

Prettier reformats your JavaScript code consistently so that it make easy to read and understand the code. This plugin helps to format spacing, variable declarations, semi-colons, trailing commas and much more.

You can configure Prettier to format your files when saving them or committing them to a version control system (e.g. Git, SVN). This way, you do not have to worry about your source code formatting and Prettier takes care about it.

image honeypot

Installation and Configuration

Install through VS Code extensions. Search for Prettier - Code formatter

Visual Studio Code Market Place: Prettier – Code formatter

You can also installed in VS Code: Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.

ext install esbenp.prettier-vscode

7. Auto Rename Tag

  • Publishers: Jun Han
  • Installs: 7,766,922 installs
  • Version: 0.1.9, Last Updated 10/12/2021 Free

Overview

Most of the tags in HTML/XML need a corresponding closing tag. When writing large applications which consists of thousands and sometime millions of lines of code, the corresponding closing tags might located at very bottom of the editor, where developers has to scroll hundreds and thousand of lines below. It is tedious if you want to rename the tags.

Auto Rename Tag provides us with a feature that when we change the starting tag it will automatically rename paired HTML/XML tag, same as Visual Studio IDE does, making the renaming of tags easier.

Installation and Configuration

You can simply install the plugin using VS code Extensions. After installation, Add entry into auto-rename-tag.activationOnLanguage to set the languages that the extension will be activated. By default, it is [“*”] and will be activated for all languages.

{
  "auto-rename-tag.activationOnLanguage": ["html", "xml", "php", "javascript"]
}

8. Live Share

  • Publishers: Microsoft
  • Installs: 7,397,050 installs
  • Version: 1.0.5273, Last Updated 1/20/2022 Free

Another great contribution by Microsoft. Live Share enables you to collaboratively edit and debug code with other developers in real time. Using this tools, pair programming has become more convenient, where developers can instantly and securely share the project with other developers.

Common features it includes, debugging sessionsterminal instanceslocalhost web appsvoice calls, and more!

It shares all of their editor context meaning, other developers do not worry about cloning any repos or SDKs installation for code review and debugging process.

Installation and Configuration

  1. If needed, install Visual Studio Code for Windows (7+), macOS (Sierra+), or Linux (details).
  2. Download and install the Visual Studio Live Share extension for Visual Studio Code.
    If you want to integrated voice calling, then install the VS Live Share Extension Pack, which includes both the Live Share and Live Share Audio extensions.
  3. Let Visual Studio Live Share to finish installing dependencies.
  4. Once complete, you’ll see Live Share appear in your status bar. You can now begin collaborating with others immediately!

Quickstart (Joining)

  1. Click the session URL the “host” sent you, which will open it up in a browser. When prompted, allow your browser to launch VS Code
  2. You’ll be asked to sign in the first time you share (using a GitHub or Microsoft account), which allows others to identity you when collaborating.
  3. That’s it! After you join, you’ll be immediately presented with the file that the “host” has open, and can see their cursor and any edits they make. Additionally, you start out “following” the host, so as they scroll or navigate between files, you’ll follow along with them. This makes it easy to orient yourself with the issue/question/task you’re about to start collaborating on.

9. Vscode-Icons

  • Publishers: VSCode Icons Team
  • Installs: 9,823,196 installs
  • Version: 11.8.0, Last Updated 12/4/2021 Free

Overview

Having descriptive icons help you differentiate between files and folders in the project. Having icons in your project make more interesting and attractive. Below diagram depict different between two VS Code tabs with One having icons, the other does not.

image logrocket

Installation and Configuration

To install the extension just execute the following command in the Command Palette of Visual Studio Code:

ext install vscode-icons

Once installed and after reloading vscode, you will be presented with a message to Activate the icons.

In case this doesn’t happen, navigate to:

  • Linux & Windows => File > Preferences > File Icon Theme > VSCode Icons.
  • MacOS => Code > Preferences > File Icon Theme > VSCode Icons.

10. TODO Highlight

  • Publishers: Wayou Liu
  • Installs: 2,270,992 installs
  • Version: 11.8.0, Last Updated 12/4/2021 Free

This plugin lets you to highlight TODO, FIXME and other annotations within your code. This is really a useful plugin for highlighting comments such as NOTE: , TODO: , DEBUG:. The customization settings are also quite extensive making it perfect for the developer, thus leading level up your comments on any project.

image visualstudio marketplace

Installation and Configuration

  • TODO:,FIXME: are built-in keywords.
  • You can override the look by customizing the setting.
  • To customize the keywords and other stuff,
  • command + ,
  • (Windows / Linux: File -> Preferences -> User Settings)
  • open the vscode file settings.json.

11. Tabnine AI Autocomplete for Javascript, Python, Typescript, PHP, Go, Java, Ruby & more

  • Publishers: TabNine
  • Installs: 3,112,708 installs
  • Version: 3.5.16, Last Updated 1/12/2022 Free

Overview

Tabnine is the AI code completion assistant already trusted by millions of developers to amplify coding accuracy and boost productivity. Whether you are a new dev or a seasoned pro, working solo or part of a team, Tabnine AI assistant will suggest team-tailored code completions in most popular coding languages and all your favorite IDEs.

Tabnine is powered by sophisticated machine learning models. It is trained on more than a billion lines of open-source code from GitHub.

Tabnine suggests and predicts code as you write. This powerful extension speed up your development, save you tons of time and cutting your coding time in half. Currently it support almost all the popular programming languages including Python, Javascript, Java and React.

Tabnine’s Team Learning Algorithm studies your team’s code, preferences, and patterns, continuously learning and adapting. Every interaction with a team member amplifies code completion accuracy.

Installation and Configuration

  • Press Cmd+P (mac) or Ctrl+P (Windows) in your Visual Studio Code, type ext install Tabnine.tabnine-vscode and press Enter
  • Click the Reload button in the extensions tab
  • The default behavior of Tabnine uses the Enter key to accept completions. If you would rather use the Enter key to start a new line, go to Settings → Editor: Accept Suggestion On Enter and turn it off.

Conclusion

In this article, we reviewed 11 VS Code extensions that can help to make you a better programmer and boost your productivity. There are many more other cool extensions that we need to explore in future, so If we have time then will definitely look into those extensions in the coming articles.