Skip to content

Instantly share code, notes, and snippets.

@Fmajor
Created June 19, 2019 18:20
Show Gist options
  • Save Fmajor/0024facc213087a3b4f296b50bf2c197 to your computer and use it in GitHub Desktop.
Save Fmajor/0024facc213087a3b4f296b50bf2c197 to your computer and use it in GitHub Desktop.
A ctags syntax file for vue components
# A ctags syntax file for vue components
--langdef=vue
--langmap=vue:.vue
# vue-commands in <template>
--regex-vue=/^(<template>)$/\1/t,template/{scope=set}{exclusive}
--regex-vue=/^\S*(.*(v-if=|v-for=|v-show=|ref=)("[^"]*"))/\2\3/c,vue-command/{scope=ref}
--regex-vue=/^(<\/template>)$/\1//{scope=pop}{exclusive}{placeholder}
# css in <template>
--regex-vue=/^(<style.*)$/style/s,script/{scope=set}{exclusive}
--regex-vue=/^(<\/style>)$/\1//{scope=clear}{placeholder}
--regex-vue=/^function +([a-zA-Z_][a-zA-Z0-9_]*)/\1/f,function/{scope=ref}
# name, data, props, computed, methods, components, watch and their subfunctions
--regex-vue=/^ {2}((name|'name')[^,]*)/\1/p,property/{scope=ref}
--regex-vue=/^ {2}((data) \(|('data'):|(data):)/data/p,property/{scope=set}
--regex-vue=/^ {2}((props) \(|('props'):|(props):)/props/p,property/{scope=set}
--regex-vue=/^ {2}((computed) \(|('computed'):|(computed):)/computed/p,property/{scope=set}
--regex-vue=/^ {2}((methods) \(|('methods'):|(methods):)/methods/p,property/{scope=set}
--regex-vue=/^ {2}((components) \(|('components'):|(components):)/components/p,property/{scope=set}
--regex-vue=/^ {2}((watch) \(|('watch'):|(watch):)/watch/p,property/{scope=set}
--regex-vue=/^ {4}((async )?([a-zA-Z0-9_]*) \(|('[a-zA-Z0-9_\.]*'):|('[a-zA-Z0-9_\.]*') \(|([a-zA-Z0-9_]*):)/\2\3\4\5\6/p,property/{scope=ref}
--regex-vue=/^(([a-zA-Z0-9_#\$\.\{\}-]*) \{)/\2/p,property/{scope=ref}
# all life cycle hooks
--regex-vue=/^ {2}((beforeCreate) \(|('beforeCreate'):|(beforeCreate):)/beforeCreate/p,property/{scope=set}
--regex-vue=/^ {2}((created) \(|('created'):|(created):)/created/p,property/{scope=set}
--regex-vue=/^ {2}((beforeMount) \(|('beforeMount'):|(beforeMount):)/beforeMount/p,property/{scope=set}
--regex-vue=/^ {2}((mounted) \(|('mounted'):|(mounted):)/mounted/p,property/{scope=set}
--regex-vue=/^ {2}((beforeUpdate) \(|('beforeUpdate'):|(beforeUpdate):)/beforeUpdate/p,property/{scope=set}
--regex-vue=/^ {2}((updated) \(|('updated'):|(updated):)/updated/p,property/{scope=set}
--regex-vue=/^ {2}((activated) \(|('activated'):|(activated):)/activated/p,property/{scope=set}
--regex-vue=/^ {2}((deactivated) \(|('deactivated'):|(deactivated):)/deactivated/p,property/{scope=set}
--regex-vue=/^ {2}((beforeDestroy) \(|('beforeDestroy'):|(beforeDestroy):)/beforeDestroy/p,property/{scope=set}
--regex-vue=/^ {2}((destroyed) \(|('destroyed'):|(destroyed):)/destroyed/p,property/{scope=set}
--regex-vue=/^ {2}((errorCaptured) \(|('errorCaptured'):|(errorCaptured):)/errorCaptured/p,property/{scope=set}
@Fmajor
Copy link
Author

Fmajor commented Jun 19, 2019

An example in Atom using symbols-tree-nav plugin(copy the above code into ~/.atom/packages/symbols-tree-nav/lib/.ctags)
vue-component

@ericktucto
Copy link

@Fmajor Hello, I am using your configuration, but I have the following error

imagen

@Spike-Leung
Copy link

@Fmajor Hello, I am using your configuration, but I have the following error

imagen

remove - in vue-command, because it is Non-alphanumeric char.

e.g. rename vue-command to vueCommand

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment