leafOfTree/vim-vue-plugin

Stacking indentation of <template>

Strahinja opened this issue · 14 comments

Using gg=G on a vue buffer produces increasing stacking indentation.

After gg=G

I'm using vim-vue-plugin with those plugins:

Plugin 'tpope/vim-rhubarb'

Plugin 'tommcdo/vim-fubitive'
Plugin 'vim-airline/vim-airline'
Plugin 'vim-airline/vim-airline-themes'

Plugin 'elmindreda/vimcolors'
Plugin 'leafOfTree/vim-vue-plugin'

Plugin 'ctrlpvim/ctrlp.vim'
Plugin 'airblade/vim-gitgutter'
Plugin 'scrooloose/nerdcommenter'
Plugin 'godlygeek/tabular'
Plugin 'ryanoasis/vim-devicons'

Plugin 'thaerkh/vim-workspace'
Plugin 'DavidEGx/ctrlp-smarttabs'
Plugin 'dense-analysis/ale'
Plugin 'Valloric/YouCompleteMe'
Plugin 'tpope/vim-surround'

Hi, thank you for your feedback. Could you please paste a demo code? You can remove the sensitive information if there is. I can't reproduce the bug so I guess it occurs in a specific condition.

Here's what I got
6vmlFG6oAB

Of course, here it is:

<template>
  <v-layout>
    <slicer :items="pages" insideContainer="true" startingAtTop="true">
      </slicer>
        </v-layout>
          </template>

<script>
//import axios from 'axios';
  import Slicer from '../components/Slicer.vue';

  export default {
  components: {Slicer},
  name: 'Home',
  props: {pages: Array, homePage: Object},
  data () {
  return {
  twitterApiUrl: '//api.twitter.com/1.1/statuses/user_timeline.json',
  loading: false,
  // twitterStatuses: []
  };
  },
  methods: {
  /*loadTwitterStatuses () {
  }*/
  },
  created () {
  this.loading = true;
  // this.loadTwitterStatuses();
  }
  };
</script>

<style scoped>
.card-clickable
  {
  cursor: pointer;
  }
</style>

Note that in addition to HTML having the stacking indent, both JavaScript and CSS are indented incorrectly.

Edit: Also I tried swapping Valloric/YouCompleteMe for neoclide/coc.nvim with the same result. When I use posva/vim-vue and prettier/vim-prettier instead of leafOfTree/vim-vue-plugin I get the correct indentation, however.

Here's my _vimrc. I'm on Windows 10 x64, using latest gvim x64 and other prerequisites (just setting up Vim :) ):

https://pastebin.com/tUqaPViC

I tried your _vimrc and lastest gvim8.1 on Win7 x64 and everything seems to work. Could you please try these methods to get more info?

  1. Add or uncomment this line in _vimrc

     let g:vim_vue_plugin_debug = 1
    

    then open a .vue file. After gg=G, run :messages, which will show the indent logs.

  2. Try posva/vim-vue without vim-prettier. prettier will read the whole file and format it instead of indent. This may cover the indentation issue.

  3. Copy and paste HTML code into an XML file, then indent it to see if it works. This plugin mainly combines XML/CSS/JavaScript syntax and indent into a .vue file.

  4. Comment other plugins and settings in _vimrc to see if vim-vue-plugin indents as expected. If it works, uncomment some plugins/settings step by step to locate the cause. Else, please run

     :verb se rtp
     :verb se ft 
     :verb se inde
    

    to see if this plugin is in the rtp and loaded and enabled.

  1. Here's the message output with g:vim_vue_plugin_debug = 1.

  2. posva/vim-vue seems to format correctly without vim-prettier, it seems to not have used that plugin automatically in the first place. Here's the output of :verb se commands when using posva/vim-vue.

  3. When indenting XML file, it seems the indent function used is

      indentexpr=XmlIndentGet(v:lnum,1)
         Last set from C:\Program Files (x86)\Vim\vim81\indent\xml.vim line 35
    

    The XML from the above <template> is correctly indented, however, a more advanced
    <template> code
    is not. It seems as if the colon inside the
    attribute name confuses the formatter.

  4. Here's the output of :verb se commands.

Thank you for your patience. I think that your vim is from vim-win32-installer, which is a nightly build and not very stable.

chrome_7ijQ3SwHAn

The nightly version's builtin xml.vim changes from the previous one and influences the indentation of this plugin. I created an issue there.

However, I suggest stable gvim. Otherwise, you can simply replace Vim\vim81\indent\xml.vim with xml.vim from stable gvim8.1.

I am indeed using the Vim version you linked, but obtained from the link in the next paragraph:

A 64 bit version, which only runs on 64 bit MS-Windows and uses a lot more memory, but is
compatible with 64 bit plugins, can be found here You can also find links to interfaces to install there (Python, Perl, Ruby, etc.).

I needed the 64-bit version of Vim in order to work with 64-bit plugins, which was needed to compile and install Valloric/YouCompleteMe, so versions which can't work with 64-bit plugins are not an option for me. Regardless, I replaced the C:\Program Files (x86)\Vim\vim81\indent\xml.vim with the older version you provided and everything seems to be working as normal, both the test XML file indentation and the Vue file indentation. I'm not sure if this workaround counts as closing the issue however, so I'll leave the decision about that to you. :) It is certainly a bug in the full 64-bit version of Vim found in the quoted link.

FYI, the stable gvim.exe includes both 32 and 64 bit versions.

It includes GUI and console versions, for 32 bit and 64 bit systems. You can select what you want to install and includes an uninstaller.

I wasn't able to compile Valloric/YouCompleteMe using the Vim version installed through the default installer though, so I installed the other version.

Ok. I'll close this issue. Please let me know if any problem appears.

Hi, I have the same problem on Mac OS. I also get the right indentation using the other vim plugin.

What was the solution?

Hi. You probably installed the latest macVim, whose builtin xml.vim has a breaking different indent behaviour. You can simply replace it with xml.vim from the stable version.
BTW, you can locate the builtin file by opening any file and run

set ft=xml
verb set indentexpr

I'll pack some stable and modified vim runtime files into this plugin to reduce incompatible issues. Besides xml.vim, the builtin css.vim also has an issue with indentation below comments.

Those files are added now. So updating the plugin should work.