NewCP Official

NewCP Official brings VS Code support to NewCP custom elements in both .html files and template() string regions inside .ts and .js files.

文档 / Documentation

• 使用手册：docs/USER_GUIDE.zh-CN.md
• 完整功能介绍手册：docs/FEATURE_OVERVIEW.zh-CN.md
• 发布指南：docs/MARKETPLACE_PUBLISHING.zh-CN.md
• User guide: docs/USER_GUIDE.en.md
• Feature overview: docs/FEATURE_OVERVIEW.en.md
• Marketplace publishing guide: docs/MARKETPLACE_PUBLISHING.en.md
• Support: SUPPORT.md

Features

• Component tag completion for nc-* elements
• Attribute, event binding, and enum value completion
• Hover details for components, attributes, slots, and closing tags
• Rich prop metadata in completion and hover, including defaults, required flags, and enum values
• Event binding metadata that shows CustomEvent payload types in hover, completion details, and generated handler signatures, including runtime-inferred payload fields from component code
• Attribute value completion backed by metadata examples, safe defaults, and enum values
• Smarter prop completion ordering that lifts required props and pushes deprecated props lower
• Cleaner attribute completion that favors component props over generic HTML attrs and favors events when typing on
• Attribute completion snippets that insert full prop assignments and event bindings in one step
• Diagnostics and quick fixes for unknown tags, attributes, slot names, and tag structure issues
• Batch quick fixes for repeated unknown or deprecated attributes in the current document
• Diagnostics and quick fixes for missing required props
• Diagnostics and replacement quick fixes for deprecated props
• Standalone nc-* snippets and required-prop fixes that prefer metadata examples and safe default values
• this.xxx completion, definition, references, and rename inside template expressions
• Inherited this.xxx completion and definition from imported base classes
• Cross-file references and rename for inherited template members
• Formatting, linked editing, and tag pair highlighting in template regions
• Dynamic metadata reload from the workspace without rebuilding the extension
• User settings for semantic highlighting, metadata auto reload, and on-type formatting
• User settings for auto re-triggered suggestions and follow-up completion chaining
• User settings for auto quote completion and auto closing tag insertion
• User settings for linked tag editing and a command to inspect the current feature state
• User settings for tag pair highlights and a command to toggle features interactively
• Feature presets and a status-bar driven control center for switching behavior quickly, with the active preset and metadata source shown inline
• Manual metadata mode that keeps suggestions stable until you explicitly reload

Supported Files

• .html
• .ts
• .tsx
• .js
• .jsx

Install From VSIX

1. Run Extensions: Install from VSIX...
2. Choose the packaged file such as newcp-vscode-extension-0.0.41.vsix
3. Run Developer: Reload Window

Local Build

pnpm --filter ./packages/vscode-newcp generate:data
pnpm --filter ./packages/vscode-newcp build
pnpm --filter ./packages/vscode-newcp test:smoke
pnpm --filter ./packages/vscode-newcp package:vsix

From the repository root you can also run:

pnpm test:vscode-extension
pnpm package:vscode-extension

Commands

• NewCP: Reload Component Metadata
• NewCP: Open Control Center
• NewCP: Open Settings
• NewCP: Configure Features
• NewCP: Apply Feature Preset
• NewCP: Show Active Feature Status
• NewCP: Open Active Metadata File
• NewCP: Format Current Template

Settings

• newcp.completion.autoRetrigger.enabled: control whether typing and deletion inside template contexts automatically re-open suggestions
• newcp.completion.followUpSuggestions.enabled: control whether choosing a NewCP snippet immediately opens the next suggestion step
• newcp.editing.linkedTags.enabled: control whether matching start and end tags stay linked while renaming tag names
• newcp.highlights.tagPairs.enabled: control whether matching start and end tags are highlighted together
• newcp.formatting.autoClosingTags.enabled: control whether typing > inserts the matching closing tag
• newcp.formatting.autoQuotes.enabled: control whether typing = inserts attribute quotes
• newcp.semanticHighlighting.enabled: only colorize NewCP template regions without affecting normal TS or JS coloring
• newcp.metadata.autoReload: control whether workspace component and metadata changes auto-refresh the suggestion database When this is off, the status bar shows manual and metadata only changes after NewCP: Reload Component Metadata

Presets

• Minimal: reduce automatic assistance and keep the editor quiet
• Balanced: keep structural helpers on but reduce aggressive suggestion chaining
• Assisted: turn on the full guided authoring experience
• newcp.formatting.onType.enabled: control helpers like auto quotes and tag-close insertion inside template regions

Metadata Workflow

The extension resolves metadata in this order:

1. .newcp/newcp-metadata.json
2. packages/vscode-newcp/generated/newcp-metadata.json
3. bundled metadata inside the extension

When component source files under packages/components/src change, the extension will try to regenerate metadata automatically and refresh the language server.

If metadata loading fails, the extension falls back to bundled metadata, logs the error to the NewCP Official output channel, and shows a warning in the status bar.

CI

GitHub Actions validation is defined in .github/workflows/newcp-vscode-extension-ci.yml.

The workflow runs:

1. install
2. test:smoke
3. package:vsix
4. VSIX artifact upload

Quick Verification

Use the snippet below in a .ts file:

class DemoPage {
  title = "Dashboard";
  handleRefresh() {}

  template() {
    return `
      <nc-card headre="wrong-prop">
        <div slot="header">${this.title}</div>
        <nc-button onclick={this.handleRefresh}>Refresh</nc-button>
      </nc-card>
    `;
  }
}

Expected results:

• nc-* tags appear in completion
• headre shows a diagnostic and quick fix
• slot="header" shows slot completion and hover
• this.title and this.handleRefresh resolve correctly

Troubleshooting

• Check Developer: Show Running Extensions to confirm that NewCP Official is active
• Open View: Output and select NewCP Official
• If completion feels stale, run NewCP: Reload Component Metadata
• If workspace metadata is broken, run NewCP: Open Active Metadata File and validate the JSON