Visual Studio Code has many great features out-of-the-box, and supports a large community of extensions to add enhanced functionality.

Stack Overflow survey image showing VSCode's popularity (73.71% of respondents use it)

Using extensions can expand VSCode's available features and tools. With a majority of tools in one place, it allows for less context switching which has been shown to kill productivity.

I have tested out over 40 different extensions in the last year and refined a curated list of my favorites. These extensions boosted my productivity as a software engineer. I want to share this list with you to boost your productivity, too.

This list is designed to be language-agnostic with an emphasis on productivity. If you're interested in exploring my recommended extensions to customize the style of your editor, you can find more details in this article.

VSCode Extensions We'll Cover:

• Better Comments

• Bookmarks

• Code Spell Checker

• CodeSnap

• CodiumAI

• Error Lens

• Git History

• GitLens

• GitHub Copilot

• Icons Themes

• Indent Rainbow

• Live Share

• Multiple Cursor Case Preserve

• Path Intellisense

• Peacock

• Prettier

• Project Manager

• Tabnine

• TODO Highlight

• Todo Tree

In this article, I will cover all of these extensions in greater detail and advise on how they can elevate your levels of efficiency as a developer.

Better Comments

Better Comments helps you strengthen the comments in code. Code comments are beneficial for readability, and providing explanations or context for future reference. Leaving good code comments can save others and yourself time in the future.

Supported features include the ability to categorize the annotations from alerts, writing queries, making a TODO list, and showing highlights. There is an extensive list of supported languages.

Lines of code that are commented out are styled to be dark gray with a text strikethrough, emphasizing their exclusion and signaling that they should be removed.

Styled code comments with Better Comments.

Bookmarks

Bookmarks allows you to bookmark positions in your code. These lines are noted with a blue bookmark icon. Bookmarks can be organized and named to allow for quick reference.

All of the bookmarks can be found in a dedicated sidebar section. This is a great tool to improve navigation, and to help you spend lest time searching for references.

Bookmarks displayed in blue with a bookmark icon next to the line number.

Code Spell Checker

Code Spell Checker lives up to its name. It provides a basic spell checker to find and fix spelling errors throughout your codebase. Misspelled words are indicated with a squiggly underline. It is available in many languages.

This is one of my personal favorite extensions. I have caught and fixed so many typos thanks to this one.

This image displays how Spell Checker detects and corrects spelling errors.

CodeSnap

CodeSnap is used to snap a screenshots of code. It can come in handy for sharing code snippets with ease.

To snap a shot of your code, use (Ctrl+Shift+P on Windows and Linux, Cmd+Shift+P on OS X) and search for CodeSnap. Then select the area of your code to screenshot, adjust the width, and click the shutter button. You can also take a snapshot by selecting code, right clicking, and selecting CodeSnap.

There are websites that can do this, however, having these tools right in your editor allows for less context switching to boost productivity.

Sample React code snippet created with CodeSnap.

CodiumAI

CodiumAI is a free AI-powered code toolkit. It supports features like code autocompletion, chat, enhanced search, and suggestions.

AI has become a major player in improved developer productivity. Imagine spending half the time writing tests, allowing you to spend more time on other crucial, creative tasks.

When it comes to testing, CodiumAI excels. It can analyze code and generate meaningful tests and comprehensive test suites.

CodiumAI generating a test suite based on a section of Python code.

This is a relatively new extension and that has been rapidly gaining popularity. Languages supported are Python, JavaScript, TypeScript, Java, Go, and others.

CodiumAI's autocomplete functionality used to create functions based on natural language prompts.

Error Lens

Error Lens improves highlighting of errors, warnings, and other language diagnostics. This is a great debugging and error-prevention tool to have.

Errors will not go unnoticed with this extension. Error and warnings are made prominent by highlighting the entire line, along with the related message printed inline.

Error Lens identifying an error, notifying that there is a missing semicolon and a syntax error.

Spend less time sourcing errors, as clicking on an an annotation routes you directly to the corresponding line of code.

There is support for multiple languages which makes it a valuable for developers working in projects in different languages. You can also configure the appearance and behavior of errors and warnings.

Git History

Git History is an extremely useful extension for version control with Git (the extension has 10 million installs, so it's clear that it's popular). This extension allows you to explore the detailed history of your Git repository directly from the VSCode interface. You can view file history, git log, and perform comparisons.

It provides an interactive and visual representation of commit logs, branches, and file changes over time. This extension provides a more accessible and uncomplicated experience working on version-controlled projects.

Git History is being used here to create a tag on a specific commit.

GitLens

GitLens is the most robust Git tool, with so many features bundled into one extension. It has a strong open-source community, and it continues to have active support with frequent updates.

With GitLens, you can gain powerful insights into your repositories directly in VSCode. Annotations are integrated throughout the editor, displaying tons of Git information.

One of the most useful features of GitLens is the blame annotation. This allows you to see who wrote the code, and how long ago.

GitLens traces the line of code to a commit created 4 years ago from the user (You).

Another feature that I have found to be handy is the interactive rebase editor. This provides a nice user experience when performing rebases.

GitLens' example of an interactive rebase. Commits can be picked, edited, dropped, squashed, and more.

GitHub Copilot

GitHub Copilot has gained a ton of traction over the last two years. This product has revolutionized the coding experience by leveraging advanced AI capabilities. It not only assists with completing code snippets but also acts as an AI pair programming copilot, offering intelligent suggestions for entire lines or blocks of code.

The strength of GitHub Copilot lies in its integration with OpenAI, tapping into a vast repository of open-source code to provide contextually relevant and practical suggestions. This not only accelerates coding speed but also serves as a valuable learning tool, exposing you to diverse coding patterns and best practices.

This is not a free tool. A subscription can run you $10 per month as an individual, or it can be purchased for teams at a discounted rate. If you'd like to try out GitHub Copilot, there is currently a 30-day trail offer.

GitHub Copilot using intelligent autocomplete on a function.

There are also some free alternatives which you can read more about here (and I talk about Tabnine below as well).

Icon Themes

While VSCode includes default icons, incorporating icon packs provides an excellent means to boost productivity and infuse a visually appealing aesthetic into the editor.

Icon packs provide a more extensive and visually recognizable set of icons compared to the defaults. This can make it easier for visual distinction between file types and folders. It can build intuitive recognition and reduce the cognitive load when navigating through files.

There are plenty of options when it comes to choosing an icon pack. Three popular choices are the Material Theme Icons, vscode-icons, and file-icons.

I find that a good set of icons improves the overall readability of the file explorer. I enjoy the added benefits of the upgraded visual experience.

Side-by-side comparison of my editor with the vscode-icons (left) and Material Icon Theme (right) enabled. There are icons for file types and folders that indicate what they contain.

Indent Rainbow

Indent Rainbow is a colorful extension that you can use to make indentation comprehensible, aiding in maintaining well-organized and properly indented code.

Each indent is marked with a different color, alternating between 4 different colors. The colorful representation of the structure is not only useful but also visually appealing. This extension is particularly useful for languages that rely heavily on indentation such as YAML or Python.

If you aren't fond of the default set of colors, you can configure your own!

A side-by-side comparison of two styles from Indent Rainbow. The one on the left shows the lines of the indent in vibrant color and the other shows the entire indention in a muted tone.

Live Share

Live Share is a collaborative development extension, enabling real-time sharing.

The Live Share header in the extension marketplace. There are 15 million installs.

This extension helps you facilitate productive teamwork. Unlike traditional pair programming sessions, Live Share lets you work together while retaining your own editor preferences. Each person has their own cursor, and you can follow each others' cursors around the codebase.

With Live Share, there is no need to clone repositories or encounter conflicts when working off of a shared branch. Context is immediately gained from the environment when entering a session.

Multiple Cursor Case Preserve

The Multiple Cursor Case Preserve extension is a productivity-boosting tool that aids in rapid code editing.

I have personally experienced the frustration when targeting multiple variable names throughout a file for renaming, and inadvertently overriding casing when making a change.

Targeting multiple variables with the same word but different casing, and updating them all from 'element' to 'node' with the casing remaining in tact.

Tip: Multi-Line Editing in VSCode

Take advantage of these Mac keyboard shortcuts for multi-line editing:

• Cmd + D: Quickly select a word and press it again to extend the selection to sequential occurrences.

• Alt + Shift + Up/Down: Create multiple cursors above or below your cursor. Use Cmd + Right/Left to navigate each cursor to the line end or start, and Cmd + Left/Right to reach the start or end of a word.

• Alt + Up/Down: Move the current line up or down. Combine with Shift + Up/Down to select and move multiple lines simultaneously, streamlining your code editing process.

By preserving the case, it streamlines the editing process by reducing the manual effort required to fix casing.

Path Intellisense

Path Intellisense is a file path productivity tool. It has intelligent auto-completion that dynamically suggests file paths and directory names as you type. It can minimize errors due to incomplete or wrong file paths.

Path Intellisense used to auto-complete a link element's 'href' attribute with a style.css file.

It is compatible with a variety of programming languages. But if you are using npm, the npm Intellisense plugin is recommended specifically.

Peacock

Peacock is a personal favorite of mine, as I love to add more color to my editor. Not only does it outline your editor in color, but it also allows you to configure specific colors for each workspace which is very beneficial when context switching.

Peacock comes with a range of preselected colors, while also allowing for user-defined custom colors.

A stack of editors from Peacock showing the various default color options. The color is applied to the sidebar and bottom section in the editor window.

Prettier

Prettier is a widely embraced code formatting tool with over 40 million installations. It provides you with a shared solution to improve code readability.

This opinionated code formatter enforces consistent style throughout a codebase. With support for various programming languages, Prettier automatically analyzes and formats code according to a set of standardized rules, this eliminates debates over coding style and enhancing collaboration.

Prettier's integration with "format on save" in VSCode vastly increases productivity by automatically applying formatting, preventing any time spent on manual formatting concerns.

You've probably already heard about Prettier, nonetheless it's important to mention as one of the top extensions to have.

Project Manager

Project Manager is a simple tool to set projects (aka Favorites) and access them. It includes a dedicated side bar section to manage all of your projects in one place.

This is great tool when you have a lot of projects to manage and need to frequently switch between them. It comes with a set of handy features like the ability to further organize projects by tags.

Project Manager's example of how to create a tag by selecting 'Edit Tags', choosing from the previously created tags, and where to view them under Favorites.

Tabnine

Tabnine is an free AI coding assistant. It can help to increase your productivity by providing real-time code completions.

Beyond basic code completion, it takes in the context and offers further relevant suggestions. This can be particularly useful when working in intricate codebases demanding extensive code exploration.

Tabnine's example of autocompletion. The autocomplete is used to quickly create Python and TypeScript code.

Tabnine supports many programming languages. Adaptive learning is used to adjust to the developer's coding style over time. There is an added focus on privacy, as code is never stored or shared.

As I mentioned above, Tabnine is often compared to as a GitHub Copilot alternative, and worth trying out at no cost. Keep an eye out on this one as they add new competitive features.

Support for this extension is strong with continual updates. Chat functionality is soon to come, allowing you to ask questions and generate anything from code to documentation.

Example from Tabnine of how the new AI chat functionality will look. The user asks for a weather API and Tabnine responds with several examples.

TODO Highlight

Never forget another to-do with TODO Highlight. It emphasizes TODOs and other annotations with a colorful highlight.

It is common to encounter a TODO or FIXME relic of the past in a codebase that has been around for awhile. These can be hard to remember to remove. TODO Highlight is here to help remind you to not leave a trail.

Wether your theme is light or dark, TODO Highlight will put a spotlight on annotations.

Some JavaScript code with a TODO highlighted in yellow along with a FIXME highlighted in pink.

Todo Tree

Todo Tree offers a quick and organized solution to uncover annotations. It searches your workspace for TODO and other annotations and organizes them in a file tree.

It occupies a specific section in the side activity bar. Clicking on each TODO opens the related file, where the TODO is highlighted for immediate attention.

The TODO Tree sidebar section with a selected to-do of 'TODO Fix this!'. In the code to the right, the 'TODO' is highlighted with a bright purple color.

Summary

VSCode stands out for its expansive extension ecosystem, making it a go-to choice for developers. Having thoroughly tested an array of popular extensions, I've carefully curated this list of my top recommendations.

This list is a great place to start from and build on. I highly encourage you to implement routine trial periods with new extensions. Delve into other extensions through the Visual Studio Code extension search.

Recognizing the importance of minimizing cognitive load for sustained focus, each extension on this list is chosen with the goal of reducing unnecessary mental burdens like context switching. Make VSCode become your main hub of development needs, and you an improved focus mode along with other benefits.

I hope these recommendations allow you to optimize your workflow, minimize distractions, and ultimately boost your productivity!

In 2023, ChatGPT and other Large Language Models found their way into many of our toolkits. And we can use them to be more productive and save time on repetitive tasks.

In this article, you'll discover other helpful tools besides GitHub Copilot.

