Best VS Code Plugins to Use with GitHub Copilot

The 2023 developer survey conducted by Stack Overflow reports that Visual Studio Code is the most used code editor for software developers ranging from professionals to those learning to code. It widely is known for being lightweight, for its extensibility, and has a vast ecosystem of plugins that are free and available, suitable for several programming languages. Visual Studio code is developed by Microsoft and is available for Windows, Linux, and macOS.

Some key features that make it stand out from the rest are:

• Syntax Highlighting: a fundamental feature that highlights different parts of your code with distinct colors, making it visually appealing and more readable. It helps in quickly identifying different elements such as keywords, variables, and strings in your code.

• Intelligent Code Completion: Provides context-aware suggestions, helping you write code faster and with fewer errors. These suggestions often include entire code blocks or relevant function calls, saving you from manually typing out lengthy and error-prone code.

• Debugging Support: Debugging support in VS Code is essential for identifying and resolving issues in your code. It allows you to set breakpoints, step through code, inspect variables, and analyze the program's behavior during runtime. This feature is crucial for efficient troubleshooting and ensuring your code functions as intended.

• Git Integration: Git integration is invaluable for developers working with version control systems like Git. It allows you to manage code changes, track revisions, review differences between versions, stage changes, and commit them to your Git repository directly from within the editor. This streamlines the collaboration process and ensures your codebase remains organized and version-controlled.

• Customizability: Customizability empowers developers to tailor their coding environment to their preferences. You can change the editor's theme, customize keyboard shortcuts, and adjust various preferences to create a workspace that suits your workflow and style. This flexibility ensures a comfortable and efficient coding experience.

• Extension Ecosystem: The wide variety of extensions is what makes VS Code stand out for developers. These extensions cover a wide range of functionality, including support for additional programming languages, themes for visual customization, new debuggers, and integration with various services, allowing you to expand your toolset and adapt your development environment to your specific needs, enhancing your productivity and efficiency.

Now that you know what VS code is, and what it offers. Imagine a combination with GitHub Copilot, an AI-powered code tool developed in collaboration with OpenAI(the makers of ChatGPT). When these two powerful tools are combined, developers can significantly boost productivity, streamline their coding workflow, and develop high-quality software more efficiently, lowering development costs.

This article will give you a deep dive into working with VS code and GitHub Copilot. We'll explore the importance of using VS Code plugins in conjunction with GitHub Copilot, along with a selection of the top VS Code plugins to enhance your experience.

The Importance of VS Code Plugins

Visual Studio Code plugins, or extensions, enhance the capabilities of your code editor. They help it work better with different programming languages and make your coding process smoother. When you use these extensions alongside GitHub Copilot, you get some great benefits. Your code becomes better, you can work more effectively with others, your code stays neat and organized, and your overall experience as a developer gets easier and more enjoyable. By leveraging VS Code plugins, you can tailor your development environment to suit your specific needs, ensuring that it complements GitHub Copilot seamlessly. 

1. Customization and Adaptability

You can select and install only the extensions that are relevant to your work, helping you create a personalized development environment. With the "Settings Sync" feature, you to synchronize your VS Code settings, themes, and extensions across multiple machines, making it easy to maintain a consistent coding environment wherever you go or on any device.

2. Language and Framework Support

Doesn’t matter if you're working with JavaScript, Python, Java, or a less popular language, there's likely an extension available to provide syntax highlighting, code completion, debugging support, and more. These language-specific plugins simplify the development process by providing context-aware features. The Python extension is an excellent example. It provides support for Python development, offering features like code completion, linting, debugging, and Jupyter Notebook integration.

3. Enhanced Productivity

Waka Time VS code helps monitor your productivity daily and produces these metrics in readable data groups. You can find out more about your coding habit, and how much you spend on your projects, making the software process a lot more fun and interactive.

4. Code Quality and Consistency

