From 915327d61d3da3a9d8cd8b3010d6fce7ef49ae85 Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Fri, 17 Apr 2020 07:54:24 +0900
Subject: [PATCH] Vue: Support custom blocks (#8023)

* Support Vue Custom Block

* Add changelog

* Udpate snapshots

* Support "type" for json

* Remove guessing languages

* Modify to reuse inferScriptParser logic

* Implement withInnerParts arg for stripTrailingHardline

* Rename isVueCustomBlock

* Set `verbose: true`

* Use getParserName

* Ignore vueIndentScriptAndStyle

* tmp

* Fix formatting

* Add tests

* Fix by lint

* Revert "Set `verbose: true`"

This reverts commit f65c7cd7d814d3149aadbeb3cfd00c5372887c33.

* loop with i--

* Modify to preserve unknown langauge

* Support embeddedLanguageFormatting

* Fix by lint

* Fix mistake

* Modify to preserve unknown lang

* Remove unnecesary condition

* Add error tests

Co-authored-by: fisker Cheung <lionkay@gmail.com>
---
 changelog_unreleased/vue/pr-8023.md           |   27 +
 src/common/util.js                            |   18 +
 src/document/doc-utils.js                     |   20 +-
 src/language-html/preprocess.js               |   12 +-
 src/language-html/printer-html.js             |   23 +-
 src/language-html/utils.js                    |  145 +-
 src/language-markdown/embed.js                |   19 +-
 .../vue/__snapshots__/jsfmt.spec.js.snap      |   55 +
 tests/errors/vue/custom_block.vue             |    3 +
 tests/errors/vue/jsfmt.spec.js                |    6 +
 .../__snapshots__/jsfmt.spec.js.snap          | 1513 +++++++++++++++++
 tests/html_vue_custom_block/graphql.vue       |   11 +
 tests/html_vue_custom_block/handlebars.vue    |    3 +
 tests/html_vue_custom_block/jsfmt.spec.js     |    5 +
 tests/html_vue_custom_block/json.vue          |   34 +
 .../html_vue_custom_block/lang-attribute.vue  |    4 +
 tests/html_vue_custom_block/markdown.vue      |   23 +
 tests/html_vue_custom_block/unknown.vue       |   25 +
 tests/html_vue_custom_block/yaml.vue          |    6 +
 19 files changed, 1862 insertions(+), 90 deletions(-)
 create mode 100644 changelog_unreleased/vue/pr-8023.md
 create mode 100644 tests/errors/vue/__snapshots__/jsfmt.spec.js.snap
 create mode 100644 tests/errors/vue/custom_block.vue
 create mode 100644 tests/errors/vue/jsfmt.spec.js
 create mode 100644 tests/html_vue_custom_block/__snapshots__/jsfmt.spec.js.snap
 create mode 100644 tests/html_vue_custom_block/graphql.vue
 create mode 100644 tests/html_vue_custom_block/handlebars.vue
 create mode 100644 tests/html_vue_custom_block/jsfmt.spec.js
 create mode 100644 tests/html_vue_custom_block/json.vue
 create mode 100644 tests/html_vue_custom_block/lang-attribute.vue
 create mode 100644 tests/html_vue_custom_block/markdown.vue
 create mode 100644 tests/html_vue_custom_block/unknown.vue
 create mode 100644 tests/html_vue_custom_block/yaml.vue

diff --git a/changelog_unreleased/vue/pr-8023.md b/changelog_unreleased/vue/pr-8023.md
new file mode 100644
index 000000000..894a93124
--- /dev/null
+++ b/changelog_unreleased/vue/pr-8023.md
@@ -0,0 +1,27 @@
+#### Support custom blocks ([#8023](https://github.com/prettier/prettier/pull/8023) by [@sosukesuzuki](https://github.com/sosukesuzuki))
+
+Support [vue-loader custom blocks](https://vue-loader.vuejs.org/guide/custom-blocks.html) in SFC with `lang` attribute.
+
+<!-- prettier-ignore -->
+```html
+<!-- Input -->
+<custom lang="json">
+{
+  "foo":
+"bar"}
+</custom>
+
+<!-- Prettier stable -->
+<custom lang="json">
+{
+  "foo":
+"bar"}
+</custom>
+
+<!-- Prettier master -->
+<custom lang="json">
+{
+  "foo": "bar"
+}
+</custom>
+```
diff --git a/src/common/util.js b/src/common/util.js
index 0de284663..f398e76e7 100644
--- a/src/common/util.js
+++ b/src/common/util.js
@@ -3,6 +3,7 @@
 const stringWidth = require("string-width");
 const escapeStringRegexp = require("escape-string-regexp");
 const getLast = require("../utils/get-last");
+const support = require("../main/support");
 
 // eslint-disable-next-line no-control-regex
 const notAsciiRegex = /[^\x20-\x7F]/;
@@ -820,6 +821,22 @@ function replaceEndOfLineWith(text, replacement) {
   return parts;
 }
 
+function getParserName(lang, options) {
+  const supportInfo = support.getSupportInfo({ plugins: options.plugins });
+  const language = supportInfo.languages.find(
+    (language) =>
+      language.name.toLowerCase() === lang ||
+      (language.aliases && language.aliases.includes(lang)) ||
+      (language.extensions &&
+        language.extensions.find((ext) => ext === `.${lang}`))
+  );
+  if (language) {
+    return language.parsers[0];
+  }
+
+  return null;
+}
+
 module.exports = {
   replaceEndOfLineWith,
   getStringWidth,
@@ -828,6 +845,7 @@ module.exports = {
   getPrecedence,
   shouldFlatten,
   isBitwiseOperator,
+  getParserName,
   getPenultimate,
   getLast,
   getNextNonSpaceNonCommentCharacterIndexWithStartIndex,
diff --git a/src/document/doc-utils.js b/src/document/doc-utils.js
index 27afc174b..70e824d9c 100644
--- a/src/document/doc-utils.js
+++ b/src/document/doc-utils.js
@@ -182,17 +182,31 @@ function removeLines(doc) {
   return mapDoc(doc, removeLinesFn);
 }
 
-function stripTrailingHardline(doc) {
+function getInnerParts(doc) {
+  let { parts } = doc;
+  let lastPart;
+  // Avoid a falsy element like ""
+  for (let i = doc.parts.length; i > 0 && !lastPart; i--) {
+    lastPart = parts[i - 1];
+  }
+  if (lastPart.type === "group") {
+    parts = lastPart.contents.parts;
+  }
+  return parts;
+}
+
+function stripTrailingHardline(doc, withInnerParts = false) {
   // HACK remove ending hardline, original PR: #1984
   if (doc.type === "concat" && doc.parts.length !== 0) {
-    const lastPart = doc.parts[doc.parts.length - 1];
+    const parts = withInnerParts ? getInnerParts(doc) : doc.parts;
+    const lastPart = parts[parts.length - 1];
     if (lastPart.type === "concat") {
       if (
         lastPart.parts.length === 2 &&
         lastPart.parts[0].hard &&
         lastPart.parts[1].type === "break-parent"
       ) {
-        return { type: "concat", parts: doc.parts.slice(0, -1) };
+        return { type: "concat", parts: parts.slice(0, -1) };
       }
 
       return {
diff --git a/src/language-html/preprocess.js b/src/language-html/preprocess.js
index 956b82d43..81305da69 100644
--- a/src/language-html/preprocess.js
+++ b/src/language-html/preprocess.js
@@ -426,7 +426,7 @@ function addCssDisplay(ast, options) {
  * - add `isTrailingSpaceSensitive` field
  * - add `isDanglingSpaceSensitive` field for parent nodes
  */
-function addIsSpaceSensitive(ast /*, options */) {
+function addIsSpaceSensitive(ast, options) {
   return ast.map((node) => {
     if (!node.children) {
       return node;
@@ -443,8 +443,14 @@ function addIsSpaceSensitive(ast /*, options */) {
         .map((child) => {
           return {
             ...child,
-            isLeadingSpaceSensitive: isLeadingSpaceSensitiveNode(child),
-            isTrailingSpaceSensitive: isTrailingSpaceSensitiveNode(child),
+            isLeadingSpaceSensitive: isLeadingSpaceSensitiveNode(
+              child,
+              options
+            ),
+            isTrailingSpaceSensitive: isTrailingSpaceSensitiveNode(
+              child,
+              options
+            ),
           };
         })
         .map((child, index, children) => ({
diff --git a/src/language-html/printer-html.js b/src/language-html/printer-html.js
index 8baaaff21..7479997e6 100644
--- a/src/language-html/printer-html.js
+++ b/src/language-html/printer-html.js
@@ -30,6 +30,7 @@ const {
   getPrettierIgnoreAttributeCommentData,
   hasPrettierIgnore,
   inferScriptParser,
+  isVueCustomBlock,
   isScriptLikeTag,
   isTextLikeNode,
   normalizeParts,
@@ -98,6 +99,25 @@ function embed(path, print, textToDoc, options) {
             ? " "
             : line,
         ]);
+      } else if (isVueCustomBlock(node.parent, options)) {
+        const parser = inferScriptParser(node.parent, options);
+        let printed;
+        if (parser) {
+          try {
+            printed = textToDoc(node.value, { parser });
+          } catch (error) {
+            // Do nothing
+          }
+        }
+        if (printed == null) {
+          printed = node.value;
+        }
+        return concat([
+          parser ? breakParent : "",
+          printOpeningTagPrefix(node),
+          stripTrailingHardline(printed, true),
+          printClosingTagSuffix(node),
+        ]);
       }
       break;
     }
@@ -225,7 +245,8 @@ function genericPrint(path, options, print) {
                       ? ifBreak(indent(childrenDoc), childrenDoc, {
                           groupId: attrGroupId,
                         })
-                      : isScriptLikeTag(node) &&
+                      : (isScriptLikeTag(node) ||
+                          isVueCustomBlock(node, options)) &&
                         node.parent.type === "root" &&
                         options.parser === "vue" &&
                         !options.vueIndentScriptAndStyle
diff --git a/src/language-html/utils.js b/src/language-html/utils.js
index 01e9ecd5f..04df58f85 100644
--- a/src/language-html/utils.js
+++ b/src/language-html/utils.js
@@ -6,6 +6,7 @@ const {
   CSS_WHITE_SPACE_TAGS,
   CSS_WHITE_SPACE_DEFAULT,
 } = require("./constants.evaluate");
+const { getParserName } = require("../common/util");
 
 const htmlTagNames = require("html-tag-names");
 const htmlElementAttributes = require("html-element-attributes");
@@ -60,23 +61,6 @@ function shouldPreserveContent(node, options) {
     return true;
   }
 
-  // top-level elements (excluding <template>, <style> and <script>) in Vue SFC are considered custom block
-  // custom blocks can be written in other languages so we should preserve them to not break the code
-  if (
-    options.parser === "vue" &&
-    node.type === "element" &&
-    node.parent.type === "root" &&
-    ![
-      "template",
-      "style",
-      "script",
-      // vue parser can be used for vue dom template as well, so we should still format top-level <html>
-      "html",
-    ].includes(node.fullName)
-  ) {
-    return true;
-  }
-
   // TODO: handle non-text children in <pre>
   if (
     isPreLikeNode(node) &&
@@ -87,6 +71,14 @@ function shouldPreserveContent(node, options) {
     return true;
   }
 
+  if (
+    isVueCustomBlock(node, options) &&
+    (options.embeddedLanguageFormatting === "off" ||
+      !inferScriptParser(node, options))
+  ) {
+    return true;
+  }
+
   return false;
 }
 
@@ -161,7 +153,7 @@ function isIndentationSensitiveNode(node) {
   return getNodeCssStyleWhiteSpace(node).startsWith("pre");
 }
 
-function isLeadingSpaceSensitiveNode(node) {
+function isLeadingSpaceSensitiveNode(node, options) {
   const isLeadingSpaceSensitive = _isLeadingSpaceSensitiveNode();
 
   if (
@@ -202,6 +194,7 @@ function isLeadingSpaceSensitiveNode(node) {
       (node.parent.type === "root" ||
         (isPreLikeNode(node) && node.parent) ||
         isScriptLikeTag(node.parent) ||
+        isVueCustomBlock(node.parent, options) ||
         !isFirstChildLeadingSpaceSensitiveCssDisplay(node.parent.cssDisplay))
     ) {
       return false;
@@ -218,7 +211,7 @@ function isLeadingSpaceSensitiveNode(node) {
   }
 }
 
-function isTrailingSpaceSensitiveNode(node) {
+function isTrailingSpaceSensitiveNode(node, options) {
   if (isFrontMatterNode(node)) {
     return false;
   }
@@ -244,6 +237,7 @@ function isTrailingSpaceSensitiveNode(node) {
     (node.parent.type === "root" ||
       (isPreLikeNode(node) && node.parent) ||
       isScriptLikeTag(node.parent) ||
+      isVueCustomBlock(node.parent, options) ||
       !isLastChildTrailingSpaceSensitiveCssDisplay(node.parent.cssDisplay))
   ) {
     return false;
@@ -361,59 +355,68 @@ function hasNonTextChild(node) {
   return node.children && node.children.some((child) => child.type !== "text");
 }
 
-function inferScriptParser(node) {
+function _inferScriptParser(node) {
+  const { type, lang } = node.attrMap;
+  if (
+    type === "module" ||
+    type === "text/javascript" ||
+    type === "text/babel" ||
+    type === "application/javascript" ||
+    lang === "jsx"
+  ) {
+    return "babel";
+  }
+
+  if (type === "application/x-typescript" || lang === "ts" || lang === "tsx") {
+    return "typescript";
+  }
+
+  if (type === "text/markdown") {
+    return "markdown";
+  }
+
+  if (type && (type.endsWith("json") || type.endsWith("importmap"))) {
+    return "json";
+  }
+
+  if (type === "text/x-handlebars-template") {
+    return "glimmer";
+  }
+}
+
+function inferStyleParser(node) {
+  const { lang } = node.attrMap;
+  if (lang === "postcss" || lang === "css") {
+    return "css";
+  }
+
+  if (lang === "scss") {
+    return "scss";
+  }
+
+  if (lang === "less") {
+    return "less";
+  }
+}
+
+function inferScriptParser(node, options) {
   if (node.name === "script" && !node.attrMap.src) {
-    if (
-      (!node.attrMap.lang && !node.attrMap.type) ||
-      node.attrMap.type === "module" ||
-      node.attrMap.type === "text/javascript" ||
-      node.attrMap.type === "text/babel" ||
-      node.attrMap.type === "application/javascript" ||
-      node.attrMap.lang === "jsx"
-    ) {
+    if (!node.attrMap.lang && !node.attrMap.type) {
       return "babel";
     }
-
-    if (
-      node.attrMap.type === "application/x-typescript" ||
-      node.attrMap.lang === "ts" ||
-      node.attrMap.lang === "tsx"
-    ) {
-      return "typescript";
-    }
-
-    if (node.attrMap.type === "text/markdown") {
-      return "markdown";
-    }
-
-    if (
-      node.attrMap.type.endsWith("json") ||
-      node.attrMap.type.endsWith("importmap")
-    ) {
-      return "json";
-    }
-
-    if (node.attrMap.type === "text/x-handlebars-template") {
-      return "glimmer";
-    }
+    return _inferScriptParser(node);
   }
 
   if (node.name === "style") {
-    if (
-      !node.attrMap.lang ||
-      node.attrMap.lang === "postcss" ||
-      node.attrMap.lang === "css"
-    ) {
-      return "css";
-    }
+    return inferStyleParser(node) || "css";
+  }
 
-    if (node.attrMap.lang === "scss") {
-      return "scss";
-    }
-
-    if (node.attrMap.lang === "less") {
-      return "less";
-    }
+  if (options && isVueCustomBlock(node, options)) {
+    return (
+      _inferScriptParser(node) ||
+      inferStyleParser(node) ||
+      getParserName(node.attrMap.lang, options)
+    );
   }
 
   return null;
@@ -625,6 +628,17 @@ function unescapeQuoteEntities(text) {
   return text.replace(/&apos;/g, "'").replace(/&quot;/g, '"');
 }
 
+// top-level elements (excluding <template>, <style> and <script>) in Vue SFC are considered custom block
+const rootElementsSet = new Set(["template", "style", "script", "html"]);
+function isVueCustomBlock(node, options) {
+  return (
+    options.parser === "vue" &&
+    node.type === "element" &&
+    node.parent.type === "root" &&
+    !rootElementsSet.has(node.fullName)
+  );
+}
+
 module.exports = {
   HTML_ELEMENT_ATTRIBUTES,
   HTML_TAGS,
@@ -642,6 +656,7 @@ module.exports = {
   hasPrettierIgnore,
   identity,
   inferScriptParser,
+  isVueCustomBlock,
   isDanglingSpaceSensitiveNode,
   isFrontMatterNode,
   isIndentationSensitiveNode,
diff --git a/src/language-markdown/embed.js b/src/language-markdown/embed.js
index fe5e2bcf2..b8fda0155 100644
--- a/src/language-markdown/embed.js
+++ b/src/language-markdown/embed.js
@@ -1,7 +1,6 @@
 "use strict";
 
 const util = require("../common/util");
-const support = require("../main/support");
 const {
   builders: { hardline, literalline, concat, markAsRoot },
   utils: { mapDoc },
@@ -15,7 +14,7 @@ function embed(path, print, textToDoc, options) {
     // only look for the first string so as to support [markdown-preview-enhanced](https://shd101wyy.github.io/markdown-preview-enhanced/#/code-chunk)
     const langMatch = node.lang.match(/^[\w-]+/);
     const lang = langMatch ? langMatch[0] : "";
-    const parser = getParserName(lang);
+    const parser = util.getParserName(lang, options);
     if (parser) {
       const styleUnit = options.__inJsTemplate ? "~" : "`";
       const style = styleUnit.repeat(
@@ -65,22 +64,6 @@ function embed(path, print, textToDoc, options) {
 
   return null;
 
-  function getParserName(lang) {
-    const supportInfo = support.getSupportInfo({ plugins: options.plugins });
-    const language = supportInfo.languages.find(
-      (language) =>
-        language.name.toLowerCase() === lang ||
-        (language.aliases && language.aliases.includes(lang)) ||
-        (language.extensions &&
-          language.extensions.find((ext) => ext === `.${lang}`))
-    );
-    if (language) {
-      return language.parsers[0];
-    }
-
-    return null;
-  }
-
   function replaceNewlinesWithLiterallines(doc) {
     return mapDoc(doc, (currentDoc) =>
       typeof currentDoc === "string" && currentDoc.includes("\n")
diff --git a/tests/errors/vue/__snapshots__/jsfmt.spec.js.snap b/tests/errors/vue/__snapshots__/jsfmt.spec.js.snap
new file mode 100644
index 000000000..4fd7b9c86
--- /dev/null
+++ b/tests/errors/vue/__snapshots__/jsfmt.spec.js.snap
@@ -0,0 +1,55 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`custom_block.vue error test 1`] = `
+"Unexpected character \\"\\"\\" (2:16)
+  1 | <custom lang=\\"js\\">
+> 2 | const foo = \\"</\\";
+    |                ^
+  3 | </custom>
+  4 | "
+`;
+
+exports[`custom_block.vue error test 2`] = `
+"Unexpected character \\"\\"\\" (2:16)
+  1 | <custom lang=\\"js\\">
+> 2 | const foo = \\"</\\";
+    |                ^
+  3 | </custom>
+  4 | "
+`;
+
+exports[`custom_block.vue error test 3`] = `
+"Unexpected character \\"\\"\\" (2:16)
+  1 | <custom lang=\\"js\\">
+> 2 | const foo = \\"</\\";
+    |                ^
+  3 | </custom>
+  4 | "
+`;
+
+exports[`custom_block.vue error test 4`] = `
+"Unexpected character \\"\\"\\" (2:16)
+  1 | <custom lang=\\"js\\">
+> 2 | const foo = \\"</\\";
+    |                ^
+  3 | </custom>
+  4 | "
+`;
+
+exports[`custom_block.vue error test 5`] = `
+"Unexpected character \\"\\"\\" (2:16)
+  1 | <custom lang=\\"js\\">
+> 2 | const foo = \\"</\\";
+    |                ^
+  3 | </custom>
+  4 | "
+`;
+
+exports[`custom_block.vue error test 6`] = `
+"Unexpected character \\"\\"\\" (2:16)
+  1 | <custom lang=\\"js\\">
+> 2 | const foo = \\"</\\";
+    |                ^
+  3 | </custom>
+  4 | "
+`;
diff --git a/tests/errors/vue/custom_block.vue b/tests/errors/vue/custom_block.vue
new file mode 100644
index 000000000..b08272c6a
--- /dev/null
+++ b/tests/errors/vue/custom_block.vue
@@ -0,0 +1,3 @@
+<custom lang="js">
+const foo = "</";
+</custom>
diff --git a/tests/errors/vue/jsfmt.spec.js b/tests/errors/vue/jsfmt.spec.js
new file mode 100644
index 000000000..4655fdd71
--- /dev/null
+++ b/tests/errors/vue/jsfmt.spec.js
@@ -0,0 +1,6 @@
+run_spec(__dirname, ["vue"]);
+run_spec(__dirname, ["vue"], { trailingComma: "none" });
+run_spec(__dirname, ["vue"]);
+run_spec(__dirname, ["vue"], { semi: false });
+run_spec(__dirname, ["vue"], { vueIndentScriptAndStyle: true });
+run_spec(__dirname, ["vue"], { embeddedLanguageFormatting: "off" });
diff --git a/tests/html_vue_custom_block/__snapshots__/jsfmt.spec.js.snap b/tests/html_vue_custom_block/__snapshots__/jsfmt.spec.js.snap
new file mode 100644
index 000000000..04c35d2c7
--- /dev/null
+++ b/tests/html_vue_custom_block/__snapshots__/jsfmt.spec.js.snap
@@ -0,0 +1,1513 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`graphql.vue format 1`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+trailingComma: "none"
+                                                                                | printWidth
+=====================================input======================================
+<page-query lang="graphql">
+query { posts: allWordPressPost {
+    edges {
+   node {
+          id
+      title
+      }
+    }
+  }
+}
+</page-query>
+
+=====================================output=====================================
+<page-query lang="graphql">
+query {
+  posts: allWordPressPost {
+    edges {
+      node {
+        id
+        title
+      }
+    }
+  }
+}
+</page-query>
+
+================================================================================
+`;
+
+exports[`graphql.vue format 2`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<page-query lang="graphql">
+query { posts: allWordPressPost {
+    edges {
+   node {
+          id
+      title
+      }
+    }
+  }
+}
+</page-query>
+
+=====================================output=====================================
+<page-query lang="graphql">
+query {
+  posts: allWordPressPost {
+    edges {
+      node {
+        id
+        title
+      }
+    }
+  }
+}
+</page-query>
+
+================================================================================
+`;
+
+exports[`graphql.vue format 3`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+semi: false
+                                                                                | printWidth
+=====================================input======================================
+<page-query lang="graphql">
+query { posts: allWordPressPost {
+    edges {
+   node {
+          id
+      title
+      }
+    }
+  }
+}
+</page-query>
+
+=====================================output=====================================
+<page-query lang="graphql">
+query {
+  posts: allWordPressPost {
+    edges {
+      node {
+        id
+        title
+      }
+    }
+  }
+}
+</page-query>
+
+================================================================================
+`;
+
+exports[`graphql.vue format 4`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+vueIndentScriptAndStyle: true
+                                                                                | printWidth
+=====================================input======================================
+<page-query lang="graphql">
+query { posts: allWordPressPost {
+    edges {
+   node {
+          id
+      title
+      }
+    }
+  }
+}
+</page-query>
+
+=====================================output=====================================
+<page-query lang="graphql">
+  query {
+    posts: allWordPressPost {
+      edges {
+        node {
+          id
+          title
+        }
+      }
+    }
+  }
+</page-query>
+
+================================================================================
+`;
+
+exports[`graphql.vue format 5`] = `
+====================================options=====================================
+embeddedLanguageFormatting: "off"
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<page-query lang="graphql">
+query { posts: allWordPressPost {
+    edges {
+   node {
+          id
+      title
+      }
+    }
+  }
+}
+</page-query>
+
+=====================================output=====================================
+<page-query lang="graphql">
+query { posts: allWordPressPost {
+    edges {
+   node {
+          id
+      title
+      }
+    }
+  }
+}
+</page-query>
+
+================================================================================
+`;
+
+exports[`handlebars.vue format 1`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+trailingComma: "none"
+                                                                                | printWidth
+=====================================input======================================
+<custom type="text/x-handlebars-template">
+Handlebars <b>{{     doesWhat}}</b>
+</custom>
+
+=====================================output=====================================
+<custom type="text/x-handlebars-template">
+Handlebars <b>{{ doesWhat }}</b>
+</custom>
+
+================================================================================
+`;
+
+exports[`handlebars.vue format 2`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<custom type="text/x-handlebars-template">
+Handlebars <b>{{     doesWhat}}</b>
+</custom>
+
+=====================================output=====================================
+<custom type="text/x-handlebars-template">
+Handlebars <b>{{ doesWhat }}</b>
+</custom>
+
+================================================================================
+`;
+
+exports[`handlebars.vue format 3`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+semi: false
+                                                                                | printWidth
+=====================================input======================================
+<custom type="text/x-handlebars-template">
+Handlebars <b>{{     doesWhat}}</b>
+</custom>
+
+=====================================output=====================================
+<custom type="text/x-handlebars-template">
+Handlebars <b>{{ doesWhat }}</b>
+</custom>
+
+================================================================================
+`;
+
+exports[`handlebars.vue format 4`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+vueIndentScriptAndStyle: true
+                                                                                | printWidth
+=====================================input======================================
+<custom type="text/x-handlebars-template">
+Handlebars <b>{{     doesWhat}}</b>
+</custom>
+
+=====================================output=====================================
+<custom type="text/x-handlebars-template">
+  Handlebars <b>{{ doesWhat }}</b>
+</custom>
+
+================================================================================
+`;
+
+exports[`handlebars.vue format 5`] = `
+====================================options=====================================
+embeddedLanguageFormatting: "off"
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<custom type="text/x-handlebars-template">
+Handlebars <b>{{     doesWhat}}</b>
+</custom>
+
+=====================================output=====================================
+<custom type="text/x-handlebars-template">
+Handlebars <b>{{     doesWhat}}</b>
+</custom>
+
+================================================================================
+`;
+
+exports[`json.vue format 1`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+trailingComma: "none"
+                                                                                | printWidth
+=====================================input======================================
+<i18n lang="json">
+{ "en": {
+    "hello": "hello world!"
+    
+    
+    }, "ja": {
+   
+   
+    "hello": "こんにちは、世界！"
+  }
+}
+</i18n>
+
+<i18n type="application/json">
+{ "en": {
+    "hello": "hello world!"
+
+
+    }, "ja": {
+
+
+    "hello": "こんにちは、世界！"
+  }
+}
+</i18n>
+
+<custom lang="json">{
+  "a": 1
+}</custom>
+
+<custom lang="json">{
+  "a": 1
+}
+</custom>
+
+=====================================output=====================================
+<i18n lang="json">
+{
+  "en": {
+    "hello": "hello world!"
+  },
+  "ja": {
+    "hello": "こんにちは、世界！"
+  }
+}
+</i18n>
+
+<i18n type="application/json">
+{
+  "en": {
+    "hello": "hello world!"
+  },
+  "ja": {
+    "hello": "こんにちは、世界！"
+  }
+}
+</i18n>
+
+<custom lang="json">
+{
+  "a": 1
+}
+</custom>
+
+<custom lang="json">
+{
+  "a": 1
+}
+</custom>
+
+================================================================================
+`;
+
+exports[`json.vue format 2`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<i18n lang="json">
+{ "en": {
+    "hello": "hello world!"
+    
+    
+    }, "ja": {
+   
+   
+    "hello": "こんにちは、世界！"
+  }
+}
+</i18n>
+
+<i18n type="application/json">
+{ "en": {
+    "hello": "hello world!"
+
+
+    }, "ja": {
+
+
+    "hello": "こんにちは、世界！"
+  }
+}
+</i18n>
+
+<custom lang="json">{
+  "a": 1
+}</custom>
+
+<custom lang="json">{
+  "a": 1
+}
+</custom>
+
+=====================================output=====================================
+<i18n lang="json">
+{
+  "en": {
+    "hello": "hello world!"
+  },
+  "ja": {
+    "hello": "こんにちは、世界！"
+  }
+}
+</i18n>
+
+<i18n type="application/json">
+{
+  "en": {
+    "hello": "hello world!"
+  },
+  "ja": {
+    "hello": "こんにちは、世界！"
+  }
+}
+</i18n>
+
+<custom lang="json">
+{
+  "a": 1
+}
+</custom>
+
+<custom lang="json">
+{
+  "a": 1
+}
+</custom>
+
+================================================================================
+`;
+
+exports[`json.vue format 3`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+semi: false
+                                                                                | printWidth
+=====================================input======================================
+<i18n lang="json">
+{ "en": {
+    "hello": "hello world!"
+    
+    
+    }, "ja": {
+   
+   
+    "hello": "こんにちは、世界！"
+  }
+}
+</i18n>
+
+<i18n type="application/json">
+{ "en": {
+    "hello": "hello world!"
+
+
+    }, "ja": {
+
+
+    "hello": "こんにちは、世界！"
+  }
+}
+</i18n>
+
+<custom lang="json">{
+  "a": 1
+}</custom>
+
+<custom lang="json">{
+  "a": 1
+}
+</custom>
+
+=====================================output=====================================
+<i18n lang="json">
+{
+  "en": {
+    "hello": "hello world!"
+  },
+  "ja": {
+    "hello": "こんにちは、世界！"
+  }
+}
+</i18n>
+
+<i18n type="application/json">
+{
+  "en": {
+    "hello": "hello world!"
+  },
+  "ja": {
+    "hello": "こんにちは、世界！"
+  }
+}
+</i18n>
+
+<custom lang="json">
+{
+  "a": 1
+}
+</custom>
+
+<custom lang="json">
+{
+  "a": 1
+}
+</custom>
+
+================================================================================
+`;
+
+exports[`json.vue format 4`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+vueIndentScriptAndStyle: true
+                                                                                | printWidth
+=====================================input======================================
+<i18n lang="json">
+{ "en": {
+    "hello": "hello world!"
+    
+    
+    }, "ja": {
+   
+   
+    "hello": "こんにちは、世界！"
+  }
+}
+</i18n>
+
+<i18n type="application/json">
+{ "en": {
+    "hello": "hello world!"
+
+
+    }, "ja": {
+
+
+    "hello": "こんにちは、世界！"
+  }
+}
+</i18n>
+
+<custom lang="json">{
+  "a": 1
+}</custom>
+
+<custom lang="json">{
+  "a": 1
+}
+</custom>
+
+=====================================output=====================================
+<i18n lang="json">
+  {
+    "en": {
+      "hello": "hello world!"
+    },
+    "ja": {
+      "hello": "こんにちは、世界！"
+    }
+  }
+</i18n>
+
+<i18n type="application/json">
+  {
+    "en": {
+      "hello": "hello world!"
+    },
+    "ja": {
+      "hello": "こんにちは、世界！"
+    }
+  }
+</i18n>
+
+<custom lang="json">
+  {
+    "a": 1
+  }
+</custom>
+
+<custom lang="json">
+  {
+    "a": 1
+  }
+</custom>
+
+================================================================================
+`;
+
+exports[`json.vue format 5`] = `
+====================================options=====================================
+embeddedLanguageFormatting: "off"
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<i18n lang="json">
+{ "en": {
+    "hello": "hello world!"
+    
+    
+    }, "ja": {
+   
+   
+    "hello": "こんにちは、世界！"
+  }
+}
+</i18n>
+
+<i18n type="application/json">
+{ "en": {
+    "hello": "hello world!"
+
+
+    }, "ja": {
+
+
+    "hello": "こんにちは、世界！"
+  }
+}
+</i18n>
+
+<custom lang="json">{
+  "a": 1
+}</custom>
+
+<custom lang="json">{
+  "a": 1
+}
+</custom>
+
+=====================================output=====================================
+<i18n lang="json">
+{ "en": {
+    "hello": "hello world!"
+    
+    
+    }, "ja": {
+   
+   
+    "hello": "こんにちは、世界！"
+  }
+}
+</i18n>
+
+<i18n type="application/json">
+{ "en": {
+    "hello": "hello world!"
+
+
+    }, "ja": {
+
+
+    "hello": "こんにちは、世界！"
+  }
+}
+</i18n>
+
+<custom lang="json">{
+  "a": 1
+}</custom>
+
+<custom lang="json">{
+  "a": 1
+}
+</custom>
+
+================================================================================
+`;
+
+exports[`lang-attribute.vue format 1`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+trailingComma: "none"
+                                                                                | printWidth
+=====================================input======================================
+<custom lang="js">
+const foo
+      = 'foo'
+</custom>
+
+=====================================output=====================================
+<custom lang="js">
+const foo = "foo";
+</custom>
+
+================================================================================
+`;
+
+exports[`lang-attribute.vue format 2`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<custom lang="js">
+const foo
+      = 'foo'
+</custom>
+
+=====================================output=====================================
+<custom lang="js">
+const foo = "foo";
+</custom>
+
+================================================================================
+`;
+
+exports[`lang-attribute.vue format 3`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+semi: false
+                                                                                | printWidth
+=====================================input======================================
+<custom lang="js">
+const foo
+      = 'foo'
+</custom>
+
+=====================================output=====================================
+<custom lang="js">
+const foo = "foo"
+</custom>
+
+================================================================================
+`;
+
+exports[`lang-attribute.vue format 4`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+vueIndentScriptAndStyle: true
+                                                                                | printWidth
+=====================================input======================================
+<custom lang="js">
+const foo
+      = 'foo'
+</custom>
+
+=====================================output=====================================
+<custom lang="js">
+  const foo = "foo";
+</custom>
+
+================================================================================
+`;
+
+exports[`lang-attribute.vue format 5`] = `
+====================================options=====================================
+embeddedLanguageFormatting: "off"
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<custom lang="js">
+const foo
+      = 'foo'
+</custom>
+
+=====================================output=====================================
+<custom lang="js">
+const foo
+      = 'foo'
+</custom>
+
+================================================================================
+`;
+
+exports[`markdown.vue format 1`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+trailingComma: "none"
+                                                                                | printWidth
+=====================================input======================================
+<docs lang="markdown">
+# Foo
+- bar
+- baz
+
+| Age | Time | Food | Gold | Requirement |
+  | ------------ | ----- | ---- | ---- | ----------------------- |
+  | Feudal Age | 02:10 | 500 | 0 | Dark Age building x 2 |
+  | Castle Age | 02:40 | 800 | 200 |- |
+  | Imperial Age | 03:30 | 1000 | 800 | Castle Age building x 2 |
+</docs>
+
+<docs type="text/markdown">
+# Foo
+- bar
+- baz
+
+| Age | Time | Food | Gold | Requirement |
+  | ------------ | ----- | ---- | ---- | ----------------------- |
+  | Feudal Age | 02:10 | 500 | 0 | Dark Age building x 2 |
+  | Castle Age | 02:40 | 800 | 200 |- |
+  | Imperial Age | 03:30 | 1000 | 800 | Castle Age building x 2 |
+</docs>
+
+=====================================output=====================================
+<docs lang="markdown">
+# Foo
+
+- bar
+- baz
+
+| Age          | Time  | Food | Gold | Requirement             |
+| ------------ | ----- | ---- | ---- | ----------------------- |
+| Feudal Age   | 02:10 | 500  | 0    | Dark Age building x 2   |
+| Castle Age   | 02:40 | 800  | 200  | -                       |
+| Imperial Age | 03:30 | 1000 | 800  | Castle Age building x 2 |
+</docs>
+
+<docs type="text/markdown">
+# Foo
+
+- bar
+- baz
+
+| Age          | Time  | Food | Gold | Requirement             |
+| ------------ | ----- | ---- | ---- | ----------------------- |
+| Feudal Age   | 02:10 | 500  | 0    | Dark Age building x 2   |
+| Castle Age   | 02:40 | 800  | 200  | -                       |
+| Imperial Age | 03:30 | 1000 | 800  | Castle Age building x 2 |
+</docs>
+
+================================================================================
+`;
+
+exports[`markdown.vue format 2`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<docs lang="markdown">
+# Foo
+- bar
+- baz
+
+| Age | Time | Food | Gold | Requirement |
+  | ------------ | ----- | ---- | ---- | ----------------------- |
+  | Feudal Age | 02:10 | 500 | 0 | Dark Age building x 2 |
+  | Castle Age | 02:40 | 800 | 200 |- |
+  | Imperial Age | 03:30 | 1000 | 800 | Castle Age building x 2 |
+</docs>
+
+<docs type="text/markdown">
+# Foo
+- bar
+- baz
+
+| Age | Time | Food | Gold | Requirement |
+  | ------------ | ----- | ---- | ---- | ----------------------- |
+  | Feudal Age | 02:10 | 500 | 0 | Dark Age building x 2 |
+  | Castle Age | 02:40 | 800 | 200 |- |
+  | Imperial Age | 03:30 | 1000 | 800 | Castle Age building x 2 |
+</docs>
+
+=====================================output=====================================
+<docs lang="markdown">
+# Foo
+
+- bar
+- baz
+
+| Age          | Time  | Food | Gold | Requirement             |
+| ------------ | ----- | ---- | ---- | ----------------------- |
+| Feudal Age   | 02:10 | 500  | 0    | Dark Age building x 2   |
+| Castle Age   | 02:40 | 800  | 200  | -                       |
+| Imperial Age | 03:30 | 1000 | 800  | Castle Age building x 2 |
+</docs>
+
+<docs type="text/markdown">
+# Foo
+
+- bar
+- baz
+
+| Age          | Time  | Food | Gold | Requirement             |
+| ------------ | ----- | ---- | ---- | ----------------------- |
+| Feudal Age   | 02:10 | 500  | 0    | Dark Age building x 2   |
+| Castle Age   | 02:40 | 800  | 200  | -                       |
+| Imperial Age | 03:30 | 1000 | 800  | Castle Age building x 2 |
+</docs>
+
+================================================================================
+`;
+
+exports[`markdown.vue format 3`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+semi: false
+                                                                                | printWidth
+=====================================input======================================
+<docs lang="markdown">
+# Foo
+- bar
+- baz
+
+| Age | Time | Food | Gold | Requirement |
+  | ------------ | ----- | ---- | ---- | ----------------------- |
+  | Feudal Age | 02:10 | 500 | 0 | Dark Age building x 2 |
+  | Castle Age | 02:40 | 800 | 200 |- |
+  | Imperial Age | 03:30 | 1000 | 800 | Castle Age building x 2 |
+</docs>
+
+<docs type="text/markdown">
+# Foo
+- bar
+- baz
+
+| Age | Time | Food | Gold | Requirement |
+  | ------------ | ----- | ---- | ---- | ----------------------- |
+  | Feudal Age | 02:10 | 500 | 0 | Dark Age building x 2 |
+  | Castle Age | 02:40 | 800 | 200 |- |
+  | Imperial Age | 03:30 | 1000 | 800 | Castle Age building x 2 |
+</docs>
+
+=====================================output=====================================
+<docs lang="markdown">
+# Foo
+
+- bar
+- baz
+
+| Age          | Time  | Food | Gold | Requirement             |
+| ------------ | ----- | ---- | ---- | ----------------------- |
+| Feudal Age   | 02:10 | 500  | 0    | Dark Age building x 2   |
+| Castle Age   | 02:40 | 800  | 200  | -                       |
+| Imperial Age | 03:30 | 1000 | 800  | Castle Age building x 2 |
+</docs>
+
+<docs type="text/markdown">
+# Foo
+
+- bar
+- baz
+
+| Age          | Time  | Food | Gold | Requirement             |
+| ------------ | ----- | ---- | ---- | ----------------------- |
+| Feudal Age   | 02:10 | 500  | 0    | Dark Age building x 2   |
+| Castle Age   | 02:40 | 800  | 200  | -                       |
+| Imperial Age | 03:30 | 1000 | 800  | Castle Age building x 2 |
+</docs>
+
+================================================================================
+`;
+
+exports[`markdown.vue format 4`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+vueIndentScriptAndStyle: true
+                                                                                | printWidth
+=====================================input======================================
+<docs lang="markdown">
+# Foo
+- bar
+- baz
+
+| Age | Time | Food | Gold | Requirement |
+  | ------------ | ----- | ---- | ---- | ----------------------- |
+  | Feudal Age | 02:10 | 500 | 0 | Dark Age building x 2 |
+  | Castle Age | 02:40 | 800 | 200 |- |
+  | Imperial Age | 03:30 | 1000 | 800 | Castle Age building x 2 |
+</docs>
+
+<docs type="text/markdown">
+# Foo
+- bar
+- baz
+
+| Age | Time | Food | Gold | Requirement |
+  | ------------ | ----- | ---- | ---- | ----------------------- |
+  | Feudal Age | 02:10 | 500 | 0 | Dark Age building x 2 |
+  | Castle Age | 02:40 | 800 | 200 |- |
+  | Imperial Age | 03:30 | 1000 | 800 | Castle Age building x 2 |
+</docs>
+
+=====================================output=====================================
+<docs lang="markdown">
+  # Foo
+
+  - bar
+  - baz
+
+  | Age          | Time  | Food | Gold | Requirement             |
+  | ------------ | ----- | ---- | ---- | ----------------------- |
+  | Feudal Age   | 02:10 | 500  | 0    | Dark Age building x 2   |
+  | Castle Age   | 02:40 | 800  | 200  | -                       |
+  | Imperial Age | 03:30 | 1000 | 800  | Castle Age building x 2 |
+</docs>
+
+<docs type="text/markdown">
+  # Foo
+
+  - bar
+  - baz
+
+  | Age          | Time  | Food | Gold | Requirement             |
+  | ------------ | ----- | ---- | ---- | ----------------------- |
+  | Feudal Age   | 02:10 | 500  | 0    | Dark Age building x 2   |
+  | Castle Age   | 02:40 | 800  | 200  | -                       |
+  | Imperial Age | 03:30 | 1000 | 800  | Castle Age building x 2 |
+</docs>
+
+================================================================================
+`;
+
+exports[`markdown.vue format 5`] = `
+====================================options=====================================
+embeddedLanguageFormatting: "off"
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<docs lang="markdown">
+# Foo
+- bar
+- baz
+
+| Age | Time | Food | Gold | Requirement |
+  | ------------ | ----- | ---- | ---- | ----------------------- |
+  | Feudal Age | 02:10 | 500 | 0 | Dark Age building x 2 |
+  | Castle Age | 02:40 | 800 | 200 |- |
+  | Imperial Age | 03:30 | 1000 | 800 | Castle Age building x 2 |
+</docs>
+
+<docs type="text/markdown">
+# Foo
+- bar
+- baz
+
+| Age | Time | Food | Gold | Requirement |
+  | ------------ | ----- | ---- | ---- | ----------------------- |
+  | Feudal Age | 02:10 | 500 | 0 | Dark Age building x 2 |
+  | Castle Age | 02:40 | 800 | 200 |- |
+  | Imperial Age | 03:30 | 1000 | 800 | Castle Age building x 2 |
+</docs>
+
+=====================================output=====================================
+<docs lang="markdown">
+# Foo
+- bar
+- baz
+
+| Age | Time | Food | Gold | Requirement |
+  | ------------ | ----- | ---- | ---- | ----------------------- |
+  | Feudal Age | 02:10 | 500 | 0 | Dark Age building x 2 |
+  | Castle Age | 02:40 | 800 | 200 |- |
+  | Imperial Age | 03:30 | 1000 | 800 | Castle Age building x 2 |
+</docs>
+
+<docs type="text/markdown">
+# Foo
+- bar
+- baz
+
+| Age | Time | Food | Gold | Requirement |
+  | ------------ | ----- | ---- | ---- | ----------------------- |
+  | Feudal Age | 02:10 | 500 | 0 | Dark Age building x 2 |
+  | Castle Age | 02:40 | 800 | 200 |- |
+  | Imperial Age | 03:30 | 1000 | 800 | Castle Age building x 2 |
+</docs>
+
+================================================================================
+`;
+
+exports[`unknown.vue format 1`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+trailingComma: "none"
+                                                                                | printWidth
+=====================================input======================================
+<i18n lang="foooo">
+{"en": {
+    "hello": "hello world!"
+  }, "ja": {
+    "hello": "こんにちは、世界！"
+  }
+}
+</i18n>
+
+<custom>
+const foo =
+
+
+     "foo";
+</custom>
+
+<custom lang="zzz">
+const foo = "foo";
+  const foo = "foo";</custom>
+
+<custom lang="zzz">123</custom>
+
+<custom>{
+     foo: "bar"
+}</custom>
+
+=====================================output=====================================
+<i18n lang="foooo">
+{"en": {
+    "hello": "hello world!"
+  }, "ja": {
+    "hello": "こんにちは、世界！"
+  }
+}
+</i18n>
+
+<custom>
+const foo =
+
+
+     "foo";
+</custom>
+
+<custom lang="zzz">
+const foo = "foo";
+  const foo = "foo";</custom>
+
+<custom lang="zzz">123</custom>
+
+<custom>{
+     foo: "bar"
+}</custom>
+
+================================================================================
+`;
+
+exports[`unknown.vue format 2`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<i18n lang="foooo">
+{"en": {
+    "hello": "hello world!"
+  }, "ja": {
+    "hello": "こんにちは、世界！"
+  }
+}
+</i18n>
+
+<custom>
+const foo =
+
+
+     "foo";
+</custom>
+
+<custom lang="zzz">
+const foo = "foo";
+  const foo = "foo";</custom>
+
+<custom lang="zzz">123</custom>
+
+<custom>{
+     foo: "bar"
+}</custom>
+
+=====================================output=====================================
+<i18n lang="foooo">
+{"en": {
+    "hello": "hello world!"
+  }, "ja": {
+    "hello": "こんにちは、世界！"
+  }
+}
+</i18n>
+
+<custom>
+const foo =
+
+
+     "foo";
+</custom>
+
+<custom lang="zzz">
+const foo = "foo";
+  const foo = "foo";</custom>
+
+<custom lang="zzz">123</custom>
+
+<custom>{
+     foo: "bar"
+}</custom>
+
+================================================================================
+`;
+
+exports[`unknown.vue format 3`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+semi: false
+                                                                                | printWidth
+=====================================input======================================
+<i18n lang="foooo">
+{"en": {
+    "hello": "hello world!"
+  }, "ja": {
+    "hello": "こんにちは、世界！"
+  }
+}
+</i18n>
+
+<custom>
+const foo =
+
+
+     "foo";
+</custom>
+
+<custom lang="zzz">
+const foo = "foo";
+  const foo = "foo";</custom>
+
+<custom lang="zzz">123</custom>
+
+<custom>{
+     foo: "bar"
+}</custom>
+
+=====================================output=====================================
+<i18n lang="foooo">
+{"en": {
+    "hello": "hello world!"
+  }, "ja": {
+    "hello": "こんにちは、世界！"
+  }
+}
+</i18n>
+
+<custom>
+const foo =
+
+
+     "foo";
+</custom>
+
+<custom lang="zzz">
+const foo = "foo";
+  const foo = "foo";</custom>
+
+<custom lang="zzz">123</custom>
+
+<custom>{
+     foo: "bar"
+}</custom>
+
+================================================================================
+`;
+
+exports[`unknown.vue format 4`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+vueIndentScriptAndStyle: true
+                                                                                | printWidth
+=====================================input======================================
+<i18n lang="foooo">
+{"en": {
+    "hello": "hello world!"
+  }, "ja": {
+    "hello": "こんにちは、世界！"
+  }
+}
+</i18n>
+
+<custom>
+const foo =
+
+
+     "foo";
+</custom>
+
+<custom lang="zzz">
+const foo = "foo";
+  const foo = "foo";</custom>
+
+<custom lang="zzz">123</custom>
+
+<custom>{
+     foo: "bar"
+}</custom>
+
+=====================================output=====================================
+<i18n lang="foooo">
+{"en": {
+    "hello": "hello world!"
+  }, "ja": {
+    "hello": "こんにちは、世界！"
+  }
+}
+</i18n>
+
+<custom>
+const foo =
+
+
+     "foo";
+</custom>
+
+<custom lang="zzz">
+const foo = "foo";
+  const foo = "foo";</custom>
+
+<custom lang="zzz">123</custom>
+
+<custom>{
+     foo: "bar"
+}</custom>
+
+================================================================================
+`;
+
+exports[`unknown.vue format 5`] = `
+====================================options=====================================
+embeddedLanguageFormatting: "off"
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<i18n lang="foooo">
+{"en": {
+    "hello": "hello world!"
+  }, "ja": {
+    "hello": "こんにちは、世界！"
+  }
+}
+</i18n>
+
+<custom>
+const foo =
+
+
+     "foo";
+</custom>
+
+<custom lang="zzz">
+const foo = "foo";
+  const foo = "foo";</custom>
+
+<custom lang="zzz">123</custom>
+
+<custom>{
+     foo: "bar"
+}</custom>
+
+=====================================output=====================================
+<i18n lang="foooo">
+{"en": {
+    "hello": "hello world!"
+  }, "ja": {
+    "hello": "こんにちは、世界！"
+  }
+}
+</i18n>
+
+<custom>
+const foo =
+
+
+     "foo";
+</custom>
+
+<custom lang="zzz">
+const foo = "foo";
+  const foo = "foo";</custom>
+
+<custom lang="zzz">123</custom>
+
+<custom>{
+     foo: "bar"
+}</custom>
+
+================================================================================
+`;
+
+exports[`yaml.vue format 1`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+trailingComma: "none"
+                                                                                | printWidth
+=====================================input======================================
+<i18n lang="yaml">
+en:
+                       hello: "hello world!"
+ja:
+        hello: "こんにちは、世界！"
+</i18n>
+
+=====================================output=====================================
+<i18n lang="yaml">
+en:
+  hello: "hello world!"
+ja:
+  hello: "こんにちは、世界！"
+</i18n>
+
+================================================================================
+`;
+
+exports[`yaml.vue format 2`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<i18n lang="yaml">
+en:
+                       hello: "hello world!"
+ja:
+        hello: "こんにちは、世界！"
+</i18n>
+
+=====================================output=====================================
+<i18n lang="yaml">
+en:
+  hello: "hello world!"
+ja:
+  hello: "こんにちは、世界！"
+</i18n>
+
+================================================================================
+`;
+
+exports[`yaml.vue format 3`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+semi: false
+                                                                                | printWidth
+=====================================input======================================
+<i18n lang="yaml">
+en:
+                       hello: "hello world!"
+ja:
+        hello: "こんにちは、世界！"
+</i18n>
+
+=====================================output=====================================
+<i18n lang="yaml">
+en:
+  hello: "hello world!"
+ja:
+  hello: "こんにちは、世界！"
+</i18n>
+
+================================================================================
+`;
+
+exports[`yaml.vue format 4`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+vueIndentScriptAndStyle: true
+                                                                                | printWidth
+=====================================input======================================
+<i18n lang="yaml">
+en:
+                       hello: "hello world!"
+ja:
+        hello: "こんにちは、世界！"
+</i18n>
+
+=====================================output=====================================
+<i18n lang="yaml">
+  en:
+    hello: "hello world!"
+  ja:
+    hello: "こんにちは、世界！"
+</i18n>
+
+================================================================================
+`;
+
+exports[`yaml.vue format 5`] = `
+====================================options=====================================
+embeddedLanguageFormatting: "off"
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<i18n lang="yaml">
+en:
+                       hello: "hello world!"
+ja:
+        hello: "こんにちは、世界！"
+</i18n>
+
+=====================================output=====================================
+<i18n lang="yaml">
+en:
+                       hello: "hello world!"
+ja:
+        hello: "こんにちは、世界！"
+</i18n>
+
+================================================================================
+`;
diff --git a/tests/html_vue_custom_block/graphql.vue b/tests/html_vue_custom_block/graphql.vue
new file mode 100644
index 000000000..d0702f6af
--- /dev/null
+++ b/tests/html_vue_custom_block/graphql.vue
@@ -0,0 +1,11 @@
+<page-query lang="graphql">
+query { posts: allWordPressPost {
+    edges {
+   node {
+          id
+      title
+      }
+    }
+  }
+}
+</page-query>
diff --git a/tests/html_vue_custom_block/handlebars.vue b/tests/html_vue_custom_block/handlebars.vue
new file mode 100644
index 000000000..30d3ca531
--- /dev/null
+++ b/tests/html_vue_custom_block/handlebars.vue
@@ -0,0 +1,3 @@
+<custom type="text/x-handlebars-template">
+Handlebars <b>{{     doesWhat}}</b>
+</custom>
diff --git a/tests/html_vue_custom_block/jsfmt.spec.js b/tests/html_vue_custom_block/jsfmt.spec.js
new file mode 100644
index 000000000..92d15124a
--- /dev/null
+++ b/tests/html_vue_custom_block/jsfmt.spec.js
@@ -0,0 +1,5 @@
+run_spec(__dirname, ["vue"], { trailingComma: "none" });
+run_spec(__dirname, ["vue"]);
+run_spec(__dirname, ["vue"], { semi: false });
+run_spec(__dirname, ["vue"], { vueIndentScriptAndStyle: true });
+run_spec(__dirname, ["vue"], { embeddedLanguageFormatting: "off" });
diff --git a/tests/html_vue_custom_block/json.vue b/tests/html_vue_custom_block/json.vue
new file mode 100644
index 000000000..bb69efc9b
--- /dev/null
+++ b/tests/html_vue_custom_block/json.vue
@@ -0,0 +1,34 @@
+<i18n lang="json">
+{ "en": {
+    "hello": "hello world!"
+    
+    
+    }, "ja": {
+   
+   
+    "hello": "こんにちは、世界！"
+  }
+}
+</i18n>
+
+<i18n type="application/json">
+{ "en": {
+    "hello": "hello world!"
+
+
+    }, "ja": {
+
+
+    "hello": "こんにちは、世界！"
+  }
+}
+</i18n>
+
+<custom lang="json">{
+  "a": 1
+}</custom>
+
+<custom lang="json">{
+  "a": 1
+}
+</custom>
diff --git a/tests/html_vue_custom_block/lang-attribute.vue b/tests/html_vue_custom_block/lang-attribute.vue
new file mode 100644
index 000000000..1872b0f72
--- /dev/null
+++ b/tests/html_vue_custom_block/lang-attribute.vue
@@ -0,0 +1,4 @@
+<custom lang="js">
+const foo
+      = 'foo'
+</custom>
diff --git a/tests/html_vue_custom_block/markdown.vue b/tests/html_vue_custom_block/markdown.vue
new file mode 100644
index 000000000..8b533f558
--- /dev/null
+++ b/tests/html_vue_custom_block/markdown.vue
@@ -0,0 +1,23 @@
+<docs lang="markdown">
+# Foo
+- bar
+- baz
+
+| Age | Time | Food | Gold | Requirement |
+  | ------------ | ----- | ---- | ---- | ----------------------- |
+  | Feudal Age | 02:10 | 500 | 0 | Dark Age building x 2 |
+  | Castle Age | 02:40 | 800 | 200 |- |
+  | Imperial Age | 03:30 | 1000 | 800 | Castle Age building x 2 |
+</docs>
+
+<docs type="text/markdown">
+# Foo
+- bar
+- baz
+
+| Age | Time | Food | Gold | Requirement |
+  | ------------ | ----- | ---- | ---- | ----------------------- |
+  | Feudal Age | 02:10 | 500 | 0 | Dark Age building x 2 |
+  | Castle Age | 02:40 | 800 | 200 |- |
+  | Imperial Age | 03:30 | 1000 | 800 | Castle Age building x 2 |
+</docs>
diff --git a/tests/html_vue_custom_block/unknown.vue b/tests/html_vue_custom_block/unknown.vue
new file mode 100644
index 000000000..e15502e67
--- /dev/null
+++ b/tests/html_vue_custom_block/unknown.vue
@@ -0,0 +1,25 @@
+<i18n lang="foooo">
+{"en": {
+    "hello": "hello world!"
+  }, "ja": {
+    "hello": "こんにちは、世界！"
+  }
+}
+</i18n>
+
+<custom>
+const foo =
+
+
+     "foo";
+</custom>
+
+<custom lang="zzz">
+const foo = "foo";
+  const foo = "foo";</custom>
+
+<custom lang="zzz">123</custom>
+
+<custom>{
+     foo: "bar"
+}</custom>
diff --git a/tests/html_vue_custom_block/yaml.vue b/tests/html_vue_custom_block/yaml.vue
new file mode 100644
index 000000000..51803993b
--- /dev/null
+++ b/tests/html_vue_custom_block/yaml.vue
@@ -0,0 +1,6 @@
+<i18n lang="yaml">
+en:
+                       hello: "hello world!"
+ja:
+        hello: "こんにちは、世界！"
+</i18n>