This extension for Visual Studio Code adds snippets for Polymer 1. The snippets are provided for HTML and Javascript as elements can be defined in a single HTML file or separate files.
The snippets are focused on conforming to Polymer Documentation Guidelines, various Polymer best practices and a naming convention to help readability.
Private properties and functions should be prefixed with an underscore (_).
Any function that handles an event should be prefixed with '_handle'.
Any function assigned as a listener in the listeners object should be prefixed with '_listen'.
Any function assigned as an observer on a property or declared in the observers array should be prefixed with '_observe'.
Any compute function should be prefixed with '_compute'.
The naming convention aims to make the code base more readable and allow coders to be more aware of what their changes could affect.
Boolean property snippet with value defaulted to false. If defaulted to true, you cannot set it to false from markup.
Array or Object property snippet with a function for the defaulted value. It is to ensure each element gets its own copy of the value.
Type the prefix of the snippet (i.e. p-basic
), press enter
and the snippet unfolds. Tab through one or more place holders, enter a value or use the default provided.
Below describes all available snippets (p:property, f:function, d:documentation, el:element, b:behavior).
p-basic // Basic property with single line documentation.
p-boolean // Boolean property, defaulted to false.
p-basic-type // Basic property with type documentation.
p-object-array // Object or Array property with single line documentation.
p-compute // Property with a computed assigned.
p-observe // Property with an observer assigned.
p-all // Property with all available assignments.
d-p-single-line // Single line property documentation.
d-p-type // Property documentation with annotated type.
d-p-complex-type // Property documentation with annotated complex type.
d-p-all // Full property documentation.
f-1-param // 1 parameter function with documentation.
f-2-param // 2 parameter function with documentation.
f-3-param // 3 parameter function with documentation.
f-void // Void Function with documentation.
f-observe-property // Function for observer of a property with documentation.
f-handle-event // Function to handle an event with documentation.
d-f-1-param // Documentation for function with 1 parameter.
d-f-2-param // Documentation for function with 2 parameter.
d-f-3-param // Documentation for function with 3 parameter.
d-f-void // Documentation for void function.
d-f-observer // Documentation for property observer function.
d-f-handle-event // Documentation for function that handles an event.
d-event // Documentation for an event.
d-event-complex // Documentation for an event with an annotated complex type.
b-basic // Basic behavior with documentation.
b-extend // Extend an existing behavior with documentation.
d-b-basic // Documentation for a behavior.
d-b-extend // Documentation for a behavior that extends another behavior.
el-basic // Basic element with documentation.
el-all // Element with all available assignments and documentation.
d-el-basic // Documentation for a basic element.
d-custom-css // Documentation table for any custom CSS properties and mixins.
Install Visual Studio Code 1.21.0 or higher.
- Install Visual Studio Code 1.21.0 or higher
- Launch Visual Studio Code
- From the command palette
Ctrl
-Shift
-P
(Windows, Linux) orCmd
-Shift
-P
(OSX) - Select
Install Extension
- Choose the extension -
Polymer 1 Snippets
- Reload Visual Studio Code
All notable changes will be documented in CHANGELOG.md
Please fork the branch, create a new feature branch, add your changes and push. Submit a pull request :)