ESLint is a popular choice for maintaining code quality. It is a linter for JavaScript and TypeScript that identifies and helps you fix common coding errors and enforces coding style guidelines. Consistent and high-quality code is essential for maintainability and collaboration.

5. Collaboration and Teamwork

Live Share enables real-time collaborative coding and debugging within VS Code. Team members can simultaneously edit code, view, and debug together, facilitating seamless collaboration.

6. Extensibility

GitLens showcases the extensibility of VS Code. It offers advanced Git features and integrates them directly into your code editor, enhancing your version control capabilities without leaving the editor.

Use Cases and Examples

Some popular plugins for your usage with Github Copilot that you should know. Shedding light on how these tiny yet mighty extensions can transform the way you code, as well as how to install them.

1. Code GPT: Chat & AI Agents:

CodeGPT serves as your AI pair programmer, readily available in your VS Code environment. This AI assistant empowers you with intelligent code suggestions and completions, making coding faster and more efficient. But it doesn’t just end there, with Code GPT you have the opportunity to design your own AI copilots, each with specific context information. This means you can create custom AI assistants tailored to your projects. For instance, if you're developing a web application, you can design an AI copilot with expertise in web development. This AI agent can provide you with context-aware code suggestions, helping you write code that aligns perfectly with your project requirements. You can get seamless integration with preferred AI providers and simplified AI API usage. It offers enhanced AI features through CodeGPT+, including context management and GitHub synchronization. Users can choose between free and paid plans depending on their needs, and cost considerations apply when using your API keys.

Features:

1. CodeGPT Chat: Easily initiate a chat interface by clicking the dedicated icon in the extensions bar.
2. Code Autocomplete: Select from a variety of models to receive precise and tailored code suggestions.
3. CodeGPT Code Explanation: Instantly open the chat section to receive a detailed explanation of the selected code from CodeGPT.
4. CodeGPT Code Refactoring: Quickly open the chat section to have CodeGPT intelligently refactor the selected code.
5. CodeGPT Code Documentation: Swiftly open the chat section to generate comprehensive documentation for the selected code with CodeGPT.
6. CodeGPT Bug Detection: Prompt CodeGPT to open the chat section and identify any issues within the selected code.
7. CodeGPT Unit Testing: Request CodeGPT to open the chat section and generate unit tests for the selected code.
8. Run Code Interpreter (Beta): Effortlessly create and open a notebook (.ipynb file) for code execution using the Notebook Extension with CodeGPT.

Installation:

• After installing into your vs code, go to the settings tab, then extension, and CodeGPT.

• To input your API Key, simply press cmd+shift+p(Mac) or ctrl+shift+p(windows) and search for "CodeGPT: Set API KEY." Your API KEY will be securely stored.

2. GitHub Copilot Labs:

GitHub Copilot is already a game-changer for developers, but its journey is just beginning. GitHub introduced GitHub Copilot Labs, a companion extension for GitHub Copilot that opens the door to experimental and upcoming features. While GitHub Copilot continues its path toward general availability, Copilot Labs becomes the testing ground for machine learning applications designed to enhance the developer experience.

Features

Copilot Labs currently features a VS Code sidebar with four distinct experiments: code explanation, code translation, IDE Brushes, and test generation. Once you install the Copilot Labs extension, you'll notice a Copilot icon in the VS Code sidebar. Clicking it reveals the sidebar, with each experiment neatly organized in separate panels.

1. Code Explanation: Understanding code is a pivotal part of software development. Copilot Labs lets you highlight a block of code and ask GitHub Copilot to explain it in plain language. Whether you're diving into unfamiliar codebases or exploring new libraries, this feature breaks down the code for you.
2. Create Custom Prompts: With Copilot Labs, you can customize prompts and stop sequences, opening the door to new applications that use Codex to interpret code.
3. Translate Code: Language translation in Copilot Labs works similarly to the explain feature. You highlight a piece of code, select the language you want to translate it into and let Copilot work its magic. While translations may not be perfect, they serve as excellent starting points for developers adapting code logic to different languages.
4. Test Generation: One of the remarkable features of Copilot Labs is TestPilot. It takes the hassle out of writing unit tests by leveraging GitHub Copilot's AI technology to suggest tests based on your code and documentation.

