Stencil Tools
Description
VS Code extension that makes working with Stencil projects a breeze.
Features
- Automatically creates Stencil components (
component.tsx
,component.spec.tsx
,component.css
) - Snippets with Automatic Import support for Stencil Decorators, Lifecycle Events, and Tests
- Easily start any new Stencil project from the Command Palette
- Quickly open the Stencil Docs in your browser
- Configurable component templates
- Add a custom prefix to generated component tags
- Easily toggle on/off @Component({ shadow: true })
- Change the extension of any generated file
css
=>scss
orsass
spec.ts
=>test.ts
Usage
Generate a Component
- From the File Explorer
- Right click on a folder
- Select "Generate Stencil Component"
- Enter your component name in the prompt
- From the Command Palette
- Select "> Stencil: New Component"
- Enter your component name in the prompt
Generate a Test from a Component
- From the File Explorer
- Right click on a component file
- Select "Generate Test for Stencil Component"
- From the Command Palette, when a Component is open
- Select "> Stencil: New Test for Component"
Start a Stencil Project
- From the Command Palette
- Select "> Stencil: Start New Project"
- Select a Starter (components, app, pwa)
- Choose an empty directory and click "Start Project"
- When you open the new project, Stencil Tools will automatically prepare the project and install any dependencies
Use Stencil Snippets
- From a Component File
- type
s-
and select your snippet
- type
Open the Stencil Docs
- From the Command Palette
- Select "> Stencil: Open Docs"
Changelog
2.0.0 (2018-06-11)
- Breaking Change: command names are now properly namespaced
- Overhaul of the
Start Project
feature - Brand new snippets with AutoImport
- Small optimizations to the Component and Test Generators
- Read More
1.0.0 (2018-06-06)
- Published the extension to VS Code Marketplace
Bugs
Please report here
Credits
- vscode-angular2-component-generator for the original fork
- create-stencil for much of the
Start Project
logic