Implement Vue Beautifier

examples/nested-jsbeautifyrc/vue/expected/test.vue

@@ -0,0 +1,46 @@
+<template>
+<base-view>
+  <div slot="page-body" class="row">
+    Your content here!
+  </div>
+</base-view>
+</template>
+
+<script>
+export default {
+  data: function() {
+    return {
+      text: 'Hello, world!'
+    }
+  }
+}
+</script>
+
+<style lang="sass">
+nav {
+    ul {
+        margin:0 padding: 0;
+    }
+    li {
+        display: inline-block;
+    }
+    a {
+        display: block;
+    }
+}
+</style>
+
+<style lang="scss">
+nav {
+    ul {
+        margin: 0;
+        padding: 0;
+    }
+    li {
+        display: inline-block;
+    }
+    a {
+        display: block;
+    }
+}
+</style>

examples/nested-jsbeautifyrc/vue/original/test.vue

@@ -0,0 +1,45 @@
+<template>
+  <base-view>
+<div  slot="page-body" class="row">
+      Your content here!
+    </div>
+      </base-view>
+</template>
+
+<script>
+export default {
+  data: function() {
+return {
+  text: 'Hello, world!'
+}
+  }
+}
+</script>
+
+<style lang="sass">
+nav {
+ul {
+    margin: 0
+    padding: 0
+}
+  li {
+    display: inline-block
+}
+a {
+    display: block
+    }
+}
+</style>
+
+<style lang="scss">
+nav {
+  ul {
+    margin: 0;
+    padding: 0;
+  }
+  li { display: inline-block; }
+  a {
+    display: block;
+  }
+}
+</style>

src/beautifiers/index.coffee

@@ -66,6 +66,7 @@ module.exports = class Beautifiers extends EventEmitter
     'stylish-haskell'
     'tidy-markdown'
     'typescript-formatter'
+    'vue-beautifier'
     'yapf'
     'erl_tidy'
     'marko-beautifier'

src/beautifiers/vue-beautifier.coffee

@@ -0,0 +1,49 @@
+"use strict"
+Beautifier = require('./beautifier')
+prettydiff = require("prettydiff")
+_ = require('lodash')
+
+module.exports = class VueBeautifier extends Beautifier
+  name: "Vue Beautifier"
+
+  options:
+    Vue: true
+
+  beautify: (text, language, options) ->
+    return new @Promise((resolve, reject) ->
+      regexp = /(<(template|script|style)[^>]*>)((\s|\S)*?)<\/\2>/gi
+
+      resolve(text.replace(regexp, (match, begin, type, text) ->
+        lang = /lang\s*=\s*['"](\w+)["']/.exec(begin)?[1]
+
+        switch type
+          when "template"
+            switch lang
+              when "pug", "jade"
+                match.replace(text, "\n" + require("pug-beautify")(text, options) + "\n")
+              when undefined
+                match.replace(text, "\n" + require("js-beautify").html(text, options) + "\n")
+              else
+                match
+          when "script"
+            match.replace(text, "\n" + require("js-beautify")(text, options) + "\n")
+          when "style"
+            switch lang
+              when "sass", "scss"
+                options = _.merge options,
+                  source: text
+                  lang: "scss"
+                  mode: "beautify"
+                match.replace(text, prettydiff.api(options)[0])
+              when "less"
+                options = _.merge options,
+                source: text
+                lang: "less"
+                mode: "beautify"
+                match.replace(text, prettydiff.api(options)[0])
+              when undefined
+                match.replace(text, "\n" + require("js-beautify").css(text, options) + "\n")
+              else
+                match
+      ))
+    )

src/languages/index.coffee

@@ -64,6 +64,7 @@ module.exports = class Languages
     "twig"
     "typescript"
     "vala"
+    "vue"
     "visualforce"
     "xml"
     "xtemplate"

src/languages/vue.coffee

@@ -0,0 +1,23 @@
+module.exports = {
+
+  name: "Vue"
+  namespace: "vue"
+  fallback: ['html']
+
+  ###
+  Supported Grammars
+  ###
+  grammars: [
+    "Vue Component"
+  ]
+
+  ###
+  Supported extensions
+  ###
+  extensions: [
+    "vue"
+  ]
+
+  defaultBeautifier: "Vue Beautifier"
+
+}