Using CodeFuse in Visual Studio Code

From data to large model application, on November 25th, Hangzhou Yuanchuang Conference was held to share development tips.

As a widely popular code editor among programmers, Visual Studio Code occupies a mainstream position in front-end development and various scripting language development. CodeFuse Intelligent R&D Assistant has specially developed a plug-in for VS Code. You can use CodeFuse as long as the plug-in is installed. Various functions provided, let’s take a look at how to use the CodeFuse plug-in in VS Code?

CodeFuse official website : https://codefuse.alipay.com/

CodeFuse currently supports installation in 10 IDEs, including Alipay Mini Program Cloud Development , Visual Studio Code (hereinafter referred to as VS Code), and 8 IDEs in the JetBrains series , namely IntelliJ IDEA, PyCharm, WebStorm, GoLand, CLion, DataGrip, PhpStorm and RubyMine. This article will introduce how to install and use the CodeFuse plug-in in local VS Code.

Note : Currently, the CodeFuse plug-in is only supported in VS Code 1.75.0 or above.

Prerequisites

Before installing the CodeFuse plug-in, you need to download and install Visual Studio Code .

Install plugin

Currently, the CodeFuse plug-in in VS Code only supports downloading the plug-in installation package for installation. After completing the installation, you need to complete the login and pass the application to use the plug-in. The steps to install the plugin are as follows.

Note : The CodeFuse plug-in installation package currently available for download from the official website is a Beta version, so stay tuned for the official version.

On the CodeFuse official website , download the Visual Studio Code plug-in installation package.
Open VS Code, click the icon in the left navigation bar of the editor, click the icon again , and select Install from VSIX… .
Select the downloaded CodeFuse-xxxvsix file and click Install .
In the left navigation bar of the IDE, click the icon to enter the plug-in panel.
In the Plugins panel, click Login .
In the pop-up window, click Open , then use Alipay to log in to the CodeFuse official website and apply for a trial.

You can choose one of the two application portals below to apply.

- Application entrance one: Apply for trial on the homepage of CodeFuse official website.
- Application entrance two: Apply for experience in the plug-in panel.

In the trial application pop-up window, fill in the application reason, read and check the User Service Agreement and Privacy Agreement, and click Submit Application .
After the application is approved, check the plug-in panel as shown on the left side of the picture below to start using it.

Use plugins

The CodeFuse plug-in supports the following two usage modes, and the operations supported by the corresponding modes are as follows.

usage pattern	Support operations
IDE code editing area	Type the comment text and press Enter to complete the code
right click	After selecting the code, right-click and select Add Comment After selecting the code, right-click and select Explain Code After selecting the code, right-click and select Generate Single Test After selecting the code, right-click and select Code Optimization

The CodeFuse plug-in can provide code suggestions for multiple programming languages and various frameworks, and its performance is particularly outstanding in Python and Java. Next, we will use Java as an example to demonstrate how to use the plug-in in VS Code.

code completion

The code completion function provides real-time code completion services based on massive data, including inline completion (single-line completion) and fragment completion (multi-line completion). Currently, this function supports multi-line and single-line code completion in five mainstream programming languages, including Java, Python, TypeScript, JavaScript, and Go, as well as single-line code completion in 40 other programming languages.

Currently, CodeFuse supports two triggering methods: automatic code completion and manual code completion. After turning off automatic code completion, you can still trigger code completion manually using the shortcut key (Alt/Option + \). The code completion function also supports switching multiple completion results. Currently, it supports switching up to 2 results. You can use the following shortcut keys to switch completion results.

Windows key	Mac keys	illustrate
`Alt]`	`Option]`	Show the next completion result.
`Alt[`	`Option[`	Show the previous completion result.

Single line code completion

Create a Java file in the IDE editor.
In Java files, CodeFuse will be able to provide completion hints for what you type based on the context of the code. For example, if you press the Enter key after the following sample code , the plug-in will give a code completion prompt.arr[i] = arr[j];

public class BubbleSort {
    public static void bubbleSort(int[] arr) {
        for (int i = 0; i < arr.length - 1; i++) {
            for (int j = 0; j < arr.length - 1 - i; j++) {
                if (arr[j] > arr[j + 1]) {
                    swap(arr, j, j + 1);
                }
            }
        }
    }
    private static void swap(int[] arr, int i, int j) {
        int temp = arr[i];
        arr[i] = arr[j];  ## 在此处按下回车触发补全，也可使用快捷键（Alt/Option + \）主动触发补全

    }
}

To accept code completion suggestions, press Tab the button .

Multi-line code completion

The plug-in also supports entering comment text to complete multi-line code completion. For example, type the following comment content and press the Enter key. CodeFuse will automatically generate multiple lines of code based on the comment content, and the generated code will be displayed in gray text.

/* 
* 判断字符串是否为英文
*/

To accept code completion suggestions, press Tab the button .

After typing and pressing the Enter key, you can see the status of content generation in the lower right corner of the editor.

- The content is being generated, and a circle animation and running prompt will be displayed.
- After the content is successfully generated, the system will display the CodeFuse icon.

