0.1.1-alpha • Published 6 years ago
typescript-plugin-stencil v0.1.1-alpha
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
{
"compilerOptions": {
...
"plugins": [
{ "name": "typescript-plugin-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
0.1.1-alpha
6 years ago
0.1.0-alpha
6 years ago