Configure highlighting

[agirorn]

Is there any way to configure what javascript syntax highlighting is being used?

I for one have configured my vim to use jelera/vim-javascript-syntax for javascript insted of the default javascript and I'd like to use the same inside of vue.

[posva]

It should be using the last one registered. Isn't that what's happening?

[agirorn]

Almost, except for a global function that is for some reason not done correctly. And this might be a configuration issue on my part. I just don't know how to debug it any further.

The blue function is taged as `hi trans lo``

while the read function is taged hi<javaScriptGlobalObjects> trans<javaScriptGlobalObjects> lo<Special>

According to my configuration, it should be blue.

[JuanVqz]

Hi thanks for your help.

I have the problem that the html syntax discolour.

Do you know how to fix it? Beforehand thank you very much!

[agirorn]

I never found out why this is happening and have accepted this highlighting for now.

[JuanVqz]

Hello Agirorn, I resolved it had a separate tag <template >

Thanx for your help! Good Day

[mixedCase]

I can confirm that this bug only occurs with jelera/vim-javascript-syntax.

Which is the only syntax highlighter that works well in my experience. pangloss/vim-javascript works too but they don't support inlined indentation so that ruins it.

[agirorn]

@mixedCase do you know if this needs to be fixed int vim-vue or in jelera/vim-javascript-syntax ?

[mixedCase]

@agirorn No clue. Tried looking at both syntaxes' respective source codes as well as mixing and matching loading functions and found no difference.

Then again I'm no Vim plugin expert. In the meantime I'm putting up with shitty syntax highlighting. Btw @posva, which syntax highlighting plugin do you use?

[posva]

I use pangloss/vim-javascript

[mixedCase]

@posva How do you fix its broken indenting?

[posva]

Well, it works 😕

[mixedCase]

@posva With ES6 code? Don't your import lines or export statement backtrack and misalign?

I've tried running it with a clean init.vim and disabling all plugins but itself and vim-vue and it doesn't work. Indentation is just plain wrong.

[posva]

yeah, here's the full list of my plugins. I haven't updated it in a while so there may be duplicates

" Init options for vundle {
set nocompatible
filetype off

set rtp+=~/.vim/bundle/Vundle.vim
call vundle#begin()
" }

" Vundle and main plugins {
Plugin 'gmarik/Vundle.vim'
Plugin 'MarcWeber/vim-addon-mw-utils'
Plugin 'tomtom/tlib_vim'
" }

" Editing & Utils {
Plugin 'tpope/vim-repeat'
Plugin 'Lokaltog/vim-easymotion'
Plugin 'tomtom/tcomment_vim'
Plugin 'rking/ag.vim'
Plugin 'tikhomirov/vim-glsl'
Plugin 'FredKSchott/CoVim'
Plugin 'kyuhi/vim-emoji-complete'
" }

" Latex {
Plugin 'lervag/vimtex'
" }

" Mines {
"Plugin 'posva/Rndm'
"Plugin 'vim-scripts/Mines'
" }

" Colorschemes/Themes {
Plugin 'croaker/mustang-vim'
Plugin 'fmoralesc/vim-vitamins'
Plugin 'flazz/vim-colorschemes'
Plugin 'chriskempson/tomorrow-theme'
Plugin 'jaxbot/semantic-highlight.vim'
"Plugin 'altercation/vim-colors-solarized'
"Plugin 'spf13/vim-colors'
" }

" Align text with tabular {
Plugin 'godlygeek/tabular'
" }

" Sessions are good {
Plugin 'vim-scripts/sessionman.vim'
" }

" Airline iformation about the file at bottom {
"Plugin 'bling/vim-airline'
Plugin 'itchyny/lightline.vim'
Plugin 'ryanoasis/vim-devicons'
" }

" Javascript {
Plugin 'elzr/vim-json'
"Plugin 'groenewege/vim-less'
Plugin 'pangloss/vim-javascript' " indentation and syntax support
Plugin 'briancollins/vim-jst' " indenting and highlighting jst/ejs
Plugin 'kchmck/vim-coffee-script'
Plugin 'mtscout6/vim-cjsx'
Plugin 'maksimr/vim-jsbeautify'
Plugin 'einars/js-beautify'
Plugin 'heavenshell/vim-jsdoc'
" }

" HTML {
Plugin 'mattn/emmet-vim'
"Plugin 'amirh/HTML-AutoCloseTag'
Plugin 'othree/html5.vim'
Plugin 'wavded/vim-stylus'
Plugin 'hail2u/vim-css3-syntax'
Plugin 'tpope/vim-haml'
Plugin 'digitaltoad/vim-pug'
Plugin 'posva/vim-vue'
" }

" PHP {
"Plugin 'spf13/PIV'
"Plugin 'arnaud-lb/vim-php-namespace'
" }

" Scala {
Plugin 'derekwyatt/vim-scala'
" }

" Autoclose brackets, etc Press <C-c> for new line {
"Plugin 'spf13/vim-autoclose'
" }

" Autocompletion {
if has("lua") && v:version >= 740
  Plugin 'Shougo/neocomplete.vim'
  Plugin 'Shougo/neosnippet'
  Plugin 'Shougo/neosnippet-snippets'
  Plugin 'honza/vim-snippets'
endif
" }

" TagBar (ctags, jsctags, etc) {
if v:version >= 702
  Plugin 'majutsushi/tagbar'
endif
" }

" Indent guide plugin {
if exists('*matchadd')
  Plugin 'nathanaelkane/vim-indent-guides'
endif
" }

" Syntastic plugin for compilation errors {
Plugin 'scrooloose/syntastic'
" }

" Gundo {
Plugin 'sjl/gundo.vim'
" }

" git  {
Plugin 'airblade/vim-gitgutter'
Plugin 'tpope/vim-fugitive'
" }

" Java IDE {
"Plugin 'vim-scripts/Vim-JDE'
"Plugin 'vim-scripts/javacomplete'
" }

" NERD Tree {
Plugin 'scrooloose/nerdtree'
" }

" NERD commenter {
Plugin 'scrooloose/nerdcommenter'
" }

" Markdown {
Plugin 'plasticboy/vim-markdown'
" }

" Surrounding, just awesome {
Plugin 'tpope/vim-surround'
" }

" Cool surronding character coloring
Plugin 'kien/rainbow_parentheses.vim'

" ST like functionalities {
Plugin 'ctrlpvim/ctrlp.vim'
Plugin 'terryma/vim-multiple-cursors'
" }

" numbers: better line numbers {
if v:version >= 730
  Plugin 'myusuf3/numbers.vim'
endif
"}

" A plugin for automatically restoring file's cursor position and folding
Plugin 'vim-scripts/restore_view.vim'

" Autocompletion {
"Plugin 'Valloric/YouCompleteMe'
" }

" All of your Plugins must be added before the following line
call vundle#end()            " required
filetype plugin indent on    " required
" To ignore plugin indent changes, instead use:
"filetype plugin on

[mixedCase]

@posva Could you try indenting this with gg=G and post back what you got? https://gist.github.com/mixedCase/7e18a29bd3226a280ef0acd4ebe93143

I've gone through your dotfiles, tried a lot of mixing and matching but no dice.

[posva]

@mixedCase You are right. It doesn't work 😓 I get the same exact output. What I usually do it manually indent some specific lines and then only indent few lines at the same time. This way it uses the previous indentation. It's still not working on es6 features thought 😕

[psi-4ward]

So anyone has scss highlight working?

[mixedCase]

@psi-4ward Yes, I'm using ohtree/html5.vim and hail2u/vim-css3-syntax. Make sure to start your style block with <style lang="scss">.

[slice]

<script> tag highlighting doesn't work for yajs.vim, either. I think the <script> tag is being highlighted by the JavaScript syntax, I'm not sure.

[slice]

Okay, I think I got a fix.

Change line 59 of syntax/vue.vim to this:

syntax region javascript keepend matchgroup=Delimiter start=/<script\( lang="babel"\)\?\( type="text\/babel"\)\?>/ end="</script>" contains=@JS fold

This fixes JavaScript highlighting for me (I use yajs.vim)

Before:

After:

Enjoy! :) @posva Should I make a PR for this? I don't know if this breaks stuff, I still need feedback from others

[posva]

@sliceofcode Tested it and seems to work nicely 🙂 . Yes, please, go ahead and open a PR @agirorn can you test locally that change and tell us if it fixes the issue?

[slice]

Here you go: #43

Maybe we should wait for feedback first.

[jacoborus]

It works for me too

[posva]

Closed by d90cd7b

[avral]

Not work for me :(

It work when filetype=vue but not work when filetype=vue.html.javascript.css

[posva]

Tested with Vim 8 and works nicely

[avral]

NVIM 0.1.7

[posva]

In that case you may want to seach there for issues about compound filetypes

[slice]

Hmm, I am using Neovim and I am experiencing the same problems as @avral. I'll try to investigate