Prettyhtml. Fix #561. Fix #491

vuejs · Sep 25, 2018 · 0b4e385 · 0b4e385
1 parent 4e83011
commit 0b4e385
Show file tree

Hide file tree

Showing 5 changed files with 884 additions and 28 deletions.
diff --git a/package.json b/package.json
@@ -175,10 +175,12 @@
           "default": "none",
           "enum": [
             "none",
+            "prettyhtml",
             "js-beautify-html"
           ],
           "enumDescriptions": [
             "disable formatting",
+            "prettyhtml",
             "html formatter of js-beautify"
           ],
           "description": "Default formatter for <template> region"

diff --git a/server/package.json b/server/package.json
@@ -21,6 +21,7 @@
   },
   "homepage": "https://github.com/vuejs/vetur/tree/master/server",
   "dependencies": {
+    "@starptech/prettyhtml": "^0.0.60",
     "bootstrap-vue-helper-json": "^1.1.1",
     "buefy-helper-json": "^1.0.2",
     "element-helper-json": "^2.0.2",

diff --git a/server/src/modes/template/index.ts b/server/src/modes/template/index.ts
@@ -70,9 +70,6 @@ export function getVueHTMLMode(
       return findDocumentSymbols(document, vueDocuments.get(document));
     },
     format(document: TextDocument, range: Range, formattingOptions: FormattingOptions) {
-      if (config.vetur.format.defaultFormatter.html === 'none') {
-        return [];
-      }
       return htmlFormat(document, range, formattingOptions, config);
     },
     findDefinition(document: TextDocument, position: Position) {

diff --git a/server/src/modes/template/services/htmlFormat.ts b/server/src/modes/template/services/htmlFormat.ts
@@ -1,6 +1,7 @@
 import * as _ from 'lodash';
 import { TextDocument, Range, TextEdit, Position, FormattingOptions } from 'vscode-languageserver-types';
 import { html as htmlBeautify } from 'js-beautify';
+import * as prettyhtml from '@starptech/prettyhtml';
 
 const templateHead = '<template>';
 const templateTail = '</template>';
@@ -11,18 +12,19 @@ export function htmlFormat(
   formattingOptions: FormattingOptions,
   config: any
 ): TextEdit[] {
-  const { value, range } = getValueAndRange(document, currRange);
+  if (config.vetur.format.defaultFormatter.html === 'none') {
+    return [];
+  }
 
-  defaultHtmlOptions.indent_with_tabs = !formattingOptions.insertSpaces;
-  defaultHtmlOptions.indent_size = formattingOptions.tabSize;
+  const { value, range } = getValueAndRange(document, currRange);
 
-  const htmlFormattingOptions = _.assign(
-    defaultHtmlOptions,
-    config.vetur.format.defaultFormatterOptions['js-beautify-html'],
-    { end_with_newline: false }
-  );
+  let beautifiedHtml: string;
+  if (config.vetur.format.defaultFormatter.html === 'prettyhtml') {
+    beautifiedHtml = formatWithPrettyHtml(templateHead + value + templateTail);
+  } else {
+    beautifiedHtml = formatWithJsBeautify(templateHead + value + templateTail, formattingOptions, config);
+  }
 
-  const beautifiedHtml = htmlBeautify(templateHead + value + templateTail, htmlFormattingOptions);
   const wrappedHtml = beautifiedHtml.substring(templateHead.length, beautifiedHtml.length - templateTail.length);
   return [
     {
@@ -32,6 +34,25 @@ export function htmlFormat(
   ];
 }
 
+function formatWithPrettyHtml(input: string): string {
+  const result = prettyhtml(input, {});
+  return result.trim();
+}
+
+function formatWithJsBeautify(input: string, formattingOptions: FormattingOptions, config: any): string {
+  const htmlFormattingOptions = _.assign(
+    defaultHtmlOptions,
+    {
+      indent_with_tabs: !formattingOptions.insertSpaces,
+      indent_size: formattingOptions.tabSize
+    },
+    config.vetur.format.defaultFormatterOptions['js-beautify-html'],
+    { end_with_newline: false }
+  );
+
+  return htmlBeautify(input, htmlFormattingOptions);
+}
+
 function getValueAndRange(document: TextDocument, currRange: Range): { value: string; range: Range } {
   let value = document.getText();
   let range = currRange;