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
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
)
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
npm i --save-dev typescript-plugin-stencil
Modify tsconfig.json
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