leafOfTree / vim-vue-plugin

Vim syntax and indent plugin for .vue files
The Unlicense
177 stars 9 forks source link

Stacking indentation of <template> #13

Closed Strahinja closed 5 years ago

Strahinja commented 5 years ago

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'
leafOfTree commented 5 years ago

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

Strahinja commented 5 years ago

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.

Strahinja commented 5 years ago

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

leafOfTree commented 5 years ago

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.

Strahinja commented 5 years ago
  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.
leafOfTree commented 5 years ago

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.

Strahinja commented 5 years ago

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.

leafOfTree commented 5 years ago

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.

Strahinja commented 5 years ago

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

leafOfTree commented 5 years ago

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

rodrigore commented 5 years ago

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

What was the solution?

leafOfTree commented 5 years ago

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
leafOfTree commented 5 years ago

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.

leafOfTree commented 5 years ago

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