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.
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.
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.
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.
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.
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
.
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 fileadverb.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 urladverb.nameUrl
: code name backend pathadverb.summaryUrl
: code summary backend path (single)adverb.summariesUrl
: code summaries backend path (batch)adverb.searchUrl
: code search backend pathadverb.searchIndexUrl
: code search index nameadverb.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 searchadverb.fontWeight
: font weight for the "renamed" symboladverb.fontStyle
: font style for the "renamed" symboladverb.fontSize
: font size for the "renamed" symboladverb.margin
: margin of the "renamed" symboladverb.padding
: padding of the "renamed" symboladverb.borderRadius
: border radius of the "renamed" symboladverb.border
: border of the "renamed" symboladverb.backgroundColor
: background color of the "renamed" symboladverb.fontColor
: font color for the "renamed" symbol
Enjoy!