Installation

To install Copilot Labs, you need to accept the GitHub Next Pre-Release License Terms. Additionally, you should have access to GitHub Copilot itself, which you can sign up for on the GitHub website. Then, you'll need to install both the GitHub Copilot extension and the GitHub Copilot Labs extension for VS Code.

3. ChatGPT - EasyCode

ChatGPT - EasyCode is one of the free AI code plugins trained on both GPT-4 and GPT-3 data. You can also add your OpenAI key in the extension settings. It also offers codebase indexing that works by using embeddings to create a vectorization of your codebase, which is then used to make queries.

Features:

1. Relevant Code Generations: EasyCode's AI generates code that's directly applicable to your project, ensuring that the suggestions are tailored to your codebase.
2. Multiple AI Models: It supports GPT-4, GPT-3.5, and Claude-Instant-1, providing flexibility in choosing the AI model that suits your needs.
3. Web Browsing: Access external resources from the internet right within the extension to find information that complements your coding tasks.
4. Conversation History: Easily revisit previous conversations, with your past interactions conveniently stored locally.
5. Run Code Blocks: Effortlessly execute code blocks and have the AI interpret them, saving time and effort.
6. Data Security: Your code remains private; EasyCode prioritizes your data security by not storing your code.
7. In-Line Autocompletions: Enjoy the convenience of in-line code autocompletions as you code, minimizing manual typing.

Installation:

1. Creating an account gives you a dedicated account with EasyCode separate from your OpenAI, or GitHub logins. 
2. Index your codebase with the "Ask Codebase" feature. Wait for the indexing to be completed, and you will see an indicated notification on the right bottom tab. You can unselect/add folders/files that are not relevant to what you are interested in.

4. ChatGPT - Genie AI

ChatGPT - Genie AI, offers a personal AI assistant for a more efficient and productive coding experience. Offering support for GPT-4, GPT3.5, GPT3, and Codex models. You can create new files, and view diffs with one click.

Key Features

1. Azure OpenAI Service Support: You can seamlessly use your own Azure OpenAI Service deployments with Genie.
2. Conversation History: Store your conversation history on your disk and continue it at any time, providing a valuable reference for your coding journey.
3. Compile-Time Error Assistance: Use Genie in the Problems window to explain and suggest fixes for compile-time errors, streamlining your coding process.
4. Code Comparison: Easily compare your code with Genie's suggestions within the editor with a single click.
5. Personalization: Rename and personalize your assistant to make it truly yours.
6. Streaming Answers: Get real-time streaming answers to your prompts in the editor or sidebar conversation, enhancing your problem-solving capabilities.
7. Streaming Conversation Support: Stop the response to save your tokens, ensuring you have control over your interactions.
8. Conversation Export: Export your entire conversation history at once in Markdown format for easy documentation.
9. AI Models: Utilize GPT-4, GPT-3.5, GPT-3, or Codex models via your OpenAI API Key, allowing you to access the power of different AI models.

Installing

1. Visit the vs-code plugin marketplace, and install the plugin.
2. Obtain your API Key from OpenAI's website and refer to OpenAI's official documentation for available model details.
3. Select a code fragment and effortlessly ask any coding question.
4. After asking your question, provide your API Key for seamless assistance.

5. Sourcery: Your AI-Powered Code Partner

Sourcery is your intelligent pair programming assistant, to help you enhance your code effortlessly. It does not only review your code but also suggests improvements, allowing you to focus on writing new code and minimizing the time spent on code maintenance.

