Skip to content

Autocompletion support (name extraction)

Nguyen Thuan Hung edited this page Jul 23, 2021 · 4 revisions

Overview

The autocomplete tool suggests the names of variables, functions, and keywords in the editor to help users edit their code more quickly.

The backend of the autocomplete module is located in name-extractor, and is used to extract the names of relevant variables and keywords for a particular cursor location in the editor.

Documentation

Overview

Suggested names for any given cursor location and program are obtained using getNames in src/index.ts. This function returns the relevant suggested names for the cursor context, as well as a boolean flagging whether names should be suggested for that cursor context. For example, if the user is currently typing a comment or declaring the name of a new variable, autocompletion should be turned off. In other contexts, relevant keywords as well as variable names declared in the program that are within scope will be suggested.

Names

Names are obtained using getProgramNames in name-extractor/index.ts. This function takes in a parsed abstract syntax tree and conducts a breadth-first search through the tree collecting the names of variables and functions that are within the scope of the cursor's current position.

For each type of environment (e.g. VariableDeclaration, BlockStatement, ImportDeclaration), names are extracted from within that environment. If the cursor's current position is within the scope of the environment, the children of that node are then traversed as well, using getNodeChildren.

At the same time, the appropriate keywords (e.g. const, param, import) are tagged to each name depending on the type of declaration the name was used in. Notably, anonymous functions declared in the format let foo = () => are marked as functions. While traversing the tree, if names are repeated, the keyword corresponding to the name with the more local scope is used.

Keywords

Suggested keywords are obtained using getKeywords in name-extractor/index.ts. Depending on the environment that the cursor is located, this function chooses the appropriate keywords to suggest:

  • Within a for-statement declaration, only let is allowed
  • Most keywords, e.g. if, are only valid at the beginning of statements
  • Suggested keywords should be limited by the variant of Source currently being used

Documentation Display

Documentation for built-in and library functions are parsed into json files and exported to support documentation display in the editor front end. The script in updateAutocompleteDocs.js parses generated jsdoc html files into the json files, which are then organized for export in src/editors/ace/docTooltip/index.ts. The final object is exported as SourceDocumentation by the package.