leafOfTree/vim-vue-plugin

Vue directive color highlight

nicolidin opened this issue · 4 comments

Hello !

Does your plugin provide an improvement in the syntax of the view directives?
Indeed even having put let g: vim_vue_plugin_highlight_vue_attr = 1 in my vim configuration, the directives syntax does not change anything and always looks like string.
Is it possible to have the same directives syntax highlighting as vscode ?
The first screen below is my vim screen and the second is my vscode screen (with correct non string directive highlight syntax)

vim-vue-screen
vscode-vue-screen

Hope you will have an answer, thank you !

Hello! Thank you for the feedback.
The directive highlight seems to work for me after I tried

let g:vim_vue_plugin_highlight_vue_attr = 1

Screen Shot 2019-12-03 at 11 26 29 AM

and

let g:vim_vue_plugin_highlight_vue_attr = 0

Screen Shot 2019-12-03 at 11 26 11 AM

Could you check the config like there is no space in g: vim...

Also, you maybe need to try some debug commands

:messages                 " ensure there are no errors
:verb hi VueValue         " syntax used for Vue directive value, it should be `None` if enabled

:echo g:vim_vue_plugin_highlight_vue_attr  " echo final value in .vue file

Thank you very much for your answer, I now understand where the problem comes from.
This is because of the plugin: 'posva/vim-view'.

When in my vim plugin configuration I put the plugins in this order:

1 - Plugin 'leafOfTree/vim-view-plugin'
2 - Plugin 'posva/vim-view'
I lose all the syntax highlighting that 'popsa/vim-view' provides but I gain syntax highlighting of the view directives.

Conversely, if I put my vim plugins configuration in this order:
1 - Plugin 'posva/vim-view'
2 - Plugin 'leafOfTree/vim-view-plugin'
 I gain all the syntax highlighting of the plugin 'posva/vim-view' but I lose syntax highlighting of the view directives.

I have no idea how to solve this problem ...
I think it's a pretty big problem because the plugin 'popsa/vim-view' is the plugin used by the famous 'sheerun/vim-polyglot' plugin.
Do you have an idea to solve this problem ? It would help me a lot !
Thank you really much for taking time to help me !

You're welcome! I guess you want both posva/vim-vue syntax and leafOfTree/vim-vue-plugin directives syntax highlight.

To make it clear, both posva/vim-vue(as well as vue in 'sheerun/vim-polyglot') and this plugin are similar vue syntax plugin. They both combine JavaScript and other languages syntax in vue file. Normally we should choose one of them to use. For example, if you want to try this plugin, you have to comment out or disable the other one.

" Plugin 'posva/vim-vue'

let g:polyglot_disabled = ['vue']
Plugin 'sheerun/vim-polyglot'

To load vue file fastly, this plugin only load html/javascript/css syntax by default. You can extend syntax highlight by config and other plugins. Also, custom syntax can be added in ~/.vim/syntax/html.vim, for example.

Plugin 'pangloss/vim-javascript'            " enable javascript syntax plugin
Plugin 'leafOfTree/vim-vue-plugin'

let g:vim_vue_plugin_use_sass = 1           " enable sass syntax
let g:vim_vue_plugin_highlight_vue_attr = 1 " enable directive syntax

Using html/sass/less syntax plugin example.

Plugin 'othree/html5.vim'

" enable html/sass/less syntax plugin
let g:vim_vue_plugin_load_full_syntax = 1 

Note: config should be after Plugin '...'

I am closing this issue. Feel free to reopen it if there is still any problem.