vscode - Let Me Fail

Technology, tools, VS Code

Top VS Code Extensions You Need for Your Next Project

Posted on December 10, 2022December 10, 2022 by Febronei

10
Dec

Visual studio code extensions for faster and efficient coding

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 plugins and extensions 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

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,

Effortless revision navigation (backwards and forwards) through the history of a file
Authorship code lens showing the most recent commit and number of authors at the top of files and/or on code blocks
A 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. Github Copilot

GitHub Copilot uses OpenAI Codex to suggest code and entire functions in real-time right from your editor. Trained on billions of lines of public code, GitHub Copilot turns natural language prompts including comments and method names into coding suggestions across dozens of languages.

The primary goal of GitHub copilot is to make it easier for software engineers to collaborate more efficiently on projects by conducting real-time reviews of each other’s codes with the added benefit of being able to provide feedback at any time during the development cycle.

3. Peacock

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.

4. Tailwind CSS IntelliSense

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.

5. Bracket Pair Colorizer

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. Many people found it useful however from the beginning, however the development and maintain of the plugin will no longer be continue.

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

If you are a true ReactJS 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.

7. Prettier – Code formatter

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.

8. Auto Rename Tag

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.

9. Live Share

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 sessions, terminal instances, localhost web apps, voice 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.

10. Vscode-Icons

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.

11. TODO Highlight

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.

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

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.

13. Remote – SSH

Remote – SSH extension is a product from Microsoft, which lets you use any remote machine with a SSH server as your development environment. It helps to simplify development and troubleshooting in a wide variety of situations. You can:

Develop on the same operating system you deploy to or use larger, faster, or more specialized hardware than your local machine.
Quickly swap between different, remote development environments and safely make updates without worrying about impacting your local machine.
Access an existing development environment from multiple machines or locations.
Debug an application running somewhere else such as a customer site or in the cloud.

No source code needs to be on your local machine to gain these benefits since the extension runs commands and other extensions directly on the remote machine. You can open any folder on the remote machine and work with it just as you would if the folder were on your own machine.

14. JavaScript Code Snippets

This extension contains code snippets for JavaScript in ES6 syntax for Vs Code editor (supports both JavaScript and TypeScript). The extension supports JS, TypeScript, JS React, TS React, HTML, and Vue.

15. SQL Server (mssql)

An extension for developing Microsoft SQL Server, Azure SQL Database and SQL Data Warehouse everywhere with a rich set of functionalities, including:

Connect to Microsoft SQL Server, Azure SQL Database and SQL Data Warehouses.
Create and manage connection profiles and most recently used connections.
Write T-SQL script with IntelliSense, Go to Definition, T-SQL snippets, syntax colorizations, T-SQL error validations and GO batch separator.
Execute your scripts and view results in a simple to use grid.
Save the result to json or csv file format and view in the editor.
Customizable extension options including command shortcuts and more.

16. Run

Run code snippet or code file for multiple languages: C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, Scheme, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D, Lisp, Kit, V, SCSS, Sass, CUDA, Less, Fortran, Ring, Standard ML, and custom command.

17. ESLint

ESLint is an open source project that helps you find and fix problems with your JavaScript code. It doesn’t matter if you’re writing JavaScript in the browser or on the server, with or without a framework, ESLint can help your code live its best life.

18. Visual Studio Intellicode

The Visual Studio IntelliCode extension provides AI-assisted development features for Python, TypeScript/JavaScript and Java developers in Visual Studio Code, with insights based on understanding your code context combined with machine learning.

Wrap up

In this article, we have reviewed top VS Code extensions that can help to make you a better programmer and boost your productivity. There are many more other plugins and extensions that do the same or better, so If you have any such tools then feel free to share us.

VS Code, Technology, Web Programming

Best Free VS Code Themes 2022🤩

Posted on June 25, 2022June 25, 2022 by Febronei

25
Jun

It is already halfway through 2022 and if you are still looking for any VSCode themes, then here is the list of some of the most popular VS Code themes for 2022 so far.

List of the top 5 VSCode themes – My choice:

Atom One Dark Theme
GitHub Theme
Night Owl Theme
JellyFish Theme
Sublime Material Theme

Atom One Dark Theme

One of the best dark theme port in the marketplace. Atom’s iconic One Dark theme for Visual Studio Code is so popular among developers who loves dark mode.

It has visually pleasing styles and well-blended color schemes, therefore it is considered as one of the most used themes, nearly 3.3 million download in the market place as of today.

Here are some of the stats:

No. of Installs: 3,279,542 installs
Rating: 4.81/5 (102)
Current version: v2.2.3 | 1/4/2021| Free

GitHub Theme

It is popular theme for developers who prefer GitHub’s classic themes. It comes with various new styles, simply you need to select any available theme during installation process. You can choose one of these themes.

GitHub Light Default
GitHub Light High Contrast ✨ new ✨
GitHub Light Colorblind ✨ new ✨
GitHub Dark Default
GitHub Dark High Contrast
GitHub Dark Colorblind ✨ new ✨
GitHub Dark Dimmed

There are also two older themes. Note: They might not get updated frequently and are kept for legacy reasons:

GitHub Light (legacy)
GitHub Dark (legacy)

Here are some of the stats:

No. of Installs: 4,349,035 installs
Rating: – (120)
Current version: v6.0.0 | 2/11/2022 | Free

Night Owl Theme

This theme is fine-tuned for those of us who really like to code late at night. It comes with both dark (Night Owl) and light theme (Light Owl). The color choices, background, and styling are perfectly suitable for developers who are having difficulties in low-light circumstances. ✨

Night Owl

Light Owl

Here are some of the stats:

No. of Installs: 1,463,301 installs
Rating: – (119)
Current version: v2.0.1 | 7/4/2021 | Free

JellyFish Theme

It is also a beautiful theme. The font (Hermit) and colors used by the theme is easy on the eyes. The colors used by this theme for highlighting code are Aqua Blue, Purple, Dark Yellow, and Pinkish-Red.

Here are some of the stats:

No. of Installs: 75,788 installs
Rating: – (5)
Current version: v0.0.4 | 2/8/2022 | Free

Sublime Material Theme

This is simply a port to align the style of the theme with the default VSCode chrome that cannot be changed atm. It has both dark and light theme options, however it was last update long time ago, in 2016.

Dark Theme

Light Theme

Here are some of the stats:

No. of Installs: 568,813 installs
Rating: – (25)
Current version: v1.0.1 | 11/27/2016 | Free

There are lots of amazing themes in the marketplace and these are just few. Must have themes at least in my opinion. Maybe you have a better choice and if you have any let us know your favorite theme that make you more productive.

If you want to know about best VSCode extensions for 2022 then please read this article.

Top 11 Best VS Code Extensions you Need in 2022!

Flutter, Technology, UI, VS Code

How To Add Your Own Color to a Flutter App

Posted on April 17, 2022May 21, 2022 by Febronei

17
Apr

Introduction

Learning Flutter is a great idea. Flutter is great if you want to build a career in mobile app development. I’ve planned to write short series based articles on the things I learned about flutter.

In this article, you will explore how to change the overall look across your apps with Flutter themes.

Step 1 — Setting Up the Project

To create a new flutter application simply run the following command. Oh do not forget to complete the installation process of flutter SDK, its prerequisites and the environment setup.

flutter create flutter_custom_theme_example

Flutter create command will give us a demo application that will display a simple clickable button which increment the numbers as we click the button. Now navigate to the new project directory that we just have created.

cd flutter_custom_theme_example

We need to see how our code looks like on the simulators. For that simply run the following code below. We want to enable hot reloading so it reflects the changes as we make to our code.

open -a simulator

Now that you have a working boilerplate Flutter application. It is the time to add customization to the app.

Step 2 — Customize Global Themes

Create a new folder named utils inside lib folder. Create a new file colors.dart inside utils.

import 'package:flutter/material.dart';

const mobileBackgroundColor = Color.fromRGBO(0, 0, 0, 1);
const mobileSearchColor = Color.fromRGBO(38, 38, 38, 1);
const blueColor = Color.fromRGBO(0, 149, 246, 1);
const primaryColor = Colors.white;
const secondaryColor = Colors.grey;

Now we have created a color style globally for our application which can be used anywhere in our app. Open main.dart file and remove all the code given by flutter by default.

We want add dark theme to our app, therefore add dark theme using themeData given by flutter. Next add Scaffold widget to the main.dart file. Now we can see it has changed to default dark color provided by flutter team.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Custom Color Example',
      theme: ThemeData.dark(),
      home: Scaffold(body: Text('Flutter custom color example')),
    );
  }
}

We want a different colors, so this is the point we want to use colors.dart file created earlier so that we can use our own dark theme colors. Import colors.dart file inside our main.dart file. Then add our custom color to themeData shown below code.

import 'package:flutter/material.dart';
import 'package:flutter_custom_theme_example/colors.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Custom Color Example',
      theme: ThemeData.dark().copyWith(
          scaffoldBackgroundColor: mobileBackgroundColor,
          primaryColor: secondaryColor),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter custom color example'),
        ),
        body: Center(
            child: Text(
          'Flutter custom color example',
        )),
      ),
    );
  }
}

Thats it! Now we have added our own custom colors to the flutter app. Yes this is very basic styling however in future tutorial we can add more styles and colors to flutter apps. You can find full code in this Github repo.

VS Code, Nextjs, React, React Native, TailwindCSS, Technology

Top 11 Best VS Code Extensions you Need in 2022!

Posted on January 22, 2022May 21, 2022 by Febronei

22
Jan

Top Must Have Extensions For Your Next Project

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

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

Overview

Here are just some of the unique features GitLens provides,

Effortless revision navigation (backwards and forwards) through the history of a file

Authorship code lens showing the most recent commit and number of authors at the top of files and/or on code blocks

A 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

Installation and Configuration

Create/Open a VSCode Workspace (Peacock only works in a Workspace)
Press F1 to open the command palette
Type Peacock
Choose Peacock: Change to a favorite color
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

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.

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.

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:

Linux: Ctrl+P
macOS: ⌘P
Windows: Ctrl+P

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

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

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

Common features it includes, debugging sessions, terminal instances, localhost web apps, voice 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

If needed, install Visual Studio Code for Windows (7+), macOS (Sierra+), or Linux (details).
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.
Let Visual Studio Live Share to finish installing dependencies.
Once complete, you’ll see Live Share appear in your status bar. You can now begin collaborating with others immediately!

Quickstart (Joining)

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
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.
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

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

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 powered by sophisticated machine learning models. It is trained on more than a billion lines of open-source code from GitHub.

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.