Add Language Support for Vue component files.

[indiealexh]

Please see http://vuejs.github.io/vue-loader/start/spec.html for a spec on vue files.

Basic premise is its an XML/HTML file that can contain Javascript, Coffee script, Less, Sass or Stylus.
For now I can make use of linking components to source files, but would be nice to have support for Vue files themselves.

[prettydiff]

Would you mind running a bunch of Vue code examples through http://prettydiff.com/?m=beautify and see if that tool generates broken output? Please pick your nastiest and most complex examples to try to break that tool. I am thinking this language might already be supported.

[PaulCapestany]

+1

@indiealexh not sure if you're aware that there's actually already https://github.com/LeslieYQ/vue-format, but it'd be awesome to have Vue file formatting directly integrated into atom-beautify.

[SimulatedGREG]

+1 would love this in atom-beautify

[hitautodestruct]

+1

[xiaojian002]

+1

[beeplin]

+1
the existing vue-format package does not support coffeescript in .vue files. hope this can be done together with atom-beautifier

[muei]

Hi, ablove every one! You can use sublime text with Sublime-HTMLPrettify.Then append allowed_file_extensions vue. Then, this is very important , set html config, append html with "jslint_happy": true,.
Now use it happy with you.

[Glavin001]

I believe Sublime-HTMLPrettify ( https://github.com/victorporof/Sublime-HTMLPrettify ) uses JS-Beautify, which Atom-Beautify already supports.

All we need now is to add Vue language support. If someone could confirm that simply changing the grammar of their Vue file to something like HTML works, then we can add Vue support simply by using an existing beautifier.

[Glavin001]

If someone could make and publish a npm package that implements Vue beautifier -- maybe the author of https://github.com/LeslieYQ/vue-format/blob/master/lib/vue-format.coffee#L27-L50 will be interested in joining Atom-Beautify community -- then please let me know.

From an Atom-Beautify perspective, until #457 is designed and implemented, unless there is an existing beautifier targeting Vue, I do not think we can support it, yet.
Please see https://github.com/Glavin001/atom-beautify/blob/master/docs/add-languages-and-beautifiers.md if you would like to try implementing a beautifier in Atom-Beautify on your own.

The goal of #457 will be to support more complex languages like Vue that incorporate multiple languages within it (HTML, JavaScript, CoffeeScript, LESS, Sass, etc). By building support for this right into the core, I hope to provide unparalleled customization for beautification of these languages like Vue.

Thank you for your patience.

[beeplin]

I can confirm that vue language is basically html, with the following extra concerns:

• vue users always separate multiple attributes of html tags into different lines rather than putting them into one line:

<template>
  <div class="xxxx"
       id="xxxx"
      v-if="xxxxxx"
      >xxxxxx
  </div>
</template>

atom-beautifier already supports this, by enabling the attribute-wrap feather.

• vue file could possibly embeds other languages like jade, coffee-script, less, stylus... with the following syntax:

<template lang='jade'>
...
</template>
<script lang='coffee'>
...
</script>
<style lang='stylus'>
...
</style>

but i don't think this is necessary at the early stage of atom-beautifier's vue support. just normal html and css would be fine. For coffee, sometimes we use this kind of work-around to make editors recognize coffee in vue :

<script lang='coffee' type="text/coffeescript">
...
</script>

[leaves4j]

+1, @prettydiff are you plan to support vue file

[Airead]

+1

[Akryum]

+1

[jenil]

Has anyone figured this out?

[Glavin001]

@leaves4j : I believe @prettydiff is away right now.

@jgog : If what you want is to be able to beautify Vue files using the currently supported beautifiers, then you can do so by changing the grammar of your file within Atom: https://github.com/atom/grammar-selector
Select HTML or another supported grammar. Atom-Beautify will detect this change upon your next beautification.

If you wish to add Vue Language -- so you do not have to select grammar HTML -- you can do so by reading https://github.com/Glavin001/atom-beautify/blob/master/docs/add-languages-and-beautifiers.md#how-to-add-a-language and also taking a look at other similar Pull Requests.

Even though it is fairly simple to beautify Vue right now as HTML, I'm going to keep this issue open until we have full Vue support.

[jenil]

got it 👍 thanks!

[prettydiff]

@leaves4j I cannot remember if I were going to support this or not. I will reevaluate over the next week.

[sleimanx2]

+1

[prettydiff]

I looked over this and everything looks like it should already be supported by Pretty Diff. The forcing of markup attributes each onto their own line is accomplished by the force_attribute option: http://prettydiff.com/documentation.xhtml#force_attribute

[rebers]

@prettydiff @Glavin001
Vue.js is growing bigger and bigger, over 24k stars right now: https://github.com/vuejs/vue

It would be fantastic if you guys could make this work. Commercial editors such as PHPStorm and WebStorm already support this out of the box. It would be great if the Open Source community would catch up!

Cheers!

[prettydiff]

@devboxr Please pass some vue code through http://prettydiff.com/?m=beautify

Please try your most complex code samples and really see if you can make the beautifier fail. If the beautifier is already compatible with this we just need to make a configuration change to ensure language is added by name and file extension.

[rebers]

@prettydiff Hi Austin, thanks for this. I just tried it and while it complains about some attributes of HTML tags that are unknown to it, the output looks good! Tried it with some SCSS included (worked fine). What doesn't work is stuff like Jade templating inside vue, but I strongly doubt that this is something a lot of people do. Since the vue-loader goes a little above and beyond (meaning that it simply loads the loader for the lang attribute specified), it would be fairly unlikely to support all possible languages and markdown dialects available.

I'd suggest you make it work with the most common .vue files, which AFAIK are simple HTML, JavaScript (up to EcmaScript 2015, which seems as it is supported already by prettyfdiff) and CSS/SCSS/Stylus/LESS, which is also already supported in HTML files.

Does this help?

[prettydiff]

In that case I will look at submitting a pull request later today to beautify Vue as a HTML dialect. Do Vue files have a unique file extension? If for example I see the file myConfiguration.vue I should expect to beautify it as HTML right?

Languages heavily based upon indentation for syntax (Jade, CoffeeScript, Sass, Elixir) are really hard to support. Outside the official compiler almost nobody makes any kind of parser for these languages and so beautifiers are even more rare. Pretty Diff does not provide any parsing capability for this either.

[rebers]

That sounds great!

Vue files do indeed have a unique file extension (.vue) and all of them are structured like so:

<template>
  <div class="icon-input">
    <input type="{{ type }}" class="icon-input__input form-control" placeholder="{{ placeholder }}" @focus="onFocus" @blur="onBlur" v-model="value">
    <i class="icon-input__icon fa {{ icon }}" v-el:icon></i>
  </div>
</template>

<script>
  export default {
    props: {
      value: {
        type: String,
        required: true,
      },
      type: {
        type: String,
        default: 'text',
      },
      placeholder: {
        type: String,
      },
      icon: {
        type: String,
        default: 'fa-question-circle-o',
      },
    },
    methods: {
      onFocus() {
        this.$els.icon.classList.add('icon-input__icon--active');
      },
      onBlur() {
        this.$els.icon.classList.remove('icon-input__icon--active');
      },
    },
  };
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import "../scss/base/_colors";
  @import "../scss/base/_variables";
  @import "../scss/helpers/mixins";

  .icon-input {
    position: relative;

    &__input {
      padding-left: 25px;
    }

    &__icon {
      position: absolute;
      left: 5px;
      top: 50%;
      transform: translateY(-50%);
    }

    &--active {
      color: $color-primary;
    }
  }
</style>

I hope this helps!

[weifeiyue]

I think We can do it like this : find the config from '.atom\packages\atom-beautify\src\languages\html.coffee' ,and and 'vue' to the extensions: [ "html"] , so atom-beautify can deal with it like html