ADVERB (vscode-extension - frontend)

For this vscode extension a backend API service is required: see https://github.com/giganticode/adverb-backend

This vscode extension for javascript/typescript makes it possible to increase code readability by renaming code symbols or by folding code lines and showing the summary instead, without changing the underlying source code file. The "renames" are only visual changes: the original symbol name gets hidden, while the "new" name is displayed instead of the original name. The same is valid for the "foldings": the folded lines are collapsed and instead of them a summary gets visualized, but again the original source code does not get changed.

Finally, source code parts can be search by using natural language.

Features

Local renaming of code symbol names without effective code changes

For each source code file, it can be decided individually whether all symbol names should be "renamed" automatically using a renaming technique, or only individual manually selected symbols.

To "rename" a single symbol locally, you can use the command "Adverb: Rename single symbol (locally)", that can be executed via the context menu, the command palette or the shortcut Shift + F2. To "rename" all symbols of a source code file, the corresponding command "Adverb: Rename all symbols (locally)" can also be executed from the context menu, from the command palette or via the key combination Alt + Shift + F2. After executing the respective command, a selection window appears in which the respective renaming technique can be selected.

The following renaming techniques can be used to rename the source code symbols:

manual renaming (only for single symbols)
get new name considering the code context, automatically generated by a ML model
use function/method summary as new name, automatically generated by a ML model (only for functions/methods)
remove vowels
keep only the 1° letter, upper-case letters and special characters + the first letter following
change to kamelCase
change to PascalCase
change to snake_case
change to kebab-case
change to UPPERCASE
change to lowercase

All "renamings" are stored per source code file in the json file adverb.config.json in the folder .vscode of the workspace. Furthermore, all active "renamings" of the currently opened source code file are displayed in a treeview in the sidebar, from which they can also be edited or removed afterwards.

Tip: When editing or clicking on a source code line, the original symbol name is always displayed.

Tip: For each source code file where there is at least one renaming defined, a file decoration ("🚧") is shown in the file explorer.

Fold code lines and display code summary instead

With the command "Fold lines and show summary", the selected lines are folded and a summary, which is created by a ML model, is displayed. This command can for example be used to collapse method/function bodies and to show a summary instead, but also for each other range of code lines. The command can be executed from the context menu, from the command palette or via the shortcut Alt + k.

Tip: A code summary is also automatically shown above each method, giving a summary of the method/function body.

Display code summary above method/function signature (codelens)

When opening a code file, a code summary gets displayed above each method/function signature (using codelens). The summary is created by ML model from the backend api. When clicking on the summary, the user can select among the following two options: either fold the selected method and display the code summary instead (see previous paragraph), or to add the summary as a comment to the original source code file above the method/function signature.

Show code symbol definition

In the code editor, the extension shows for each code symbol of the current focused row the line number, where the current focused code symbols are definite. However, these annotations are only visualized, when the definitions are outside the current viewport of the editor. If the definitions are inside the current viewport, they are only highlighted. Obiously, a mixed application of this feature can appear, when for example on code symbol of the current focused code line is inside the viewport, and another one is outside the viewport.

Search in natural language (NL) for source code parts

By using the "Search code with natural language" command you can search for code parts using natural language. The search procedure gets executed by ML model. When executing the command, a new tab in your vscode-window appears, where the search query can be entered. The search results are shown below for each matching source code file and code part of the current workspace. When hovering a search result, the relevant code parts gets shown in a tooltip. When clicking on a search result, the respective source code file gets opened next to the search window and the editor jumps to the starting line of the code part. In the search window also a re-indexing of the current workspace can be started by clicking on the respective button. The search command can be executed from the command palette or via the shortcut Alt + s.

Extension Settings

This extension contributes the following settings:

adverb.codeLensEnabled: enable/disable code lens (method/function body summary above each method/function signature)
adverb.fileDecorationsEnabled: enable/disable file decorations ("🚧") for active renamings in a source code file
adverb.renamingModel: choose the ML model for renaming ("huggingface/CodeBERTa", "microsoft/codebert-base-mlm", "Salesforce/codet5-base")
adverb.searchModel: choose the ML model for NL->PL search ("microsoft/CodeBERT", "stanford/ColBERT")
adverb.backendUrl: API backend url
adverb.nameUrl: code name backend path
adverb.summaryUrl: code summary backend path (single)
adverb.summariesUrl: code summaries backend path (batch)
adverb.searchUrl: code search backend path
adverb.searchIndexUrl: code search index name
adverb.searchBatchSize: code search batch size (0=split code automatically by method bodies using AST, n=number of lines for code splitting)
adverb.excludeDirectories: determine the folder names that sould not be considered for search
adverb.fontWeight: font weight for the "renamed" symbol
adverb.fontStyle: font style for the "renamed" symbol
adverb.fontSize: font size for the "renamed" symbol
adverb.margin: margin of the "renamed" symbol
adverb.padding: padding of the "renamed" symbol
adverb.borderRadius: border radius of the "renamed" symbol
adverb.border: border of the "renamed" symbol
adverb.backgroundColor: background color of the "renamed" symbol
adverb.fontColor: font color for the "renamed" symbol

Enjoy!