Comprehensive Guide to the NutUI VSCode Extension: Code Intelligence, Hover Documentation, and Auto‑Completion

NutUI v3 has been released for a year, and the team has added multi‑technology‑stack support (including React), UI customization, internationalization, and a VSCode code‑intelligence plugin. The article first shows GIFs that compare the library without and with intelligent hints, demonstrating faster documentation lookup and improved development efficiency.

The usage guide explains how to install the nutui-vscode-extension and the vetur plugin in VSCode, with screenshots of the installation process.

Implementation details start with the VSCode activate function, where a hover provider is registered for file types ['vue','typescript','javascript','react'] :

const files = ['vue', 'typescript', 'javascript', 'react'];
export function activate(context: vscode.ExtensionContext) {
  context.subscriptions.push(
    vscode.languages.registerHoverProvider(files, { provideHover })
  );
}

The provideHover function extracts component names from the current line using regular expressions, looks them up in a componentMap , and returns a vscode.Hover with a markdown link to the component’s documentation.

const LINK_REG = /(?<=
{
  const line = document.lineAt(position);
  const componentLink = line.text.match(LINK_REG) ?? [];
  const componentBigLink = line.text.match(BIG_LINK_REG) ?? [];
  const components = [...new Set([...componentLink, ...componentBigLink.map(kebabCase)])];
  if (components.length) {
    const text = components
      .filter(item => componentMap[item])
      .map(item => {
        const { site } = componentMap[item];
        return new vscode.MarkdownString(`
          [NutUI → $(references) 请查看 ${bigCamelize(item)} 组件官方文档](${DOC}${site})\n`, true);
      });
    return new vscode.Hover(text);
  }
};

The componentMap object stores each component’s documentation URL and optional props definitions, generated automatically from the library’s source.

export interface ComponentDesc {
  site: string;
  props?: string[];
}
export const componentMap: Record
= {
  actionsheet: { site: '/actionsheet', props: ["v-model:visible=''"] },
  address: { site: '/address', props: ["v-model:visible=''"] },
  addresslist: { site: '/addresslist', props: ["data=''"] },
  // ...
};

For auto‑completion, the extension registers a completion item provider:

vscode.languages.registerCompletionItemProvider(files, {
  provideCompletionItems,
  resolveCompletionItem
});

provideCompletionItems creates a CompletionItem for each component name (both kebab‑case and Pascal‑case), while resolveCompletionItem inserts the component tag with its props and positions the cursor appropriately.

const provideCompletionItems = () => {
  const completionItems: vscode.CompletionItem[] = [];
  Object.keys(componentMap).forEach(key => {
    completionItems.push(new vscode.CompletionItem(`nut-${key}`, vscode.CompletionItemKind.Field));
    completionItems.push(new vscode.CompletionItem(bigCamelize(`nut-${key}`), vscode.CompletionItemKind.Field));
  });
  return completionItems;
};

const resolveCompletionItem = (item: vscode.CompletionItem) => {
  const name = kebabCase(item.label as string).slice(4);
  const descriptor: ComponentDesc = componentMap[name];
  const propsText = descriptor.props ? descriptor.props : '';
  const tagSuffix = `
`;
  item.insertText = `<${item.label} ${propsText}>${tagSuffix}`;
  item.command = { title: 'nutui-move-cursor', command: 'nutui-move-cursor', arguments: [-tagSuffix.length - 2] };
  return item;
};

The cursor‑movement command is defined as:

const moveCursor = (characterDelta: number) => {
  const active = vscode.window.activeTextEditor!.selection.active!;
  const position = active.translate({ characterDelta });
  vscode.window.activeTextEditor!.selection = new vscode.Selection(position, position);
};
export function activate(context: vscode.ExtensionContext) {
  vscode.commands.registerCommand('nutui-move-cursor', moveCursor);
}

To further enhance intelligence, the article integrates Vetur by configuring tags.json and attributes.json in package.json , allowing Vue components to show detailed prop information directly in the editor.

// package.json
{
  "vetur": {
    "tags": "dist/smartips/tags.json",
    "attributes": "dist/smartips/attributes.json"
  }
}

Both JSON files are generated from the component source’s doc.md files, which contain tables of prop definitions. The article shows how to parse these markdown files using markdown-it to extract the first table’s rows and build the JSON structures.

let sources = MarkdownIt.parse(data, {});
const getSubSources = (sources) => {
  // extract table rows between TR_OPEN and TR_CLOSE tokens
};

In summary, the guide covers:

Creating a VSCode extension project and registering activation hooks.

Integrating Vetur for Vue prop intelligence.

Generating and maintaining componentMap , tags.json , and attributes.json from component documentation.

Using markdown-it to parse component markdown files for prop extraction.

The article concludes by encouraging developers to adopt the NutUI VSCode extension to boost productivity and contribute feedback.