Before we discuss alternatives, let's go over what GitHub Copilot is and what it does.

What is GitHub Copilot?

GitHub Copilot helps developers write code more quickly and efficiently. It's a tool developed by GitHub and OpenAI that employs a strong AI and Codex.

GitHub Copilot works with a variety of code editors, including Visual Studio Code, NeoVim, and JetBrains.

GitHub Copilot uses machine learning. It doesn't autocomplete – it suggests entire code snippets as you work in your text editor. It can also help you debug and refactor old code. The goal is to improve coding efficiency, decrease time spent on repetitive tasks, and increase productivity.

But GitHub Copilot has a downside: after the trial period, it costs $10 per month, which some users may consider too high.

So now let's look at some alternatives which are free to use.

Synk (DeepCode)

Synk, formerly known as DeepCode, is a tool that helps you keep your code safe. It works directly with your project file or repository, making it simple for teams to find and fix any security issues in their code, dependencies, containers, and infrastructure.

Synk(DeepCode) Homepage

Use Cases

• Ideal for early-stage security reviews.
• Effective bug detection and resolution.

Features of Synk

• Scans your code early in development to help it pass security reviews. This helps avoid costly fixes later in the development cycle.
• Scans for vulnerabilities and presents results with security issues.
• Finds possible bugs in your code, helping you catch and fix issues early.
• Suggests how to make your code run better.
• Gets smarter by learning from different code examples. It gives better suggestions over time using algorithms.

Limitations of Synk

While Snyk is a powerful too, it has a couple limitations as well. First, it examines whole codebases, which could demand significant computing power, affecting the performance.

To help mitigate this issue, you can break down large codebases into smaller, manageable modules.

Also, there might be a bit of a learning curve for developers to understand how to get the most out of the tool.

But your team can offer training sessions or documentation to help you and other developers better understand how to use Synk effectively. Also, encourage your team to provide support resources, such as forums or documentation, to address common issues and questions.

Price

Using Synk in Visual Studio Code for individual code security testing is entirely free. This allows for checking your code's security before deploying it to production.

To collaborate within a team or for business purposes, upgrading the plan is necessary. You can find more information about the pricing plan here.

How to set up Synk in Visual Studio Code

To set up Snyk, select the "View" option in your text to reveal a dropdown menu.

Select the "view" option in the editor

Then click on the "Extensions" option in that dropdown, and it will take you to the Visual Studio Code Marketplace.

In the marketplace, type "Synk Security" and hit enter, then go ahead and install it.

Marketplace

How to authenticate in Snyk

After you've installed Snyk, you'll need to authenticate.

Click on the Synk icon in your editor. This will take you to the authentication page.

Click on the button to authenticate and connect. Once you're authenticated, go back to your editor. That's it!

Authenticate and connect to so it works with your visual studio code

After completing this step, you can now use Snyk to examine, understand, and analyze your code before sending it in for production.

Example use case

To scan for possible vulnerabilities in the project file, just click on the sync icon on the left panel. This will analyze the code and highlight any potential issues that need attention.

Example Synk in action

If you take a closer look, you'll see some letters indicating how vulnerable codes written is.

• "H" means it's really high and needs fixing ASAP.
• "M" means it's at the maximum vulnerability level.
• "L" means it's at a low vulnerability level.

If you click on a vulnerability, you'll get suggestions on how to fix it, which are displayed on the right side of the editor.

Swimm AI

Swimm is a coding assistance tool that helps you understand complex and large code bases.

Swimm, acting as an intelligent guide for developers, simplifies the process of understanding complex code by delivering quick insights. It also excels at automatically correcting and augmenting any documentation gaps that may emerge, resulting in a complete and well-documented development environment.

Homepage of Swimm AI

Use Cases

• Document Creation.
• Workflow Organization.
• Automatic Generation of Code Snippet Explanations.

Features of Swimm AI

• Simplifies document creation.
• Transforms pull requests into user-friendly documents for easy knowledge sharing.
• Enhances workflow organization with rules for document visibility.
• Improves communication clarity through guided documentation enhancement, making information more understandable and accessible.
• Analyzes your code from multiple perspectives, creating easy-to-understand documents for complex code flows.
• Continuously updated knowledge base, that is it auto-syncs automatically to align your documentation and latest code changes.

Limitations of Swimm AI

As always when using AI tools, you should always double-check before finalizing your decisions based off the AI's output.

Price

When Swimm is incorporated into your development environment, it is free to use. But larger businesses might consider upgrading because enhanced plans give unlimited user access.

How to set up Swimm AI in Visual Studio Code

Visit your Integrated Development Environment (IDE)'s marketplace, type "swimm," and hit Enter.

Then, proceed with the installation from the marketplace, or you can go to their website to integrate it into your IDE.

Click the VSCode icon to initiate it. Then you'll need to login or sign-up – click the button that appears.

Clicking of the icon

To sign up, simply follow the instructions provided by the website.

Since you are authenticated, you can now log in and use the application.

Login direction

When the external website opens, synchronize your Integrated Development Environment (IDE).

Authorizing with your IDE

Now let's go ahead and see how it works with a practical example.

Swimm AI example

Cody AI

Cody AI is a smart coding assistant that uses advanced AI to understand and analyze your code. It helps you code more quickly and also improves your understanding of the codebase. It goes beyond basic functions, identifying patterns and suggesting improvements, making your coding experience more efficient and insightful.

Cody Homepage

Use Cases for Cody AI

• Facilitating creativity in tasks and brainstorming.
• Resolving common issues with digital tools.
• Strengthening teamwork through quick information sharing.

Features of CodyAI

• Provides immediate responses to inquiries.
• Allows you to upload various data types to build a customized knowledge base.
• Cody's responses all have adequate source citations.
• Can help with email authoring, document translation, and marketing material generation.
• Assists teams in using digital technologies to diagnose and resolve problems.
• Based on previous encounters and contextual history, it makes suggestions and thoughts.

Limitations of Cody AI

As with any tool, there are limitations. First of all, the search capability of the AI isn't as powerful. It analyzes user queries using available information. As a result, the AI may give answers that lack your desired depth or specificity at times.

Also, Cody AI Bots can't do math or handle tables well. This means the AI might not give accurate answers when dealing with numbers or complex data.

Lastly, Cody AI Bots can't understand pictures, diagrams, or anything visual in documents. It only uses text to come up with responses, so it's not great at dealing with visual elements.

To help mitigate these issues, make sure you're as clear and specific as possible when formulating your queries to help Cody better understand your intentions.

You can also break down complex questions into simpler components to improve the chances of accurate responses.

Price

Installing Cody in your integrated development environment is free for personal use. However, for professionals or businesses looking to leverage Cody's capabilities, an upgrade is required.

How to set up Cody in Visual Studio Code

First, select the "View" option in your text editor to reveal a dropdown menu as shown above.

Click "Extensions", and it will take you to the Visual Studio Code Marketplace.

In the marketplace, type "Cody" and hit enter, then go ahead and install it.

Cody Plugin

Now that the installation is complete, you can begin utilizing Cody in your editor.

Cody provides different command prompts to assist you with your code:

• It can help you generate documentation for your code
• If you're contributing to an open-source project and find the codebase confusing, Cody AI can provide explanations.
• It can tell you which programming language a piece of code is written in.
• You can ask Cody questions without leaving your coding environment.
• Cody can make edits to your code based on given instructions.

Now, I'll illustrate how Cody can help explain parts of your code with an example:

One command prompt of Cody AI

Tabnine

Tabnine is a powerful AI assistant designed for developers, providing AI-driven code completions and suggestions to boost productivity.

It is compatible with a wide range of programming languages and major Integrated Development Environments (IDEs), enabling developers to leverage its smart code recommendations effectively.

Tabnine Homepage

Use cases

• Speeding up Software Development: Facilitates faster and more efficient code writing.
• Ensuring Code Consistency: Maintains a consistent coding style among different team members.

Features of Tabnine

• Learns from the code you type and adjusts its suggestions to match your coding style.
• Cares about your privacy. It only learns from open-source and permissive code, so you always own your code.
• Awesome for developers because it works with many programming languages. It's like a handy tool for different tech stuff!
• Makes coding easier by giving smart suggestions, helping developers save time.
• It works well with popular code editors like Visual Studio code. Developers can use it in their coding environments.

Limitations of Tabnine

Tabnine learns from how you code over time, so it might take a little time to match your coding style. It helps if you actively use the tool and provide consistent input to help it learn your coding style faster.

Tabnine also suggests code, but it doesn't create entire sections. While this may seem like a limitation, it's actually best for code quality.

Finally, it might suggest code that is not quite right. Developers should double-check the suggestions for accuracy. To help Tabnine suggest better code, you can regularly review and accept/reject suggestions to fine-tune its understanding of your preferences.

You should also always double-check the suggested code for correctness and adherence to coding standards before finalizing it.

Price

Installation comes at no monthly cost, making it free. However, for larger organizations, it's recommended to consider upgrading. Upgraded plans for larger organizations provide unlimited user access while prioritizing security and privacy.

How to set up Tabnine in Visual Studio Code

To begin, select the "View" option in your text editor to reveal a dropdown menu as shown above.

Click "Extensions" and it will take you to the Visual Studio Code Marketplace.

In the marketplace, type "Tabnine" and hit enter, then go ahead and install it.

Extension (marketplace in IDE)

Now that we've got it installed, you can start using Tabnine in your editor. Here's an example:

Example in the editor

And here's the code:

const add = (a, b) => {

 return a + b;

}

console.log(add(5,9))// output 14

Code Whisperer

CodeWhisperer is a smart helper for coding. It uses AI to suggest bits of code or whole functions as you work in your coding environment. Made by AWS, it makes coding easier with features like autocomplete and code restructuring.

Code Whisperer Homepage

Features of Code Whisperer

• Code Whisperer suggests code in real-time as you write.
• Integrates with your Integrated Development Environment (IDE).
• Helps enhance code readability and efficiency by assisting in improving and restructuring.
• Supports a diverse range of programming languages.
• Offers valuable help in generating and understanding code documentation.

Limitations of Code Whisperer

CodeWhisperer might find it hard to handle new coding tasks that need creativity.

Also, errors in its training data/models may lead to inaccurate code suggestions.

With these in mind, you should primarily use CodeWhisperer as a tool for generating routine or repetitive code, leaving more complex and creative tasks to human expertise.

Also make sure to review and verify any suggestions from CodeWhisperer often and don't just take the information at face value.

How to set up Code Whisperer in Visual Studio Code

First, select the "View" option in your text editor to reveal a dropdown.

Click on "Extensions" and it will take you to the Visual Studio Code Marketplace.

In the marketplace, type "AWS Toolkit" and hit enter, then go ahead and install it.

Extension(marketplace in IDE)

Now that the extension is installed, let's put it to use in our Integrated Development Environment (IDE).

Here's the code:

// create a greet function
function greet(name) {
    return "Hello " + name;
}
// export the greet function
module.exports = greet;

CodeGeex AI

CodeGeeX is a helpful tool for coding that creates comments, suggests code, and provides AI-powered chat help. It can also translate your code into different languages and works well with many programming languages and tools.

CodeGeex Homepage

Use Cases

• Make coding faster.
• Guides new developers through big code with auto comments and explanations.

Features of CodeGeex AI

• Great at finishing code. It helps by autocompleting and generating lines based on existing code or comments.
• Creates comments for both methods and lines in the code, saving time and making it easy to understand unfamiliar code.
• Helps change code from one programming language to another – like turning Python into Java.
• Developers can ask CodeGeeX coding questions and get quick answers without searching the web.
• CodeGeeX does more than suggesting code. It can interpret selected code, fix bugs, summarize code, and more.

Limitations of CodeGeeX AI

When you're using CodeGeeX, keep in mind that it's a research prototype, so it might not always create perfect code for every situation.

It also might misunderstand some language descriptions or code snippets, leading to possible mistakes.

As always, make sure you carefully verify the generated code for accuracy and adherence to coding standards.

Also, when providing language descriptions or code snippets, be as clear and detailed as possible.

Price

CodeGeex is free to install on Visual Studio Code, and for an upgrade, it starts at $9/month.

How to set up CodeGeeX AI in Visual Studio Code

Select the "View" option in your text editor to unveil a dropdown menu.

Click on "Extensions" in your text editor, and it will take you to the Visual Studio Code Marketplace.

In the marketplace, type "CodeGeex" and hit enter, then proceed to install it.

Install CodeGeex

After installation, click on the icon, and it will take you back to a page where you can log in or sign up.

Login page in CodeGeex

Once you've completed this step, you'll be able to interact with the AI in your IDE.

To trigger it, navigate to your IDE, highlight the desired code, and right-click. A dropdown menu will appear, allowing you to choose the specific command you want the AI to execute for you.

Here's an example:

Example of using CodeGeex

The GIF example showed one thing CodeGeex AI can do.

To learn more about its abilities, visit the docs: CodeGeeX: AI Code AutoComplete, Chat, Auto Comment.

Code:

const colors = ['pink', 'blue', 'purple', 'green'];

colors.forEach(color => {
    console.log(color);
});

Codeium

Codeium is a free and powerful tool that makes coding faster using advanced AI. It's like a superhero for coding, with a tool that helps you complete code in over 70 languages. It's super speedy and gives top-notch suggestions, making coding much more efficient. You can use Codeium as a Google Chrome extension.

Codeium Homepage

Just keep in mind that, because of its power, using Codeium makes it easy to over-rely on AI-generated suggestions. This could lead to errors in your code if you're not vigilant and don't keep up your skills. So make sure you still check/run your code, learn new topics as you need to, and keep your own code-writing abilities sharp.

You can read more about Codeium here.

Price

The AI is initially free to install in your Integrated Development Environment (IDE) but may require an upgrade which starts at $12/month with team usage.

How to set up Codeium in Visual Studio Code

To start, visit Codeium's website and select the sign-in option.

Sign-in user

Clicking on this will redirect you to the login page.

Login page

Sign in using either your email or Google account.

Authenticate

Once you've completed the login, you'll encounter various integrated development environments (IDEs). Choose the one that aligns with your preferences – for instance, I use Visual Studio Code.

Choosing your IDE

Go ahead and install it in your Visual Studio Code IDE.

After installation, click on the account sign-in option in Visual Studio Code to authenticate with the website.

Authenticate

Once completed, you can now use Codeium within your IDE.

Now, let's see a practical example:

Codeium example

Conclusion

The article discusses various AI tools that you can use to speed up development. Some developers think only about GitHub Copilot. But there are other AI tools with different features that can help you too.

If you've found value in this tutorial, consider sharing it with fellow developers who might also benefit.

To stay updated with my latest projects by following me on Twitter and LinkedIn or check out my BioDrop.

If you'd like to show your support, you can also Buy me a coffee☕

Thank you for taking the time to read💖

Also, writing quality and performant code helps your program or website work as expected – which should be every developer's goal.

SonarLint is a tool that helps you make sure your code is top-notch. It's like having a friendly guide who checks your code to see if it's well-written and doesn't have mistakes.

What is SonarLint?

SonarLint is an open-source code analysis tool that helps you find and resolve security and code quality problems in your source code as you're writing it. This plugin works with several integrated development environments (IDEs), including well-known ones like IntelliJ IDEA, Eclipse, and Visual Studio.

SonarLint's main purpose is to give you immediate feedback on possible problems with your code, including security flaws, bugs, and other recommended practices for programming. SonarLint analyzes code in the background while you create or change it in your IDE, giving you instant feedback and frequently exposing problems right in the code editor.

SonarLint is a component of the larger SonarQube ecosystem.

In this article, I'll teach you how to use SonarLint to help you write quality code.

Why is SonarLint Useful?

Let's imagine that building a website is like constructing a house. You want your house to be safe and well-designed, right? Well, SonarLint is like having a thorough inspector who checks your work as you build, making sure everything is just right.

Here's why SonarLint is important in web development:

1. Catch Mistakes Early (Code Quality): Assuming you were building a staircase, and accidentally put a step in the wrong place, SonarLint is like a smart friend who tells you immediately, "Hey, you might have made a mistake here!" It helps catch small errors in your code before they become big problems.

2. Follow the Blueprint (Coding Standards): When building a house, you follow a blueprint to make sure everything fits together. In coding, there are also rules (like a blueprint) on how to write good code. SonarLint helps you stick to these rules, making your code easy to read and work with.

3. Keep It Secure (Security): Just like you'd want your house to have good locks on the doors, you'd want your website to be secure. SonarLint checks your code for potential security issues, ensuring there are no "unlocked doors" that could let bad things happen.

4. Work Together Well (Collaboration): Imagine that each builder in your team used a different kind of tool. It would be chaos! SonarLint helps your team work together smoothly by making sure everyone follows the same coding standards. This way, everyone can understand and contribute to the project easily.

5. Save Time and Effort (Efficiency): Fixing mistakes after the whole house is built would take a lot of time and effort. SonarLint helps you fix issues as you go, saving you from returning and redoing things. It's like having a helpful friend who stops you from making mistakes in the first place.

6. Learn and Improve (Education): SonarLint does not only point out mistakes but also explains why they might be a problem. It's like having a coding teacher who helps you understand how to write better code. This way, you learn and become a better developer over time.

So, in the world of web development, SonarLint is your coding buddy, and it makes sure your JavaScript "house" is strong, secure, and well-organized from the ground up. It's a valuable tool in your workflow and helps you create high-quality websites that everyone can enjoy.

But you still may be wondering why you need this tool. You have a debugger already installed in your IDE and it can already track the errors in your environment.

Well, integrating SonarLint complements your debugger by focusing on code quality and security during development.

While a debugger helps to find and fix runtime issues, SonarLint analyzes code in real time, identifies bugs and potential vulnerabilities, and enforces coding standards.

You can also customize and configure coding rules based on your project's specific requirements and coding standards.

This proactive approach enhances overall code quality and ensures cleaner, more maintainable code before it reaches the debugging stage. This leads to fewer errors and smoother development workflows.

Before we get into the details of how to set up and use SonarLint, let's look at what makes code high-quality.

Code Quality Metrics

Be the best cookbook author! When writing code there are specific guidelines you must follow.

Just like when you're cooking up a new recipe or want to follow a traditional one, you should make sure anyone who reads it can follow along, and that the recipe you wrote down results in a good dish.

In the same sense, when writing code, it's always important to make your code readable so that other developers can understand it easily and so your code works as it's supposed to. Code quality metrics are like measuring how well you followed the recipe.

Here's a breakdown:

Readability (Clarity): This is similar to making sure your recipe instructions are clear. The code should be easy for others (or future you) to understand.

Maintainability (Ease of Changes): If you had to change ingredients in your recipe (code), it should be easy to switch things without chaos.

Performance (Speed): As you'd want your meal ready quickly, efficient code is expected to run fast. Code quality metrics check how fast your code is executed.

Reliability (Consistency): A good recipe always tastes the same. Similarly, reliable code consistently produces the correct results.

Security (Safety): Just like checking if ingredients are safe to eat, code quality metrics look for potential dangers in your code that could be exploited.

These should be your goals when writing quality code. And SonarLint can help you accomplish them.

How to Set Up SonarLint and Integrate with Your IDE

An IDE (Integrated Development Environment) is a software application that helps developers write and debug code more effectively. IDEs include a code editor and compiler or interpreter.

In this article, you'll see how to install SonarLint using VS Code extensions.

How to Install SonarLint with VS Code

First, install VS Code or open the application if you've already installed it.

Next, head over to the Extensions tab on VS Code and download the SonarLint extension.

To use the SonarLint extension for JavaScript, TypeScript, or CSS, you should have a minimum version of 14.17.0 of Node.js installed on your system (especially if you want to use Connected Mode with Sonar Cloud).

Install SonarLint in VS Code

Now that you've installed SonarLint, running an analysis on your code should be easy and it should start immediately after you open a new file.

This means SonarLint will start working and catching errors in your code as you write them on your IDE. Now let's look at an example in the next section.

How to Use SonarLint in Your IDE

Now let's look at how you can get the best out of SonarLint on your IDE. SonarLint is also a wonderful teacher, helping you better understand how to write clean code and giving you more information about why you have an error.

So instead of scouring the web to figure out what's wrong with your code, SonarLint explains why it has given you an error.

Here's an example of how to use it.

To be able to see the interface where we'll be working, open your terminal on VS Code – you can use Ctrl + backtick (`) to do this. I'm currently working on a project in React.js, and I didn't notice that I have duplicate border property names in my CSS class. Luckily, SonarLint caught this issue.

A CSS error caught by SonarLint

If you click on the light bulb, you'll see an option to fix the code by deactivating the CSS rule or to be blunt removing the extra border which I have in my CSS class in this instance. There's also another option for opening a description rule so you can understand why you're getting that error.

So SonarLint gives you two options:

1. It offers an option that gives you the ability and resources to understand why you have that error with the "Open description of rule".

2. It offers a solution to the error of the code which it has found.

Options offered by SonarLint to help fix and understand this problem

If you click on the open description rule, SonarLint opens another tab in VS Code to help you understand why it has thrown that error and how you can write cleaner/better code.

Tab opened by SonarLint in VSCode to help understand the error

As you can see, SonarLint is an excellent teacher and your best buddy as you continue to build and work on your IDE.

Another great thing about SonarLint is that it works with multiple programming languages. So whatever programming language you're using, chances are that SonarLint can handle it.

Conclusion

SonarLint is like having a coding buddy that helps you become a better programmer. As you write code, it's like having a teacher right there with you, pointing out ways to improve.

Imagine having a super-smart friend who does not just spot mistakes but also explains why they're wrong and shows you how to fix them.

Before your code gets to the testing stage, SonarLint checks for mistakes and makes sure your program runs smoothly. It's like having a superpower to catch issues early, saving you time and effort.

But that's not all! SonarLint is also like a security guard for your code. It watches out for any potential weak points that could let bad things happen. By learning from SonarLint, you can write better code and become more aware of keeping your code safe and secure.

Visual Studio Code (VSCode) is a popular source code editor that provides excellent support for Markdown, making it easy for developers, writers, and anyone creating textual content to use Markdown effectively.

To follow through this tutorial, you must have VSCode installed on your computer and know how to navigate it.

Importance of Using Markdown in Visual Studio Code (VSCode)

The combination of Markdown and VSCode provides a user-friendly and efficient environment for writing, editing, and formatting text, which makes it a suitable choice for developers, writers, and content creators.

The following are some of the key reasons to use markdown in VSCode:

• Markdown in VSCode supports code snippets and syntax highlighting for various programming languages, making it suitable for documenting code and technical content.
• VSCode provides a built-in preview feature that you can access by clicking the preview icon at the screen's top right corner. This allows you to see your raw markdown file alongside what it will look like when you publish it on the internet. This feature also helps you spot and fix simple mistakes as you go.
• Many project repositories on platforms like GitHub use Markdown for documentation. Getting familiar with Markdown in VSCode ensures a smooth transition when contributing to open-source projects or collaborating with teams using similar documentation standards.
• You do not need to be connected to the internet to use markdown in VSCode. You can work offline and still have access to all its features.
• For developers, you can easily push your document to GitHub using VSCode's built-in terminal. This also allows for multiple persons to review and work on the same document.

How to Create a Markdown File in VSCode

Follow the steps below to create your markdown file in VSCode:

1. Create a folder on your computer to store your documents.

An image showing you how to create a folder on the desktop page of your computer. (For windows)

2. Launch your VSCode app.

3. After launching your app, click on 'File', and then on 'Open Folder' to open the folder you just created.

An image showing you how to open your folder from the VSCode app.

4. Inside your folder, click on the file symbol and create a file that ends with '.md'(For example, First-file.md).

An image showing you how to create a file inside your folder in VSCode.

5. Press enter after typing your file name and your document page will open up. You are now all set and can start writing.

An image showing your file tab and your document page.

Markdown Syntax

Markdown syntax is a collection of symbols/annotations you add to your text to tell each word or phrase what it should be doing.

Let's go through some of the most useful markdown syntax and features.

Headers

