Adds syntax highlighting and snippets to Vue component files in Atom.
Originally converted from vuejs/vue-syntax-highlight.
Since vue-loader redirects language=x
to loader style!css!x
and sass-loader is using SCSS as default, you need to remap them in webpack.config.js:
vue: {
loaders: {
sass: 'style!css!sass?indentedSyntax',
scss: 'style!css!sass'
}
}
This is so that this package can support both old Sass and new SCSS. Refer to hedefalk/atom-vue#5 and the official solution for more info.
Just press TAB
or ENTER
to unfold a snippet
template <!--Single file component template-->
router-view <!--Vuejs router-view component-->router-link <!--Vuejs router-link component with named route-->component <!--Include component in HTML-->i18n <!--Include internationalization component-->
v-for <!--Vuejs binding for list rendering-->v-if <!--Vuejs binding for if conditional rendering-->v-else-if <!--Vuejs binding for else if rendering-->v-else <!--Vuejs binding for else conditional rendering-->v-show <!--Vuejs binding for show conditional rendering-->v-model <!--Vuejs binding for model binding-->
beforeCreate // Vuejs instance lifecycle hook for beforeCreatecreated // Vuejs instance lifecycle hook for createdbeforeMount // Vuejs instance lifecycle hook for beforeMountmounted // Vuejs instance lifecycle hook for mountedbeforeUpdate // Vuejs instance lifecycle hook for beforeUpdateupdated // Vuejs instance lifecycle hook for updatedbeforeUpdate // Vuejs instance lifecycle hook for beforeUpdateupdated // Vuejs instance lifecycle hook for updatedbeforeDestroy // Vuejs instance lifecycle hook for beforeDestroydestroyed // Vuejs instance lifecycle hook for destroyedvwatch // Vuejs way to watch instance propertiesmethods // Vuejs methods event handlerscomponents // Use it when you want to add child components to parent component.props // Vuejs way to pass data to child componentsvprops // Vuejs way to pass data to child components with validationvcomputed // Vuejs computed property
vstore // Vuex template for a complete store with state,getters,actions and mutationsvmut // Vuex mutation snippetvact // Vuex action snippetvget // Vuex getter snippetvtype // Vuex constant type snipppet
Good catch. Let us know what about this package looks wrong to you, and we'll investigate right away.