Language Features

Qingkuai does not build complex syntax extensions into the compiler. Instead, it provides rich language features through an LSP-based language service. These features include type inference, intelligent completion, diagnostics, quick navigation, and semantic highlighting, covering framework capabilities such as component attributes, slots, style scoping, directives, and reference passing. With LSP, Qingkuai keeps syntax concise while significantly improving developer experience and type safety.

IDE Extensions

Currently, we only publish the extension for VS Code. You can install it from the VS Code Marketplace or by searching for Qingkuai in the VS Code Extensions view.

Emmet

Qingkuai language service provides solid Emmet support. However, because dynamic attributes conflict with Emmet's attribute-removal syntax, component files use - to remove attributes. The example below creates an input tag without a type attribute in a component file:

input[-type]

The original syntax:

input[!type]

creates a dynamic attribute:

<input !type={}>

Formatting

Qingkuai language service includes built-in document formatting, implemented by prettier-plugin-qingkuai. If a component file contains syntax errors, formatting may fail. In that case, check the IDE output panel:

Restart Language Service

When language service behavior is abnormal, open the VS Code command palette (Ctrl+Shift+P or Cmd+Shift+P), then run Qingkuai: Restart Language Server to restart the language service:

Code Navigation

Code navigation is frequently used during development, and has some framework-specific usage in component files:

• Find slot definitions: Hold down the meta key and left-click the slot attribute on a first-level child element of a component;

• Find component definitions: Hold down the meta key and left-click a component tag or a component identifier in an embedded script;

• Find slot references: Right-click a slot tag and select "Go to References", or enable Code Lens;

• Find component references: Right-click an embedded language tag and select "Go to References", or enable Code Lens;

AI Agents

In Qingkuai projects, AI can be used as a development assistant to help you build components faster, complete code, troubleshoot issues, and understand documentation. It does not replace the compiler or language service. Instead, it works alongside the existing toolchain to reduce repetitive work and improve development efficiency.

Qingkuai's MCP server is provided through qingkuai-mcp-server. It is mainly used to improve agent response speed and stability, and to strengthen understanding and generation for DSL syntax and component files. If you have installed the VS Code extension, AI features in component files will automatically connect to the MCP server with no extra configuration. If you want to use or integrate these AI capabilities in other environments, you can connect to the same service directly.

Edit this page on github (This page has been translated from the Chinese version of the site. There may be inaccuracies in the translation. We welcome your help to improve the accuracy of this document.)