Turn off automatic code completion

The automatic code completion function is enabled by default. You can turn off this function in the settings of the plug-in panel to prevent automatic triggering of single or multi-line code completion.

Single-line code completion: For example, type a function name in the editor and press the Enter key.
Multi-line code completion: For example, type a comment text in the editor and press the Enter key.

Note : After turning off automatic triggering of code completion, you can still use Alt/Option + \ shortcut keys to trigger code completion manually.

explain code

Create a Java file in the IDE editor.
Select the code fragment that needs to be interpreted in the Java file.
Right-click the mouse and select CodeFuse: Explain Code , and the plug-in will generate a code explanation in the dialog window on the left.

add notes

Note : Currently, the model's annotation generation function has relatively complete support for the entire function level, so it is recommended that you give priority to generating annotations at the function level.

Create a Java file in the IDE editor.
Select the code fragment that needs to be commented in the Java file.
Right-click the mouse and select CodeFuse: Add Comment , which will automatically generate comments on the selected code.

Generate single test

Create a Java file in the IDE editor.
Select the code snippet that needs to generate a unit test in the Java file. For example, generate a single test for the following code snippet:

public class Conversion {   
    public static byte binaryToByte(final boolean[] src, final int srcPos, final byte dstInit, final int dstPos,
            final int nBools) {
        if (src.length == 0 && srcPos == 0 || 0 == nBools) {
            return dstInit;
        }
        if (nBools - 1 + dstPos >= 8) {
            throw new IllegalArgumentException("nBools-1+dstPos is greater or equal to than 8");
        }
        byte out = dstInit;
        for (int i = 0; i < nBools; i++) {
            final int shift = i + dstPos;
            final int bits = (src[i + srcPos] ? 1 : 0) << shift;
            final int mask = 0x1 << shift;
            out = (byte) ((out & ~mask) | bits);
        }
        return out;
    }
}

Right-click the mouse and select CodeFuse: Generate Single Test . The plug-in will generate test cases for the selected code in the dialog window on the left.

Code optimization

Based on large model code understanding capabilities and static source code analysis capabilities, CodeFuse supports analysis and understanding of selected code fragments, puts forward optimization and improvement suggestions, and can also directly form code patches based on improvement suggestions to help you write better code. . The steps to use code optimization are as follows.

Create a Java file in the IDE editor, write and select a piece of code that needs to be optimized.
Right-click the mouse and select CodeFuse: Code Optimization . Multiple code optimization suggestions will be provided in the plug-in panel.
Click Optimize the selected code according to the above suggestions to generate optimized code.
Place the mouse on the generated code and click to view the code change Diff.
In the refactoring preview interface, check and click the changed content (Image ①), and then click Apply (Image ②) to replace the code. If you click Discard , you will exit the code Diff interface and abandon this change.

A shortcut

shortcut key

Windows key	Mac keys	illustrate
`Tab`	`Tab`	Take coding suggestions into consideration . Press the Tab key in the editor to use the code generated by the plug-in; press the Esc key in the upper left corner to not accept code suggestions.
`Alt\`	`Option\`	Actively trigger code completion . Press this shortcut key in the editor to manually trigger code completion at the cursor. Note : After turning off automatic trigger code completion, you can still use this shortcut key to trigger completion.
`Alt]`	`Option]`	Show the next completion result.
`Alt[`	`Option[`	Show the previous completion result.

Note : CodeFuse supports custom shortcut keys. If you encounter a shortcut key conflict, you can follow the steps below to modify the shortcut keys.

In the shortcut area of the CodeFuse panel, click Go to Settings .
In the search box on the shortcut keys page, enter CodeFuse to search for shortcut keys, then select the shortcut key and click to edit.

Quick operation

A shortcut	illustrate
clear session Help documentation Jump to web page	In the upper right corner of the plug-in panel, you can do the following: Click to clear all content under the current session with one click. Click to view help documentation. Click to go to CodeFuse official website.
right click	Select the code fragment and right-click to choose to add comments, explain the code, generate unit tests, and optimize the code.
Quickly copy, paste and expand code	In the plug-in panel, place the mouse in the lower right corner of the generated content and you can perform the following operations: Click to replace the selected code with the generated code. For specific steps, see Optimizing Code . Click to paste the code at the cursor in the editor with one click. Click to copy the code with one click. Click to expand the code with one click so you can read the complete code.
shortcut command	The following two shortcut commands are supported at the bottom of the plug-in panel. `/Explain`:Explain the selected code. `/Test`: Generate test cases for the selected code. The steps to use shortcut commands are as follows: In the editor, select a piece of code and click `/Explain` or `/Test` send the content.

Feedback on code quality

You can rate the content generated by CodeFuse and support like and dislike operations.

Like : If the code generated by CodeFuse meets expectations and the generated code can be used directly, you can like and comment.
Dislike : If the code generated by CodeFuse has obvious loopholes or gives wrong responses, you can click Dislike for feedback to help us continue to optimize the response quality of the model.