Supercharge Your Dev Workflow: How Refact's AI-powered Code Completion Boosts Developer Productivity

Introduction

Artificial Intelligence (AI) has so much transformed and impacted almost every area of software development. A recent survey by Stack Overflow Developer Survey 2023 revealed that a staggering 70% of developers already use or plan to use AI in their workflows, while 44% use AI tools now and 26% plan to soon. This trend is influenced by the immense potential of AI to address some of the most pressing challenges developers face today.

One of the biggest challenges developers face is the amount of code that needs to be written and maintained. A study by tidelift.com found that the average developer spends a significant portion of their time (22%) on repetitive coding tasks. This not only hinders productivity but also increases the risk of errors.

Imagine having a tool that is intelligent enough to understand the context of your codebase, and then uses the knowledge to provide relevant code completion suggestions, analyze your code quality, and fix your bugs without sacrificing your privacy.

In this article, you will learn how an AI-powered coding assistant boosts the developer’s productivity right in your Integrated Development Environments (IDEs) of choice by eliminating redundant tasks.

If you are excited as much as I am writing this article, then let’s dive right in

What is Refact?

Refact is an open-source AI-powered coding assistant that allows you to use Large Language Models (LLMs) with blazing-fast code completion, powerful code improvement tools, and chat.

By leveraging the capabilities of machine learning, Refact automates repetitive tasks, suggests code completions, and identifies areas for improvement. This allows you as a software developer to focus on more strategic and creative aspects of software development, ultimately leading to a significant boost in your productivity.

As of the time of writing this article, Refact is supported as an extension (plugin) for both VS Code and JetBrains IDEs. However, they promised to add support for other IDEs too.

With over 1.3k stars on GitHub, more than 40k downloads and installs on both VS Code and JetBrains IDEs, and more than 50 positive reviews, it is worth saying that Refact is part of the best product in the AI coding assistant market.

In the next section, we will take a look at the features that make Refact stand out from other AI coding assistant tools.

Key Features of Refact

Refact is not just yet another GenAI coding assistant, it is different because it offers the following key features in addition to the functionalities commonly found in such tools as code documentation generation and update, predictive coding assistance, understanding and responding to developer queries in natural language, and personalized coding assistance based on past interactions.

Blazing-fast Code Completion with Context

Refact’s code completion goes far beyond simply suggesting the next letter or word. It utilizes both open-source and closed-source AI models to understand the broader context of your code. This “fill-in-the-middle” technique analyzes the surrounding code structure and project patterns to provide intelligent suggestions that align well with your coding intent. This not only saves you time by reducing typing and typographical errors but also ensures consistency and adherence to your project design.

Powerful Code Improvement Tools for Enhanced Quality

Refact is not just about speed; it’s also about code quality. It enables you to write cleaner and more efficient code and automatically identifies areas for improvement, suggests refactorings to enhance readability and maintainability, and even fix bugs.

Customizable Privacy Options: Security Meets Convenience

In today’s data-driven world, security is paramount. Organizations are skeptical about embracing AI because of privacy concerns according to this survey. The survey found that 85% of C-suite and IT professionals expressed concerns about GenAI’s privacy and security risks.

However, Refact understands this and prioritizes user privacy. Unlike some assistants that require full code access, Refact offers customizable privacy options. You can choose to self-host the models on your machine, ensuring your code never leaves your environment.

Alternatively, you can adjust privacy settings to control the level of code sharing with the assistant. This flexibility allows you to strike the perfect balance between convenience and security. The image below demonstrates this:

Refact Supports Various AI Models

Refact also allows you to choose the AI model that best suits your specific needs and coding style. Whether you prefer the versatility of GPT-4, the efficiency of Code LLama, or the expertise of StarCoder, Refact has you covered. This level of customization allows you to leverage the strengths of different AI models and optimize your development workflow. Check out a list of all available models Refact currently supports on GitHub.