To use Sourcery in your IDE, CLI, as a pre-commit hook, or as part of your CI, you'll need to set up a Sourcery account.

• Sign Up: Visit the sign-up page on the Sourcery website and register an account with your email address, Google account, or GitHub account.

• Sourcery Pro: Upon signing up, you'll automatically receive a 2-week free trial of Sourcery Pro, enabling its use on non-open source projects.

Features

1. Code Review: Sourcery provides an automated code review, highlighting areas for improvement and suggesting enhancements.
2. Coding Assistance: It assists you with writing new code or modifying existing code, improving your coding experience.
3. Code Queries: You can ask questions about your code and get detailed answers, enhancing your understanding of your project.
4. Testing and Documentation: Sourcery helps you generate tests and docstrings for your code, improving its quality and maintainability.
5. Branch Code Review: Review uncommitted code or changes made in a specific branch, ensuring your code is error-free.
6. In-Line Suggestions: While working on your code, Sourcery offers in-line suggestions that improve code readability and adherence to best practices for over 160 Python and 40 JavaScript/TypeScript best practices.
7. Code Quality Metrics: Quickly assess your code's quality through quantitative insights, allowing you to maintain high-quality code.

Installation:

1. After you have installed Sourcery, you'll need to log in to start using it. Access the Sourcery section in the sidebar by clicking on the hexagon logo, and following the prompts to log in.
2. You'll be directed to their website to connect to your account. If you don't have an account, creating one grants you a 14-day free trial of Sourcery.
3. After logging in, you can opt-in to use the sections of Sourcery that rely on third-party large language models (Sourcery Chat, Recipes, and Code Review). You can still use Sourcery locally for Rules and In-Line Suggestions without opting to use these features.

You can also install the Sourcery command-line interface by running:

pip install sourcery

For open-source projects, you don't need to log in; Sourcery will detect your repository's open-source status. Once installed, you can log in using the command:

sourcery login

You can also log in by providing your token:

sourcery login --token INSERT_YOUR_TOKEN

Optionally, you can create a .sourcery.yaml config file with sensible defaults by running:

sourcery init config

You can configure Sourcery as a pre-commit hook by running:

sourcery init pre-commit

For the CI setup, you can use:

sourcery init ci

To review a file or directory recursively, use the following command:

sourcery review example_file.py

To apply the changes suggested by Sourcery, use the --fix option:

sourcery review --fix {file_or_directory}

Tips and Tricks

Here are some tips and tricks to help you get the best of these AI tools.

1. Explore the Right Plugins:

Look for plugins that enhance your preferred programming language, provide useful debugging tools, and offer version control, and intelligent code completions based on the code context

2. Customize Your Workspace:

Take advantage of the vast ecosystem of plugins and customize your workflow to ensure optimal productivity for your time. Take the time to explore it and find extensions that add new languages, themes, debuggers, and services to your editor. You'll likely discover plugins that can improve your productivity and work seamlessly with GitHub Copilot.

3. Stay Updated: 

Keep your plugins up to date. Updates can be released often in most cases to improve functionality, fix bugs, and enhance compatibility. Regularly checking for updates can ensure your plugins work seamlessly with GitHub Copilot.

4. Experiment and Test:

Don't hesitate to experiment with different combinations of plugins. GitHub Copilot is a versatile tool, and you might find that certain plugin combinations work better for specific programming tasks.

5. Learn from Others:

Join developer communities or forums related to your programming language or technology stack. These communities often share their favorite plugins and tips for using them effectively. Learning from the experiences of others can be incredibly valuable.

Conclusion

GitHub Copilot is a game-changer for developers, and combining it with the right set of VS Code plugins can significantly enhance your coding experience. As we've seen, VS Code plugins play a pivotal role in enhancing this collaboration, bringing additional value to your coding experience and making your development process smoother and more efficient. By leveraging the power of these plugins alongside GitHub Copilot, you can write high-quality code faster and with greater ease.