Typescript plugin for a smoother Developer Experience within Stencil projects
- 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
andrender
fromthis.
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
andFind all References
to include watched props. - Improved
options
completions for decorators (Prop
)
- 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?)
Install the package
npx ts-plugin install stencil
Make sure your editor is using the Workspace version of Typescript
- Open Command Pallete (
cmd+shift+p
) - Select
TypeScript: Select TypeScript Version.
- Select
Use workspace version