Integrated AI Chat

Refact features an integrated AI Chat that allows you to interact with the assistant using natural language. This means you can ask coding questions in plain English and get clear answers seamlessly.

Context-aware Suggestions for Effortless Coding

Refact’s context-aware suggestions are designed to seamlessly integrate with your coding style. It analyzes your code in real time, understanding the variables, functions, and overall structure. Based on this comprehensive understanding, it provides relevant and accurate suggestions that enhance your coding experience.

RefactAI Features at a Glance

In the next section, I will walk you through the step-by-step installation process of Refact so you can take advantage of the benefits of AI-assisted coding.

Getting Started with Refact

In this section, we will take a look at installing Refact on both VS Code and JetBrains IDE.

First, you need to create an account with Refact. To do this, navigate to the Refact website and click on “Get Started“.

Next, choose your preferred sign-in method. In this case, I used my GitHub account to sign in

Next, you can proceed with installing the plugin on your code editor of choice.

How to Install Refact on VS Code

To install Refact on VS Code, you will need to get the extension from the Visual Studio extension Marketplace, then click on “Install“

That would prompt you to open VS Code. Click on “Open Visual Studio Code“

How to Install Refact on JetBrains IDE

To install Refact on JetBrains, you will need to get the plugin from the JetBrains Plugin Marketplace, and then click on “Get“

Then, select your current IDE, then click on “Download“

After successfully downloading the plugin, follow the steps below to install it:

1. Open your IDE,
2. Press Ctrl+Alt+S to open the IDE settings.
3. Select Plugins, click the settings icon, and then click Install Plugin from Disk.
4. Select the plugin archive file and click OK.
5. Click OK to apply the changes and restart your IDE if prompted.

Refact in Action

In this section, I will walk you through a practical demonstration of how Refact can boost your productivity as a developer. I will prompt Refact to explain this code snippet below:

const rgbToHex = (r: number, g: number, b: number): string => {
  // Clamp the values to the range [0, 255]
  r = Math.max(0, Math.min(255, r));
  g = Math.max(0, Math.min(255, g));
  b = Math.max(0, Math.min(255, b));

  // Convert the clamped values to hexadecimal strings
  const rHex = r.toString(16).padStart(2, '0');
  const gHex = g.toString(16).padStart(2, '0');
  const bHex = b.toString(16).padStart(2, '0');

  // Concatenate the hexadecimal strings and return the result
  return `#${(rHex + gHex + bHex).toUpperCase()}`;
};

The code above is a function named rgbToHex that accepts 3 numbers as parameters and then, converts each number to its respective hexadecimal value and returns them concatenated, and appends # to the start of the returned string.

To do that, open VS Code and then, click on the Refact logo on the Activity Bar. This will display the chat for you.

I will copy-paste the code above and expect Refact to explain what the code does.

Result

Below is the explanation from Refact:

Your rgbToHex function takes three parameters representing the red, green, and blue values of a color and converts them to a hexadecimal color code.

The function first clamps the input values to the range [0, 255] using Math.max and Math.min functions.

Then, it converts the clamped values to hexadecimal strings using toString(16) and pads them with zeros if needed using padStart.

Finally, it concatenates the hexadecimal strings and returns the result in the format #RRGGBB.

If you need more information on the methods used in the function, you can refer to the documentation:

Wrapping Up

In this article, you have learned about Refact – an open-source AI coding assistant for VS Code and JetBrains. I highlighted the features that make it stand out from other AI coding assistants such as fast code completion, context-aware suggestions, powerful code improvement tools, customizable privacy options, support for various AI models, and many more.

You learned how to install the plugin from various marketplaces such as the VSCode Extension Marketplace and the JetBrains Plugin Marketplace.

Finally, I walked you through a practical demonstration of what Refact can do to boost developer productivity.

Get started with Refact today

Follow @eunit99 for more contents like this

Further Readings