natemoo-re / typescript-plugin-stencil

Typescript plugin for a smoother Developer Experience within Stencil projects

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Typescript Plugin: Stencil

Typescript plugin for a smoother Developer Experience within Stencil projects

Features

  • Augments code hints/hovers to include decorated type

Before

(property) MyComponent.propName: string;
(property) MyComponent.stateName: number;
(property) MyComponent.eventName: EventEmitter<any>;
(method) MyComponent.componentDidLoad(): void;

After

(prop) MyComponent.propName: string;
(state) MyComponent.stateName: number;
(event) MyComponent.eventName: EventEmitter<any>;
(lifecycle) MyComponent.componentDidLoad(): void;
  • Removes hostData and render from this. completions
  • Orders this. completions based on Stencil style guide order rather than alphabetical. For example, states come before props, and component lifecycle methods appear in the order they are triggered.
  • Adds documentation on hover/completion for builtin Stencil methods (component lifecycle hooks, hostData, render)
  • Enhances Rename Symbol and Find all References to include watched props.
  • Improved options completions for decorators (Prop)

Planned Features

  • CSS Completions inside of @Component({ styles: `` }) template literals (syntax highlighting would be provided by a seperate editor extension ala vscode-styled-components)
  • hostData completions
  • JSX completions (Emmet?) for all known Stencil components (including node_modules)
  • Codefixes
  • Rename component (also renames file, tag, style files?)

Installation

Install the package

npx ts-plugin install stencil

Make sure your editor is using the Workspace version of Typescript

VS Code

  • Open Command Pallete (cmd+shift+p)
  • Select TypeScript: Select TypeScript Version.
  • Select Use workspace version

About

Typescript plugin for a smoother Developer Experience within Stencil projects


Languages

Language:TypeScript 100.0%