To create headers, add the pound/hash symbol (#) in front of your text. The number of pound symbols determines the header level.

For example:

 # Header 1
 ## Header 2
 ### Header 3
 #### Header 4
 ##### Header 5
 ###### Header 6

Result:

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

Lists

There are two types of lists in Markdown, the ordered list and the unordered list. To create an ordered list, just use numbers followed by a period (like 1.). To create an unordered list, add an asterisk, a plus sign, or a hyphen in front of your text (*, + or, -) and it will start an unordered list.

For example

Ordered List
 1. First List
 2. Second List
    1. Sublist 2.1
    2. Sublist 2.2

 Unordered List
 * List 1
 * List 2
    + Sublist 1.2
    + Sublist 2.2
 - Item a
 - item b

Result

Ordered List

1. First List

2. Second List

   1. Sublist 2.1
   2. Sublist 2.2

   Unordered List

3. List 1
4. List 2
   • Sublist 1.2
   • Sublist 2.2
5. Item a
6. item b

Code

You can represent code in two ways in markdown: as inline code (like this), and as a codeblock (which you'll see below).

To create inline code, place your text within two backticks (``), for example:

`inline code`

Result:

inline code

To create a code block, enclose your code in triple backticks (```) at the beginning and end of the code block. You can also specify the programming language by adding the name of the language right after the first 3 backticks.

Here's an example:

def codeblock_example(): print("Hello world!")

Result

def codeblock_example():
    print("Hello world!")

Here's an example code block in Python:

```python
def codeblock_example():
    print("Hello world!")

Result

```python
def codeblock_example():
    print("Hello world!")

Tables

You can create a table using pipes and hyphens (| and -). The pipes divide your table into columns, while the hyphens create a horizontal line.

Here's an example of creating a basic table in Markdown:

| Header 1 | Header 2 | Header 3 | Header 4 |
| -------- | -------- | -------- | -------- |
| Row 1, Col 1 | Row 1, Col 2 |Row 1, Col 3 | Row 1, Col 4 |
| Row 2, Col 1 | Row 2, Col 2 |Row 2, Col 3 | Row 2, Col 4 |

Result:

Blockquotes

The greater than sign (>) allows you to create a blockquote. You can add this sign in front of your statement or quote and it will indent and italicize the quote to set it apart from the rest of the text.

For example:

> "The technology you use impresses no one. The experience you create with it is everything."
> Sean Gerety - UX leader

Result:

"The technology you use impresses no one. The experience you create with it is everything." Sean Gerety - UX leader

Links

You can create or add links to your document using square brackets and parentheses ([] and ()). Square brackets store the link text, while parentheses store the link URL.

For example:

[freeCodeCamp](https://www.freecodecamp.org/news/)

Result:

freeCodeCamp

The result is a clickable link that takes you to the freeCodeCamp site.

Images

Adding images to your document is similar to adding links. The only difference is, you lead with an exclamation mark in front of the brackets and parentheses.

For example:

![A cute cat image](https://hips.hearstapps.com/hmg-prod/images/cute-cat-photos-1593441022.jpg?crop=1.00xw:0.753xh;0,0.153xh&resize=1200:*)

The result is the image of a cat.

Emphasis

To emphasize text or make it italic, you can wrap it in single (for italics) or double (for bold) asterisks or underscores (* or _).

For example:

*italic* or _italic_
**bold** or __bold__

Result:

italic or italic bold or bold

As you can see above, a single asterisk and underscore give your text an italic form while a double asterisk and underscore make your text bold.

Escaping Characters

To display literal characters in markdown syntax, so they appear in your document without formatting it, you need to escape them using the backslash (\).

\_literal underscore\_

Result:

_literal underscore_

HTML

Markdown supports using HTML tags for more advanced formatting when there's a need for it.

Below are some of the ways you can use HTML tags in markdown:

• Images with HTML Attributes

<img src="image_url.jpg" alt="Alt text" width="300" height="200">

The HTML attribute within the image tag allows you to control properties like the width and height of the image.

• Styling with HTML and CSS

<span style="color:green">This is a green text.</span>

Result:

This is a green text.

You can include inline CSS styles for more advanced styling in your document.

• Embedding Videos

<iframe width="500" height="300" src="https://www.nova.com/embed/example-video" frameborder="0" allowfullscreen></iframe>

You can embed videos in your document using the iframe HTML tag. The attributes within the tag allow you to control the video properties.

Conclusion

This tutorial introduced you to using Markdown in VSCode. You learned how to initiate a Markdown file in VSCode, and you saw some common Markdown syntax. I hope you understand its importance for technical writers and content creators.

The synergy between Markdown and VSCode not only enhances productivity but also ensures a smooth transition into the world of standard documentation.

Whether you're writing technical documentation or contributing to collaborative coding efforts, you should now be equipped with a valuable skillset to help you effectively communicate and present your ideas.

Hey {username}, we've merged a PR before yours. Please resolve the merge conflicts so we can review and merge your PR.

Have you ever received that kind of message from a maintainer while waiting for your pull request to be reviewed and merged? And then, you're panicking because you don't know what to do? Or maybe you're thinking of closing your pull request, redoing everything from scratch, and opening a new pull request?

Well, the good news is you're not alone.

In this article, I will show you how to keep your remote and local branches up to date. I'll also walk you through resolving merge conflicts in GitHub and VS Code.

Table of Contents

• Prerequisites
• Understanding Merge Conflicts
• How to Keep the Branches Up to Date
  • How to Update the main Branch in Your Forked Repository
  • How to Update Your Local Branch
• How to Resolve Merge Conflicts
  • 1. Resolving Merge Conflicts on GitHub
  • 2. Resolving Merge Conflicts in VS Code
• Final Words

Prerequisites

To follow along with this tutorial, you'll need the following:

• A GitHub account.
• VS Code installed on your machine.

Understanding Merge Conflicts

Merge conflicts usually occur when two commits have changes in the same line(s) of the same file(s) from two different branches. Sometimes, it can also happen when someone edits a file, and another person deletes it.

The thing is, Git can't resolve the conflict itself. It needs your help to decide which changes need to be kept.

When there's a merge conflict, you will see a notification in your pull request on GitHub that the branch has conflicts that must be resolved. Maintainers can't merge a pull request when merge conflicts happen. That's because the merge button is deactivated until the conflicts are resolved.

Warning on a GitHub's pull request: This branch has conflicts that must be resolved

How to Keep the Branches Up to Date

Keeping your branches up to date is crucial. Habitually updating your remote and local main and working branches is highly recommended.

The best times to update your branches are:

• before you create a new branch to work on an issue,
• after you commit your last changes and before you push them to the remote repo,
• while you are waiting for your pull request to be reviewed.

When a pull request gets merged while you wait for yours to be reviewed, there will be a warning in your pull request. It tells you that your branch is behind the upstream (original) repository's main branch.

Warning on a GitHub pull request: This branch is out-of-date with the base branch.

How to Update the main Branch in Your Forked Repository

1. Go to your forked repository on GitHub.
2. Click the "Sync fork" button.
3. Click the green "Update branch" button.

"Sync fork" and "Update branch" buttons on GitHub.

After you update the branch, you will see a notification on the top that your branch is up to date.

A notification on GitHub: This branch is up to date with organization-name/repository-name:main.

How to Update Your Local Branch

Now, your remote main branch has been updated. Let's update your local branch from your terminal.

Step #1 - Go to Your Working Branch

In your terminal, navigate to your working branch with this command:

git checkout branch-name

Step #2 - Pull the Changes

Pull the latest changes from the main branch of your origin (forked) repository to your local branch.

git pull origin main

Step #3 - Push the Changes

Push these changes to your remote branch. If you need to resolve conflicts, you must fix them before you can push your changes.

git push

How to Resolve Merge Conflicts

You can only start to resolve the merge conflicts after your working branch is up to date. There are two ways to resolve the conflicts:

1. On GitHub
2. In your VS Code

1. Resolving Merge Conflicts on GitHub

Resolving the conflicts directly on GitHub is only possible when the cause of the conflicts is that there are changes in the same line(s) of the same file(s) from two different branches. For any other type of conflicts, you must resolve them locally in your code editor.

Follow these steps to resolve conflicts directly on GitHub:

Step #1 - Click the "Resolve conflicts" Button

First, go to the upstream repository on GitHub. Then, click the "Pull request" tab. Find and open your pull request, and scroll down.

Towards the end, you will find the "Resolve conflicts" button.

A notification of "This branch has conflicts that must be resolved" and a "Resolve conflicts" button on GitHub.

Step #2 - Take a Closer Look at the Conflicts

After clicking the "Resolve conflicts" button, you will be redirected to GitHub's conflict editor.

GitHub's conflict editor

You can see the file(s) that has conflicts on the left sidebar. On the top bar, you can find the number of conflicts in the file. And in the file itself, there are conflict markers <<<<<<<, =======, and >>>>>>>.

The lines between <<<<<<< branch-name and ======= are your changes. Anything between ======= and >>>>>>> main are the changes from the main branch of the upstream repository.

You need to look at the conflicts and decide which one you want to keep or if you need to make entirely new changes.

Step #3 - Resolving the Conflicts

After you decide how you want to resolve the conflicts, delete the conflict markers <<<<<<<, =======, >>>>>>>. Then you can make the changes. If there are several conflicts in the file, scroll down and resolve them before you mark them as resolved.

Once you resolved all conflicts, click the "Mark as resolved" button at the top bar.

"Mark as resolved" button on GitHub.

If there are conflicts in another file(s), go to the file by clicking the file name at the left sidebar. And then repeat the same steps to resolve the conflicts.

Step #4 - Click the "Commit merge" Button

After all conflicts in all conflicting files have been marked as resolved, a green "Commit merge" button will appear on the top right. Click the button to commit your changes.

A "Commit merge" button on GitHub.

2. Resolving Merge Conflicts in VS Code

After you pulled the latest changes from the main branch of your forked repository, you will see line(s) between the conflict markers <<<<<<<, =======, and >>>>>>>.

You will also see the options for resolving the conflicts:

• Accept Current Change: When you want to keep only your changes.
• Accept Incoming Change: When you want to keep only the changes from the main branch.
• Accept Both Changes: When you wish to keep yours and the incoming changes.

Merge conflicts on VS Code.

The line(s) between <<<<<<< HEAD (Current Change) and ======= are your changes. And anything between ======= and >>>>>>> hash-numbers (Incoming Change) are changes from the main branch of your forked repository.

Follow these steps to resolve the conflicts in VS Code:

Step #1 - Resolving the Conflicts

Take a closer look at the conflicts between the conflict markers. Then, you need to decide how you want to resolve the conflicts.

• You can manually delete the markers <<<<<<<, =======, >>>>>>> and make the changes.

OR

• You can choose and click one of the acceptance options on the top and modify the changes based on your needs.

Undo the Merging

If at one point you feel confused and want to undo the merge and redo everything from scratch, run the git merge --abort command before committing your changes. It will abort the merge and return your file to the state before the conflicts.

Step #2 - Commit Your Changes

Once you finished resolving the conflicts, you must commit your changes. Run this command to automatically stage and commit the changes:

git commit -am "Your message"

Understanding git commit -am Command

The command git commit -am is different from running git add . followed by git commit -m.

Running git add . will add all files (including newly created files) to the staging area. While adding the -a flag to the git commit, it will automatically stage any files you have committed before. It includes staging deleted tracked files but will not stage newly created files.

So, combining the -a with -m flag to git commit allows you to skip the staging phase and directly write the message for the commit.

Step #3 - Push Your Changes

Now, you can push your changes to the remote branch with the following command:

git push

Final Words

If you liked and found this article helpful, please share it with others. You can find other works on my blog, and let's connect on X (formerly Twitter) or LinkedIn.

The freeCodeCamp YouTube channel is here to help you unlock your coding superpowers with a new course we just published about increasing your productivity in VS Code.

Chris Sev developed this course. Chris is a popular instructor as well as a Dev Advocate at DigitalOcean and the founder of scotch.io.

Learning to harness the full potential of your text editor can make the difference between being a good developer and a great one. Chris Sev understands this, and that's why he's dedicated an entire course to help you master VS Code.

VS Code is packed with powerful features like Intellisense, built-in Git, a terminal, debugging tools, and a plethora of extensions. In this course you will learn how to unlock its full potential. The course is a comprehensive resource that covers everything you need to know to become a coding ninja in VS Code.

Here's a glimpse of what you'll learn:

1. Boost your productivity with VS Code.
2. Make VS Code look stunning with the best themes and fonts.
3. Master over 100 essential settings.
4. Discover 50+ top extensions to supercharge your workflow.
5. Learn over 100 tips and tricks to streamline your coding process.
6. Unleash the power of multi-cursor editing.
7. Navigate like a pro with the fastest keyboard shortcuts.
8. Harness built-in Git and GitHub integration.
9. Master the built-in terminal for efficient development.
10. Seamlessly switch between projects.

The course is structured into 54 comprehensive sections that cover every aspect of VS Code and its extensions. Here's a brief overview of some of the key sections:

• Welcome to Productive VS Code: An introduction to the course.
• How I Use VS Code To Be Productive: Insights from Chris Sev on his coding workflow.
• Installing VS Code: Get started with setting up VS Code.
• A Tour of VS Code's UI: Familiarize yourself with the editor's interface.
• VS Code Themes and Icon Themes: Customize the look and feel of VS Code.
• Extensions and Customization in VS Code: Explore the world of extensions.
• Using Git and GitHub in VS Code: Master version control with VS Code.
• Multi Cursor: My Favorite Feature: Unlock the power of multi-cursor editing.
• Keyboard Shortcuts Cheat Sheet for VS Code: Become a keyboard shortcut ninja.
• Outro to Productive VS Code: Wrapping up the course and taking your skills to the next level.

So if you want to become a more efficient and effective developer, head over to the freeCodeCamp.org YouTube channel to watch this course (6-hour watch).

Here is an example of how a code generated diagram looks like:

Diagram generated by code

No tools, no dragging, aligning and snapping shapes to places. Just code. Interesting right?

Pre-requisites

To follow along with this tutorial, you should have the following:

• A basic understanding of Markdown. Have a look at this guide if you aren't familiar with Markdown.

• Visual Studio Code with a Markdown previewing extension (covered in detail in coming sections).

• GitHub, to understand how you can render diagrams there.

Advantages of Generating Diagrams as Code

There are several advantages of generating diagrams as code rather than using traditional methods to manually 'create' diagrams. Let's see some of them:

• Dynamic: Code-generated diagrams are dynamic which means that you can easily update them by updating the code.

• Editable: With code-generated images, you are not relying on complex image generating tools. You can simply edit the code in a text editor and get an updated image.

• Efficient: Code-generated images are fast to load compared to static images. Also you don't need to host them separately as an image in your website.

• Quick to create: You can use a template and quickly come up with diagrams just using code. You don't need to invest the time and effort in learning image creation tools, that are usually overwhelming to start with.

How to Render and View Mermaid Code

There are several ways you can create and view Mermaid diagrams.

VSCode

First, install a Markdown previewer that has the support for Mermaid. Here is an example of such an extension: Markdown Preview Mermaid Support.

Create an empty Markdown file using the extension .md. Write your code in this file and open the preview on the right pane:

Code and preview in VSCode

StackEdit

StackEdit is an online, browser-based Markdown previewer. It provides an editor window and a preview on the right side.

Code and preview in StackEdit

GitHub

You can add Mermaid diagrams to create compelling README files in GitHub. Simply edit the README.md or any other Markdown file in GitHub to render Mermaid diagrams.

Edit code in GitHub

View and render Mermaid diagram in GitHub

How to Generate Diagrams as Code with Mermaid

Mermaid is a JavaScript-based tool that transforms Markdown-style text into dynamic diagrams, allowing you to create and modify them effortlessly.

Mermaid makes it easy to generate diagrams and visuals using simple text and code.

It follows a simple syntax:

```mermaid
    your code goes here
    .
    .
    .

```

With Mermaid, you can generate the following diagram types:

• Flowchart

• Sequence Diagram

• Class Diagram

• Gantt

• Pie Chart

Let's explore them one by one.

How to Create a Flowchart

A flowchart is a picture that shows the steps of a process using symbols, helping to explain the process in a clear and organized way. A flow chart is composed of nodes that are connected by arrows.

You can render flowcharts in mermaid using this example:

```mermaid
flowchart TD;
    A[Start] --> B[Process 1];
    B --> C[Process 2];
    C --> D[End];
```

Result:

Flowcharts in mermaid

Syntax breakdown:

• flowchart: This keyword tells that we are creating a flowchart.

• TD: this is the orientation of the flowchart and stands for Top to Down. The other FlowChart orientations are:
  – TB - Top to bottom,same as TD.
  – BT - Bottom to top
  – RL - Right to left
  – LR - Left to right

• -->: The direction of the arrow connecting the nodes.

How to Create a Sequence Diagram

A sequence diagram is an illustrative representation of interactions between processes, demonstrating their operational flow and the sequence of execution.

You can render sequence diagrams in mermaid using this syntax:

```mermaid
sequenceDiagram
    participant Client
    participant Server
    Client->>Server: Register user
    activate Server
    Server-->>Client: User already exists.
    deactivate Server

```

Result:

Sequence diagram in mermaid

Syntax breakdown:

• sequenceDiagram: This keyword specifies that we are making a sequence diagram.

• participant: These are the participants or the actors in a sequence diagram.

• activate/ deactivate: It is possible to activate and deactivate an actor. Activation shows as a small rectangle between interactions.

• -->>: Connecting lines (dashed).

• ->: Connecting lines (solid).

How to Create a Class Diagram

Class diagrams are used to visualize the structure and relationships of classes, interfaces, and their interactions in object-oriented programming (OOP). You can render class diagrams in Mermaid using this syntax:

```mermaid
classDiagram
    class Animal {
        +name: string
        +age: int
        +makeSound(): void
    }

    class Dog {
        +breed: string
        +bark(): void
    }

    class Cat {
        +color: string
        +meow(): void
    }

    Animal <|-- Dog
    Animal <|-- Cat

```

Result:

Class diagram in mermaid

Syntax breakdown:

• Defining classes: An individual class is defined with the class keyword followed by the class name.

• Adding class properties: Class properties are added with a + sign. In the example above, +breed is a property.

• Adding methods: Methods are recognized by mermaid using (), the round braces. Note that all the properties and methods are grouped under the same class using curly braces.

• Defining return types: Return types are defined after the method name/ class name. string and void are the return types in the above code.

• Defining relation ships: In OOP, relationships are the specific types of logical connections found on class and object diagrams. The following relationship types are supported in mermaid:

Here is a quick implementation of inheritance:

Inheritance

How to Create a Gantt Chart

A Gantt chart serves as a visual representation in the form of a bar chart. It effectively showcases a project's timeline, revealing the duration required for individual project components to reach completion.

You can render Gantt charts in Mermaid using this example:

```mermaid
gantt
    title Project Schedule
    dateFormat YYYY-MM-DD
    axisFormat %m/%d

    section Planning
    Define Project : 2023-01-01, 7d
    Research : 2023-01-08, 14d
    Define Requirements : 2023-01-22, 7d

    section Development
    Design : 2023-01-29, 21d
    Implementation : 2023-02-19, 28d

    section Testing
    Unit Testing : 2023-03-19, 14d
    Integration Testing : 2023-04-02, 14d

    section Deployment
    Deploy : 2023-04-16, 7d
    User Training : 2023-04-23, 14d

    section Maintenance
    Ongoing Support : 2023-05-07, 30d

```

Result:

Gantt charts in mermaid

Syntax breakdown:

• gantt specifies that you want to render a Gantt chart in mermaid.

• titlerepresents the project title.

• dateFormat YYYY-MM-DD is the input date format for the chart.

• axisFormat %m/%d represents the shown date format, the output date, in the x-axis.

• section is used to separate different parts of the project.

The x axis represents time and the y records the different tasks and the order in which they are to be completed.

How to Create a Pie Chart

A pie chart, also known as a circle chart, is a round visual representation used for displaying statistical data. It is divided into segments or slices to visually convey the numerical proportions of different categories or values.

Here is an example to create a pie chart in mermaid:

```mermaid
pie
    title Distribution of Expenses
    "Food" : 60
    "Rent" : 15
    "Entertainment" : 10
    "Savings" : 15

```

Result:

Pie charts in mermaid

Syntax breakdown:

In this example:

• pie indicates that we are creating a pie chart.

• title sets the title for the pie chart.

• The items in double quotes represent the categories (e.g., "Food," "Rent," "Entertainment," "Savings").

• The numbers after the colons represent the proportions or percentages for each category. In this case, "Food" occupies 60% of the chart, "Rent" 15%, "Entertainment" 10%, and "Savings" 15%.

Wrapping up

In this article, we just scratched the surface of rendering diagrams in Mermaid. The diagrams are highly customizable and allow you to create very complex diagrams as well.

Mermaid supports even more types of diagrams that are not mentioned in this tutorial. To learn more about Mermaid, check out their official documentation.

I hope you found this article helpful. I would love to connect with you on any of these platforms.

See you in the next tutorial, happy coding 😁

In this article, I'll walk you through the entire process of configuring Visual Studio Code for Python development. It's not a universal setup, but this is something that I use personally and have found it to be really comfortable.

The first step is to install Visual Studio Code on your computer. I'm on Debian 12 at the moment and I have the editor ready to go. Platform specific installation instructions are available in the documentation.

Assuming you are past the installation step, now I'll introduce you to a set of essential extensions that will elevate your Python development experience to the next level.

Python Extension

The first extension that you need to install is the Python Extension from Microsoft.

https://marketplace.visualstudio.com/items?itemName=ms-python.python

This is actually an extension pack that contains two extensions. The first extension is the Python extension. It lays the foundation for Python development in Visual Studio Code.

The other one is Pylance, which is a very performant language server for Python.

https://marketplace.visualstudio.com/items?itemName=ms-python.vscode-pylance

This extension provides rich intellisense support and is powered by Pyright, the static type checker from Microsoft. The next thing you need to think about is linting.

Ruff Linter

A linter is a program that analyses your code statically and provides valuable insights on possible errors.

The Pylance extension does an excellent job of finding out fatal errors within your code, but there is more to code than just that.

When working on a big project, it's pretty common to leave unwanted mess within your codebase. Things like unused imports and variables, bad code practices, and so on.

A good linter can point out code smells like this and make your code cleaner. Now, the go-to choice when it comes to Python linters is Pylint.

Pylint has been around for ages and works quite well, but I think there is a better alternative.

Ruff is an extremely fast Python linter written in Rust that imposes stricter linting rules than Pylint. The tool also has an official extension.

https://marketplace.visualstudio.com/items?itemName=charliermarsh.ruff

It's a plug n' play extension and doesn't require any additional configuration whatsoever. So once you have it installed, you're good to go.

Isort

Like a linter, isort is another utility that's sole purpose is sorting import statements.

https://marketplace.visualstudio.com/items?itemName=ms-python.isort

The utility sorts all the imports alphabetically, while also dividing them into sections.

The extension is very straightforward. Once you have the extension, it'll render squiggly lines under any import statement that seems out of place.

You can then use the quick action menu to sort them. Or, you can also use the command palette to quickly access the isort command.

Mypy Type Checker

Before I start talking about this extension, let me explain what mypy actually is.

According to the info on their homepage:

Mypy is an optional static type checker for Python that aims to combine the benefits of dynamic (or "duck") typing and static typing. Mypy combines the expressive power and convenience of Python with a powerful type system and compile-time type checking.

In simpler words, mypy forces you to add essential type annotations to your Python programs, making them easier to comprehend.

https://mypy-lang.org/

Recently, Microsoft has published an extension that adds type checking functionality using mypy to their beloved editor.

https://marketplace.visualstudio.com/items?itemName=ms-python.mypy-type-checker

Once you have installed the extension, it'll perform necessary checks on your code and report any missing type annotations as compile-time errors.

While having type annotations is not mandatory, it's highly recommended.

IntelliCode

IntelliCode provides AI assisted code completion in Visual Studio Code. It may sound similar to GitHub Copilot, but in reality it's a lot smaller than that.

https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode

Where GitHub Copilot or Tabnine provides full-blown code blocks, IntelliCode autocompletes lines of code pretty flawlessly.

In most cases, this extension can help you type less of the same code by suggesting the right thing while also keeping out of your way.

Error Lens

While not related to Python specifically, Error Lens is a great extension that embeds errors right by the side of the line of code.

I often work on my 14 inch Thinkpad and like to turn off the terminal pane. Error Lens eradicates the need to look at the terminal now and then to see my errors and warnings.

As useful as it may be, sometimes your editor can look cluttered due to all the warning and error outputs, so decide accordingly.

Indent Rainbow

Unlike other programming languages, an incorrect level of indentation can literally break your program in Python.

Visual Studio Code already does a good job of visualizing indentation levels within your code, but if you want to add some color to it, the indent-rainbow package is what you need.

https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

It adds different colors to the different levels of indentation. Personally, I don't use this one on a regular basis, but you may find it useful.

Conclusion

Like I said, these extensions and my personal configuration are not a silver bullet. But this setup is something that I've been using for quite a while and I hope it's useful to you as well.

I often install specialized extensions depending on the projects I work on. For example, I use the Django or Jinja project when I work on a Django or Flask project.

Or I install the Jupyter extension while working on a Jupyter Notebook. So feel free to install whatever you need, just don't overdo it.

ChatGPT — or Chat Generative Pre-Training Transformer — has been making waves in the tech industry recently. It was first launched in November 2022. Then the upgraded ChatGPT-4 came out in March 2023.

In this tutorial, I will explain how you can use ChatGPT to become more productive. Then I’ll walk you through how you can install the ChatGPT extension within your VSCode editor.

How Can ChatGPT Help You Out?

In today’s fast-paced world, productivity is more crucial than ever, and ChatGPT is key to increased efficiency. While developers use ChatGPT for activities like debugging, code creation, and text rephrasing, this sophisticated tool also offers other important features:

1. Human-like Conversation: ChatGPT provides an enhanced conversational experience, giving you the impression that you're interacting with an actual person. This helps make it a more intuitive tool.
2. Rapid and Accurate Answers: By utilizing ChatGPT, you can get precise responses to your queries, which helps maximize your productivity (just don't forget to fact-check!).
3. Continuous Improvement: ChatGPT learns from user interactions and enhances its performance over time. This makes it an asset for both individual developers and teams, enabling them to remain competitive in our fast-paced and demanding world.
4. Efficient Task Completion: ChatGPT acts as an assistant and saves you time by accomplishing mundane or repetitive tasks more quickly so you can focus on more important things.
5. Customized Learning Experience: ChatGPT adapts to your learning style and pace. It can provide personalized explanations, examples, and resources based on your specific needs and interests. By emphasizing what works best for you and presenting concepts in a manner that aligns with your individual preferences, ChatGPT enhances your learning experience and promotes better understanding.
6. Real-time Feedback and Guidance: By engaging with ChatGPT, you can receive real-time feedback on your code, allowing you to refine your programming skills. Whether you’re a beginner seeking guidance or an experienced developer looking to expand your programming skills, ChatGPT can provide valuable insights and suggestions.

With ChatGPT by your side, you can achieve more in less time, while enjoying the convenience and effectiveness of a cutting-edge language model.

How to Install ChatGPT in VsCode

Installing CodeGPT boosts your productivity as a developer and enhances your workflow. With the CodeGPT extension installed, you gain convenient access to ChatGPT’s features without you having to leave your Integrated Development Environment (IDE).

Here’s how you can do that:

First, you'll need to access the list of extensions in VSCode by following these steps:

• Open the View menu.
• From the drop-down list, select Extensions.

This will allow you to view and manage your extensions in VSCode.

extension in Vscode

Upon opening the extensions panel, you will have access to a marketplace where you can browse and install a wide range of tools to enhance your workflow in the IDE.

Next, install ChatGPT, also known as CodeGPT, and follow these simple steps:

• In VSCode, locate the search bar.
• Type “CodeGPT” into the search bar.
• Hit Enter.

The extension should appear in the search results. Click on the Install button next to the CodeGPT extension to add it to your VSCode environment.

marketplace in your Vscode

To get started with the extension, follow these steps:

• Open your preferred web browser.
• Search for OpenAI or visit their website OpenAI .

_OpenAI website_

To access the API reference follow these steps:

• Locate the menu bar at the top of the webpage
• Click on the developer’s section in the menu
• A drop-down menu will appear
• select the API reference option from the drop-down menu.

API reference

Once you visit their website and click on the API reference section, the system will prompt you to create a new account or sign in using your Google account. This essential step is necessary to proceed with API-related activities and explore all the features it offers.

_creating an account or login with openai.com_

Once you have logged into your account, click on your account profile to reveal a drop-down menu. From the available options, select View API Keys to proceed.

View API Keys

Upon selecting View API Keys, the system will guide you to the next page. Locate the section labeled API Keys and click the Create new secret key button. This will generate an API key that you can integrate into your VSCode environment.

Generating the API Keys

To integrate your API keys, follow these simple steps:

• Go back to VSCode.
• Open the settings.
• In the settings window, type “CodeGPT” in the search bar.
• Find the “CodeGPT: API Key” section.
• Copy the generated API key from OpenAI.
• Paste the API key in the designated field under the “CodeGPT: API Key” section.

By following these steps, you will integrate your API key into the CodeGPT extension in VSCode.

Integration of your API keys

Once you have integrated your API key into VSCode, you will find it listed as an installed extension.

codeGPT icon showing once installed

Once you have installed CodeGPT in your VSCode, you can start using its features and capabilities.

Here’s an example showcasing the results you can expect after installing CodeGPT in your VSCode environment:

A gif showing that codeGPT works

I'm getting a "429 undefined error" while I try to install the extension what do I do?

If you encounter a “429 Undefined Error” while installing ChatGPT in your VSCode environment, this may mean that you have exceeded the usage limits or rate limits of the OpenAI API.

To resolve this issue:

• Get a new email and register. Use the new email to generate the API key, or better still watch the video under the resource section to guide you.
• Verify your internet connection: Ensure that you have a stable internet connection to avoid any network-related errors.

Conclusion

Following this step-by-step guide to install ChatGPT in VSCode can increase your productivity and help you complete tasks.

Integrating ChatGPT into your VSCode environment will help you work faster and achieve better results. You can streamline your workflow, receive instant feedback, and maximize your potential with this powerful language model.

Embrace the future of productivity and make the most of ChatGPT in VSCode to save time and effort in your work.

If you found this article valuable, I kindly request that you share it with fellow developers who could also enjoy this content. Together, by exchanging knowledge and resources within our community, we can contribute to the advancement of our field.

To stay updated on my latest work, feel free to connect with me on Twitter and LinkedIn.

Thank you for taking the time to read 💖.

Resources

• ChatGPT for VSCode
• Al Assistants That Help Your Productivity (Besides ChatGPT)

Before approaching the process of running your first C or C++ code on Visual Studio Code, let me guide you through the process and get it all set up based on the operating system you are using on your computer.

C and C++ compilers

For running C or C++ code, you just need to have a valid C/C++ compiler installed on your computer. If you are using a Linux operating system, then there is a high chance that it is already installed on your system. But we need to make sure that it is correctly installed.

For checking whether or not you have the compiler (GCC/G++/MinGW) installed on your system or not, you have to check the compiler version first.

Simply open your terminal and use gcc --version and g++ --version. If you get the version number, then the compiler is already installed on your system.

You can check the version using the same commands on any operating system, whether that is a Windows, Linux, or macOS-based operating system.

If you get feedback on your terminal that it does not know anything about GCC or G++, then you have to install the compiler correctly.

If you are using the most used Windows operating system, then I already have written an in-depth article showing you all the processes step-by-step on freeCodeCamp. Make sure to read the entire article first, as it also contains a complete video to provide you with complete support.

Embedded content

If you are using another operating system, and you don't have the compilers installed, then make sure to install them before proceeding.

How to Install VS Code or VS Code Insiders

You have to download Visual Studio Code directly from the official website: https://code.visualstudio.com/.

If you want, you can also install VS Code Insiders, and the same process is applicable for that as well.

Visual Studio Code Insiders is actually the "Insiders" build of Visual Studio Code, which contains all the latest features that are shipped daily. You can think of VS Code as the stable release and the VS Code Insiders as the Insiders release of that.

If you want to experience the latest updates instantly, then you might also try Visual Studio Code Insiders (I use it myself). For downloading VS Code Insiders, you can visit the official website for VS Code Insiders here: https://code.visualstudio.com/insiders/

Make sure to download the exact file for your operating system.

Download Page: VS Code

Download Page: VS Code Insiders

The installation process is pretty basic. But I am going to show you all the steps sequentially. For now, I am going to show you the installation process using VS Code Insiders, but everything you will see here is going to be exactly the same for VS Code as well.

Make sure to click the box on the "I accept the agreement " box and click on Next.

Accept the agreement and click Next

Keep everything as it is. Do not change anything from here.

Click Next

Click Next. Again, simply click Next.

Click Next

Make sure to add the checkmark (✔) on all of the boxes. Then click on Next.

Check all of the boxes, and click Next

Click on Install.

Click Install

It might take a little time to finish the installation.

Let it finish...

Click on Finish.

Click Finish

Congrats - you've successfully installed VS Code/VS Code Insiders on your system. Now, cheers! 🥂

How to Prepare VS Code/VS Code Insiders For C and C++ Code

First, open VS Code or VS Code Insiders.

Go to the Extension tab. Search for "C" or "C++" and install the first one that is already verified by Microsoft itself.

Install C/C++ extension

Also, install C/C++ Extension Pack. It should also be verified by Microsoft.

Install C/C++ Extension Pack

Then you have to search for Code Runner and install the extension as well.

Install Code Runner Extension

Now, we need to change some settings.

Change some settings

Click the gear box (It is called the Manage section), and then click Settings. Alternatively, you can also use the shortcut keys Ctrl + ,. You need to replace the Ctrl key with the Command key for Mac.

Type "Run code in terminal" and press Enter key

In the search bar, type "Run code in terminal" and press the Enter key.

Scroll down a little bit until you find Code-runner: Run In Terminal. Make sure that the box is checked (✔).

Make sure to check the box

Now you need to restart your VS Code/VS Code Insiders. Simply close and reopen the program.

How to Test Your Code

Simply open VS Code/VS Code Insiders, open any folder, and create any file with the extension .c for the C file and .cpp for the C++ file.

After writing your code, you can run the code directly using the play button you'll find in the upper right corner.

This is how you can run any C/C++ program from VS Code/Insiders

It will compile and then run the code directly. After running a code, the code runner button would be set default to run directly. So, your computer is 100% ready for compiling and running any C/C++ programming code. 😀

Conclusion

Thanks for reading the entire article. If it helps you then you can also check out other articles of mine at freeCodeCamp.

If you want to get in touch with me, then you can do so using Twitter, LinkedIn, and GitHub.

You can also SUBSCRIBE to my YouTube channel (Code With FahimFBA) if you want to learn various kinds of programming languages with a lot of practical examples regularly.

If you want to check out my highlights, then you can do so at my Polywork timeline.

You can also visit my website to learn more about me and what I'm working on.

Thanks a bunch!

I recently switched to VS Code for development of a dockerized .NET core app. But I then realized that there weren't many up-to-date articles about debugging dockerized .NET core applications in VS Code.

Source: GIPHY

So, here I am, writing this article. I hope that it'll help others like myself in debugging their dockerized .NET core applications in VS Code.

In this article we will discuss the following:

1. VS Code extensions for Docker
2. VS Code launch configurations
3. How to debug .NET core apps on your local Docker

VS Code Extensions for Docker

Although no extension is really required (for you hardcore minimalists) to debug containerzied .NET core applications, I'd still recommend that you install the Docker extension by Microsoft. It will make it easy to create, manage, and debug containerized applications from right within VS Code.

Honestly, ever since I've started using the extension, I don't use the Docker Desktop anymore.

VS Code Launch Configurations

Now, in order to debug dockerized .NET Core applications, we will need to create a VS code launch configuration.

In this section, I'll talk about two sorts of launch configurations: one for docker run and the other for docker compose.

Later on, we'll also look into the final launch configurations and understand them so that we know what we're doing.

Docker Run Launch Configuration

If you installed the Docker extension by Microsoft, this should be easy.

First, press "Ctrl + P" in VS code and type in > Docker:

Next, select "Docker: Initialize for Docker Debugging".

Then select ".NET: ASP.NET Core" as your application platform. Select "Linux" as your operating system.

And voilà! You should now have a "Docker .NET Core Launch" launch configuration.

Note that Docker extension will want to overwrite your existing dockerfile. If you don't let it, it won't create the launch configurations. I'd recommend that you backup your dockerfile, let the extension overwrite it, and then restore your original file.

Docker Compose Launch Configurations

Now we all know that real-life applications are never that simple! You would probably have a DB container, an app container, and a few other containers all connected together via a docker-compose configuration.

If that is the case, here is how you'll create your launch configurations.

First, open your workspace in VS Code. If you already have existing launch configurations, you can skip the next part.

Next, press "Ctrl + Shift + D" to switch to the "Run & Debug Tab".

Click on "create a launch.json file" and choose ".NET 5+ and .NET Core" (This will create a basic launch configuration for running your application without Docker).

Now, while your launch.json file is open, click on Add Configuration button in the bottom right corner of the editor.

Select "Docker: .NET Core Attach (Preview)" from the opened dropdown.

It should have added a new configuration called "Docker: .NET Core Attach (Preview)".

Voilà! Now you're ready to debug your dockerized .NET Core application in VS Code.

How to Understand Launch Configurations

Before we start debugging our application, let's look into the launch configurations a bit closer to understand how they work.

There should be two files in the .vscode folder, in the root of your workspace.

{
    "version": "2.0.0",
    "tasks": [
        {
            "type": "docker-build",
            "label": "docker-build: debug",
            "dependsOn": [
                "build"
            ],
            "dockerBuild": {
                "tag": "webapi:dev",
                "target": "base",
                "dockerfile": "${workspaceFolder}/src/Dockerfile",
                "context": "${workspaceFolder}",
                "pull": true
            },
            "netCore": {
                "appProject": "${workspaceFolder}/src/webapi.csproj"
            }
        },
        {
            "type": "docker-run",
            "label": "docker-run: debug",
            "dependsOn": [
                "docker-build: debug"
            ],
            "dockerRun": {},
            "netCore": {
                "appProject": "${workspaceFolder}/src/webapi.csproj",
                "enableDebugging": true
            }
        }
    ]
}

First, let's take a look at the tasks.json file. This file has list of tasks that might be required by some of the launch configurations to launch the application properly.

The task we want to look at is "docker-run: debug". This is the task called when you launch using the "Docker .NET Core Launch" configuration (as we'll see later).

This task has three properties that we need to understand:

• netCore.appProject: This property is .NET Core app-specific and just points to the project file of your app.
• netCore.enableDebugging: This is another .NET Core app-specific property which tells VS code to launch the app with debugging capabilities.
• dependsOn: This is a generic property that defines if a task depends on other tasks for its execution.

Secondly, we need to understand what the "docker-build: debug" task does.

In addition to the netCore and dependsOn properties, it has a dockerBuild object that controls the docker build command which is run by VS Code to launch a docker run app.

Properties of the dockerBuild object are quite similar to the arguments that you pass to the docker build command.

You can read about all the dockerBuild object properties here and tasks in general here.

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Docker .NET Core Attach",
      "type": "docker",
      "request": "attach",
      "platform": "netCore",
      "sourceFileMap": {
        "/src": "${workspaceFolder}/src"
      }
    },
    {
      "name": "Docker .NET Core Launch",
      "type": "docker",
      "request": "launch",
      "preLaunchTask": "docker-run: debug",
      "netCore": {
        "appProject": "${workspaceFolder}/src/webapi.csproj"
      }
    }
  ]
}

Now, let's take a look at the launch.json file where all the launch configurations live.

While most of these properties are standard, the one we care about is "sourceFileMap" in the "Docker .NET Core Attach" configuration.

In order to debug .NET Core applications that were built on a machine other than the VS Code machine (in this case a Docker), VS Code needs to understand how-to map your current workspace to the build machine hierarchy.

For example, if my project was built from the "/src" folder in Linux, this property will tell VS Code to replace "/src" with "${workspaceFolder}/src" in all the filepaths. In case this mapping is incorrect, VS Code will hit the breakpoint but will give an error that the file (being debugged) does not exist.

You can read more about launch.json properties in detail over here.

How to Debug .NET Core Apps on Your Local Docker

Docker Run

Now that we have the launch configurations figured out, this should be easy! Just follow the steps below.

First, press "Ctrl + Shift + D" to switch to the "Run & Debug Tab".

Then choose "Docker .NET Core Launch" and press the green play icon to debug.

Docker Compose

Debugging a Docker Compose container is slightly different. You'll have to make sure that your Docker Compose containers are already running before you attach the VS Code debugger.

Once they are up, follow these steps:

First, press "Ctrl + Shift + D" to switch to the "Run & Debug Tab".

Then choose "Docker: .NET Core Attach (Preview)" and press the green play icon to debug.

That is, it! I hope you found this helpful. If you have any questions or are confused about anything, you can reach out to me or you can check out the sample project on GitHub.

Happy Coding!

This article is a part of my coding series. You may find other useful articles for your daily development there as well.

You'll pick a tech stack and a programming language to learn and use, and you'll also choose an IDE, or integrated development environment, where you'll write your code.

Many different types of IDEs are available today. Some work only online, while others work locally and possibly online. Some have specific features that help you write more precise and correct code, and so on.

In this article, you will learn what an IDE is, what features an IDE can have, and what factors to consider when selecting an IDE for coding.

What is an IDE?

Developers use an IDE, which stands for Integrated Development Environment, to write computer programs. You can write these computer programs in any language, including Python, Java, and many others.

There are always tools that you'll use to help you achieve your goals in life. For example, a writer uses text editors such as Microsoft Word and Google Docs. An accountant uses spreadsheets such as Microsoft Excel and Google Sheets. And a programmer uses IDEs.

These IDEs increase your productivity by making writing, editing, debugging, and testing code easier.

Note: You can write code with text editors, but these text editors won't give you all the benefits an IDE can offer.

Why Use an IDE?

Before IDEs were introduced, programmers used text editors such as Notepad to write code. They then saved that code using programming language extensions such as .php for PHP files and many more.

However, these text editors were plain and lacked some features. This made writing, debugging, and running code difficult and time-consuming.

This resulted in the development of the IDE, which includes some core functionality that extends beyond text editing, such as:

Syntax Highlighting

An IDE detects the programming language and then applies specific colors, fonts, and styles to certain keywords, words, and text. This makes your code readable, clean, easier to detect syntax errors, and lots more.

// without syntax highlighting

const sayHello = () => {
  console.log("Hello World");
}

// with syntax highlighting

const sayHello = () => {
  console.log("Hello World");
}

Auto Completion

When we type code in an IDE, a dropdown of possible suggestions appears from which we can select what we want. These helpful suggestions appear without us having to write the entire code, which can be slow and may result in a syntax error.

Easier Debugging

Because programmers are humans, we are prone to making mistakes (bugs) in our code. These can be challenging to detect with text editors but can be easier with IDEs.

When we run or test our code, an IDE will show us the errors, including the lines where they appear and potential solutions.

This makes debugging (the process of fixing any errors or bugs discovered during testing) much more straightforward.

There are many more reasons why you should use IDEs, such as the ability to easily compile your code and lots more.

How to Choose an IDE for Coding

Having read this article to this point, the next question on your mind is likely - how do I choose an IDE?

Don't worry, this doesn't have to be too complicated. But weighing some options before choosing an IDE is a good idea.

Here are some things to consider:

What programming language you're using

There are many different types of IDEs, as mentioned above. Some are dedicated and only work with specific languages, while others are multi-language and support multiple languages.

The specialized IDEs include automation features tailored to the syntax of specific languages. This means that language is an important consideration when selecting an IDE.

Some examples of specialized IDEs include PyCharm for Python, Intellij IDEA for Java, Code::Blocks for C/C++, and RubyMine for Ruby/Rails.

If you're looking for a multi-language IDE, Visual Studio Code is a popular option. It's useful for web development and many other purposes.

What operating system you're using

Another essential factor to consider is the operating system you're using.

Some IDEs work very well on one OS but not on another. On one operating system, an IDE may be slow or difficult to use, and vice versa on another. Some IDEs exist on one OS but not on another, even though most IDEs today have multiple versions for different operating systems.

For example, Xcode is the built-in IDE for macOS. It is not installed by default, but you can get it for free from Apple via the Terminal or Apple's website. However, this IDE is incompatible with Windows.

The cost

Even if most IDEs are free, the add-ons or customization features may not be. This means you must research the specific features you desire, the cost, and whether they are affordable.

For example, if you want an AI assistant that can suggest code and complete your code for you, saving you time, there are many extensions available, such as Tabnine for VScode. This supports almost all programming languages, but it is paid and only offers a 14-day free trial.

Before selecting an IDE, you should compare as many extensions that offer what you want and the IDE they work with, their cost, the languages they support, and other factors as possible.

There are other details to consider, but this will get you started.

Wrapping Up

In this article, you have learned what an IDE is, why programmers use them, and how to choose one.

To summarize, there are some IDEs that are specific to specific programming languages, as we discussed above. But others, like VSCode, are more general-purpose and support many languages.

Before selecting an IDE, research your preferred language, operating system, financial capabilities, and customization features.You can read more on What is an IDE in Programming? on our previous areticle by Hillary.

Have fun coding!

But does this mean we're doing things right? Familiarity often leads to sloppiness and overlooking the basics.

In this article, we will explore

• How to write meaningful Git commit messages
• How to create efficient pull requests (PR)
• How to get really good at the code review process and some best practices to follow

Pre-Requisites:

I prefer to use VS Code as my code editor. I use this for my Git editor too. I find it easier to write commit messages within the same place as I code. It also gives me more space to write commit messages and descriptions.

If you haven't already done this, follow these steps to make VS Code your default git editor.

1. Open VS Code and in the command palette search for

Shell Command: Install 'code' command to PATH

2. Then run the following command in your terminal:

git config --global core.editor "code --wait"

Now when you run git commit or git -config --global -e it will open the Git editor within a file in VS Code.

Note: All given commands are to be run within the terminal (whether that be your terminal of choice, or the integrated terminal within VS Code).

How to Write Meaningful Commit Messages

When committing your code, it's helpful to write useful commit messages. Here are some tips and best practices to help you do so.

Use Imperative Commands

Prefix your commit messages with imperative commands such as: fix, refactor, add, and remove

This is because you should be able to suffix a commit message to the phrase

"If applied, this code will..."

and inform other developers what it will do, for example:‌

If applied, this code will fix issue with login button not showing

Keep It Brief

You're not writing a monologue, so keep it brief. As a general rule, a commit message should not exceed 50 characters.

Put yourself in the developer's or reviewer's shoes. Try and think about what you would want to know if you were looking at the Git log on this repo.

• What work did you complete?
• Why did you do it?
• What effect does it have on the code base?

Here's an example of a concise yet informative commit message:

fix issue with login button not showing

How to Keep Commit Messages Short but Helpful

Within your commits, you can include a commit description, allowing us to add even more detail / context as to what you did.

Add an empty line underneath the commit message, and begin writing a description on line 3. It looks like this:

fix issue with login buttton not showing

- update login form validation
- update login styling for showing the button

Now when other devs are reviewing Git logs, commits, or needing to revert code they have a better indication of what effect will take place, and whether it will cause any breaking changes.

Examples of Unhelpful Commit Messages

On the other hand, here are some examples of ineffective commit messages:

• fixed bug – There is no reference to what bug has been fixed exactly, so it adds no value to the git history / logs. It will make reviewing previous commits extremely difficult, and painstaking. As a developer you would have to open each commit like this to understand what it's actually doing.
• refactored due to PR comments – This message gives us no information about what was changed. We would have to hunt down the pull request to gather any context around the changes made, or again open up the commit.
• fixing previous commit – Lack of context again
• made tests pass – Which test file was updated? You should at least give the name or area of tests that have been fixed.

All of these are poor examples of commit messages due to their ambiguity, lack of information, and lack of context. They force team members to do more work in order to understand what's going on, which is not acceptable in any team.

How to Develop a Commit Strategy

You may think committing code is as straightforward as just committing and pushing the code. But there's a little more to it than that.

Let's talk about how you can develop a useful commit strategy to stay consistent and make useful commits.

Make small, specific commits

Smaller commits make it easier to revert code to a previous state if there's a problem. If your commit affects too many areas, reverting back could mean losing a lot of code.

It's also far easier for reviewers to understand what the code is doing if it's related to one purpose.

Let's see a real life example of how this would work. Firstly we need to add our related file changes. We can view which files have been changed within our branch by running git status

Example of output from git status

As you can see there are various files that have been changed / added to the project. However, they're all for different areas of the project. Following the golden rule of keeping commits small and relatable, let's take a look at how we can put that into practice.

Using the git add followed by the file names we can commit only the files which are related. We do this by using the git add command , plus the names of the files we wish to add one after another like so:

git add login.test.ts login.ts

If we check git status now, we'll see the two staged files:

Example of Git status output after staging files

We have the files, now to create our commit. As always, we'll utilise git commit which will open the git editor within VS Code (as we set it up like this earlier). If you skipped this step, the commit will open in your preferred editor.

We'll add a commit message of the changes:

Fix issue with login buttton not showing

There you have it, a small related file commit. The commit message tells us exactly what we've done, where the issue resided, along with some small context of what the issue was.

Bad Example of a Commit

Since we've done it successfully, lets take a look at a bad example:

So imagine we've done all this work, and the developer has staged all the files at once, using the git add -A command which stages all changed/added files.

Example of multiple unrelated files staged for commit

They now create a commit message utilising the one liner Git command:

git commit -m 'Updated various areas such as validation, registration and products pages'

Why is this so bad?

1. Firstly there's too much happening within this commit. Too many files mean that if we need to revert the validation changes, only we can't. We'd have to revert the whole commit losing the products and registration changes.
2. The commit message is lengthy. We can remove unnecessary words like 'various areas such as'. It adds no value to the commit message, and takes up characters that could be used for more context.
3. We're not using the imperative voice as mentioned earlier. We should change "Updated" to 'Update'.

If applied, this code will fix the submit button not showing on the login

Midway Recap

So at this point, we've learnt:

• How to formulate a useful commit message
• How to formulate an effective commit strategy to allow us to easily keep track of related changes, and a more maintainable code base.
• What makes a bad commit

How to Create Efficient Pull Requests

Decide when to push

Pushing is the act of getting your commits up to the server / remote origin ready to create a Pull Request (PR). I recommend pushing as soon as the current feature or bug is done.

Also, it's a good idea to keep your PR's small, containing only related commits. As an example if you had the following commits:

• Add new product search component
• Add unit tests for product search component
• Add documentation for product search component

Because all these commits are related to the same component, it's recommended to pull them together into one PR.

Whereas, something like:

• Fix bug within login screen
• Refactor registration page for performance
• Update validation tests for login form
• Update login tests for forgotten password
• Update unit tests for product search component

Should not go in the same PR, as there's far too much going on. These commits should have been grouped into several PR's containing relevant commits at the time.

If this was the Git log for a branch, you would be unable to create a pull request with solely relatable files, due to the order in which the commits have been created, as you can't simply inform Git that you want commits 1,3 and 4 to go into this PR.

Keep it small

Remember – like your commits, keep your PR's small. Nobody wants to wade their way through a 50+ file pull request. All that'll happen then is that your review will suffer from the common "Looks good to me".

When you create a large PR, it translates to "I couldn't be bothered to look through all these files, but skimming through them it looks ok". With a smaller PR, on the other hand, it means exactly what it says.

Sometimes large pull requests are unavoidable, like when updating base functions and such. However, you should try to be aware of how you can limit the impact on other developers.

How to Get Your Branch Ready For Code Review

The exact process of creating a Pull Request will differ depending on which version control hosting platform you are using, but the concepts are the same.

First, you should check out the main branch from your repo. Then run a git pull, which will get all the latest code from main onto your local dev system.

Once you've done that, you can go back to your own branch using git checkout and the name of your branch , for example git checkout login-fixes.

Now we need to get the main branch code into ours. We can do this utilising the git merge command.

git merge main

If there were changes, that is there were files in the pull from main, you will need to create a "merge commit". That's just another commit to your own branch containing the merged changes.

Simply create another commit, with a message explaining you've merged from main like so:

git commit -m 'Merge main into login-fixes'

Push your changes back to the remote server using git

How to Create the Pull Request

The easiest way to do this is via the web interface on your preferred version control platform. In this example we'll be utilising GitHub.

Simply navigate to your repo, and then click the Pull Requests tab.

Pull Requests Tab - GitHub

Select "New pull request"

New Pull Request - Github

When you're creating a pull request, use a title which describes the PR like you did with your commit.

PR - Fix login button not showing.

It can be useful to provide the reviewers with some context as to why this PR was necessary, or any additional info within the PR description.

As you can see above, I've chosen to include what the fix was, potentially making the review smoother. I've also included some important information regarding that this PR should not be merged until another PR is merged.

When working for some companies, they may require you to add a ticket reference to the PR title too, but I've already discussed why I think this is not needed.

PR Labels

If you want to make it even clearer, you can utilise PR Labels. These are labels which can be applied to the PR to illustrate either the state of the PR, or simple information to others. You can find them on the right of the pull request page:

You can select from pre-defined labels, or add your own.

• Click on Labels
• Enter the label you wish to use. In our scenario we're going to add a label called Do Not Merge.
• Press enter once you have typed in the value, and you can configure the label's colour and name. Once saved you can now type it in again and it will show within the list.
• Select your new label and voilà!

Click Create pull request

There you have it, you have created your first pull request.

How to Review a PR – Best practices

What to look for when reviewing a PR

Always take a step back and think about the key elements of a good code review. Here are some points to consider:

• Does the code follow your team's coding guidelines?
• Does the code meet its objective / acceptance criteria?
• Is the code legible and is it easy to understand what it's doing without the need for heavy comments / documentation? (This one for me is one of the most important, as I'm a huge fan of descriptive function and variable names.)
• Does the code need any refactoring, considering security, performance or simply ease of reading?
• Does the code follow simple design patterns / principles, like the single responsibility, abstraction, encapsulation, and so on? If not, you can make suggestions on how this can be achieved or perhaps teach those not familiar with it what it means and the benefits.
• Are there any "magic numbers / strings" that would be better served as a constant or named variable?

Review PRs in a timely manner

While you shouldn't necessarily feel obligated to look at a PR immediately, don't leave the author hanging, either. This PR could be blocking future work, or it could be important (if this is the case, the author should make this clear).

Try and keep discussions and PR comments flowing. If it makes it easier, you can jump on a call (if remote) or pull up a chair in the office and go through the PR together. This might speed up the process, and reduce the back and forth waiting around.

All this being said, don't rush the code review. Be meticulous, and read each file and change carefully. I advise you to pull down the branch the changes are made on, allowing yourself to look over the entire project, and not just the lines changed.

Many times, if you're looking at just one or two line code changes, you won't know exactly what the code is supposed to be doing. But if you look at the whole file you can follow the flow.

If you're using VS Code and GitHub, you can utilise their own extension for viewing pull requests and viewing comments whilst checking out the PR branch all within VS Code itself.

We're all human here

Remember that we're all human, and people often make mistakes when coding and can simply overlook things.

Not everyone codes the same way you do either, so don't simply request changes just because they've done it differently to how you would have. It doesn't mean that they've done it wrong, nor does it mean your way is the best.

Describe changes clearly and word your comments carefully

A pull request is not an exam, it is also not an opportunity for you to harshly criticise someone's work. It's a learning opportunity, and a chance to ensure the best code makes it into the main branch. It's about code quality and whether the code meets the acceptance criteria.

Think about the language you use when making suggestions. A PR comment is the opposite to a git commit message. No longer do we use the imperative voice. Do not command them to make changes, but instead make softer suggestions using the subjunctive mood instead.

As you're critiquing work that someone has most likely put a lot of effort into, use phrases like:

It it were me, I'd change this if statement to a switch case statement as it's more readable.

or

Perhaps consider renaming this variable to a more intuitive name, such as {alternative} to make it more understandable from initial read what it's doing.

As above, try and add your reasoning as to why you're making the change request. It will make the request more impactful, and allow the author to reflect on whether it would be best to make the change, or perhaps spark a discussion to come to a compromise.

Offer suggestions for improvement

Most Git systems allow you to click on the line you wish to be changed and add a comment so it's much simpler to specify the exact line of code you want changed.

Hosting providers such as GitHub have a "suggestion" feature which allows you to add a code suggestion directly into the comment, which can instantly be accepted and committed from within the PR.

If this isn't available, be sure to make sure what you're requesting is clear and concise. Perhaps even rewrite, or write out your suggestion within the comment such as:

Perhaps look at changing this if / else statement to a ternary statement like so:

var backgroundColor = isError ? 'red' : 'blue'

This makes the suggestion clear, and even speeds up the process of re-writing (using copy and paste).

Don't be afraid to defend your code

Remember a PR is a discussion. It's a two way process, giving you the opportunity to defend your code and explain with more context what you were thinking.

Just because the code may not look perfect, there may be a reason. There may have been matters out of your control which you had to contend with, forcing your hand to writing it in a certain way.

Don't be afraid to offer counter arguments, but be ready with valid reasoning, if you truly believe in your solution.

Communicate that the PR is approved

Many people nowadays filter their GitHub or version control email notifications to a folder which rarely gets looked at due to the volume of updates on repos, commits, branches and such.

To speed up the process, and make it more fun for the author, simply drop them a message. Many companies now offer some form of instant messaging service, so why not use it?

Setup a specific channel on your IM platform for PR's. Post in the channel / chat room your PR link, and allow reviewers to update you on their progress by replying within threads. Add an emoji to make it more light hearted (as we all know PR's can be boring, so why not spruce them up a bit).

Conclusion

In this article we've learned:

• How to setup VS Code with Git integration
• How to write useful Git commit messages
• When to commit to make it easier for the team
• How to effectively code review a PR
• How to handle PRs in a manner that helps all your team.

I hope you've learned something new, thanks for reading my article

Feel free to connect with me on Twitter @gWeaths

Last week, I was excited to dive into chatbot development with the open-source framework Rasa. With Rasa, you get a ton of flexibility, from designing the conversation to developing the NLU logic to deployment.

But the "Yay" soon transformed into banging my head against a brick wall. The initial Rasa bot itself started crashing on my not-so-bad laptop with 4 cores and 16GB RAM.

I had to find some other platform where I could do my development, but I didn't want to spend any money toying around with open-source frameworks. To be precise, what I really needed was a free Machine Learning experimentation platform with VS Code support.

I am going to take you through how I solved these challenges with completely free cloud-based platforms.

I found AWS Sagemaker Studiolab to be a solid choice to run my Rasa machine learning workloads. It is free, has 15 GB persistent storage, and has 12-hour CPU sessions for complex algorithms or 4-hour GPU sessions for deep learning algorithms.

Sagemaker also offers a Jupyterlab server, not a development IDE platform. I desperately needed my favourite VS Code interface, which is how I stumbled upon Github Codespaces.

Codespaces provides a cloud-based VS Code environment but it cannot run compute intensive jobs like ML training. So I needed a "best of both worlds" approach. I needed VScode in Studiolab.

Code-server to the rescue! Code-server is a python library which helps you set up a VS Code server on a machine.

Tools we will be using

• AWS Sagemaker Studiolab
• Conda
• Rasa
• Code-server for VScode

Conda Environment Setup

Let's see how we can connect all these together. We'll start off by creating an empty folder in Studiolab and running the below commands inside that folder:

conda create --name rasa-env python==3.8  
conda activate rasa-env  

python -m pip uninstall pip  
python -m ensurepip  
python -m pip install -U pip  

python -m pip install --upgrade setuptools  
python -m pip install rasa

These commands will create a new Conda environment in Studiolab named rasa-env and install Rasa in it. You can also run conda install openssh if you want SSH access to Git.

To install the VS Code server in this Conda environment, execute the command conda install -y -c conda-forge code-server. Now, you have your own Conda environment with Rasa, code-server and OpenSSH installed.

Of course, we will be maintaining the Rasa code in a Git repository. If someone wishes to pull down the repo, we don't want that person to go through the same hassle of creating the environment, right?.

To make their life easier, we will generate an environment.yml file, which is the Conda equivalent of requirements.txt, using the command conda env export --file environment.yml. Using this file, you can recreate the environment by running conda env create -n rasa-env -f environment.yml.

VScode Setup

Now that we have the environment setup out of our way, we can launch the VS Code server in a new tab and kick off with our Rasa development.

To launch the VS Code server, open a new terminal in Studiolab and execute code-server --auth none.

The above image shows the logs generated after running the code-server command. You can start code-server with authentication as well, which will allow only those who have the password to access the VS Code server.

Copy the URL of your Studiolab environment, which will look something like https://xxxxxxxxxxxxxxxxxx.studio.us-east-2.sagemaker.aws/studiolab/default/jupyter/lab and replace the /lab in the end with /proxy/8080/ to create the VS Code server URL.

Enter this new URL in a separate tab to navigate to the VS Code running in Studiolab. Wait for 3-5 mins for the server to come up. Once the server is up, we will see that the text in the terminal of VS Code is blurred.

To rectify this, turn off gpu acceleration for VS Code terminal using the VS Code setting terminal.integrated.gpuAcceleration.

Rasa Development

Finally, activate the rasa-env Conda environment by running conda activate rasa-env to activate our Rasa environment for development.

Let's get our hands dirty with Rasa now. To initialize a sample Rasa project, run rasa init in the folder. Once the initialization is done, we will have the code for a basic bot in the folder.

Next, we have to generate the NLU model for the bot. rasa train will generate the model and dump it in the models subfolder in .tar.gz format.

Now, the moment of truth – run rasa shell. If everything goes well, we should have our bot up and running in the VS Code server, which in turn is running in the Studiolab runtime.

Do not forget to clean up everything after you are done by stopping the VS Code server in the Studiolab runtime and finally stopping the runtime itself.

Wrapping Up

Thats it! You have your very own, completely free, cloud-based chatbot development environment where you can run compute intensive workloads via the VS Code interface.

If you learned something new or enjoyed reading this article, please share it so that others can see it. Until then, see you in the next post!

You can also find me on Twitter @Live_ByThe_Code.

And you can read more articles like this here.

I find that personalizing my IDE helps me enjoy the time I spend using it more. I want to share that same spark of joy with you all, and have been searching for and testing out the best extensions to download. And many of these will help you be more productive.

This article goes beyond theming extensions, so I suggest picking out a theme first. Or try out my current favorite theme, Dracula Refined.

Indent Rainbow

Indent Rainbow is a great tool to add color and productivity to your setup. It can also help serve as an alignment check for your indentation. Each indentation is given an alternating rainbow color.

Indent Rainbow

Bonus: Indent Rainbow Palettes

Want custom colors in your Indent Rainbow? Check out Indent Rainbow Palettes by Evondev.

After installing Indent Rainbow, install this extension and follow the outlined steps to select a new gradient palette.

Indent Palettes1

Indent Palettes2

Bracket Pair Colorizer

This will add rainbow colors to brackets, and matching brackets will have the same color. This extension has saved me a number of times when looking for a missing or extra bracket.

The Bracket Pair Colorizer is another popular extension with over 4 million installs.

Depreciation Notice for 2022

This extension has recently become depreciated. This is because of upgrades to VSCode allowing for a bracket pair colorization setting. This can be toggled on with "editor.bracketPairColorization.enabled": true in your user settings.

The improved performance of this feature makes it a better choice, but if you'd prefer to not edit your user settings, I'd suggest looking for extensions that handle this for you such as Bracket Pair Colorizer or Rainbow Brackets.

Colorize

Colorize visualizes color variables by highlighting them with their color value. This is a handy timesaver for translating hex codes and variable names.

Photo Credit: Colorize

Peacock

Peacock provides optional window colors. It is great for managing multiple workspaces. It can be easy to forget which workspace you are in when jumping between similar windows, but not with the bright colors provided by Peacock. You can even customize workspace colors.

Photo Credit: Peacock

VSCode Icons

Adding icons can help when navigating through your folders. VSCode Icons has an extensive library of icons matching a variety of file types.

For example, you can easily see if you are selecting a TypeScript file or a JavaScript file based on the icon. It also adds an extra touch of color and detail to folder structures.

Photo Credit: vscode-icons

TODO Highlight

TODO Highlight will customize your list of TODO comments and make them pop with color. It can be easy to overlook commented out code, but not with this extension, as it is difficult to overlook text that is bright orange.

TODO and FIXME are built in keywords. You'll have the option to customize the color of these and add additional keywords.

Photo Credit: TODO Highlight

TL;DR

Here is a condensed list of the extensions mentioned in this article.

• Indent Rainbow
• Bracket Pair Colorizer
• Colorize
• Peacock
• VSCode Icons
• TODO Highlight
• Dracula Refined Theme

I hope these extensions will bring a rainbow of colors to your VSCode, too.