TypeScript js-beautify.html函數代碼示例

export function htmlFormat(
  document: TextDocument,
  currRange: Range,
  formattingOptions: FormattingOptions,
  config: any
): TextEdit[] {
  const { value, range } = getValueAndRange(document, currRange);

  defaultHtmlOptions.indent_with_tabs = !formattingOptions.insertSpaces;
  defaultHtmlOptions.indent_size = formattingOptions.tabSize;

  const htmlFormattingOptions = _.assign(
    defaultHtmlOptions,
    config.tandem.paperclip.format.defaultFormatterOptions['js-beautify-html'],
    { end_with_newline: false }
  );

  const beautifiedHtml = htmlBeautify(templateHead + value + templateTail, htmlFormattingOptions);
  const wrappedHtml = beautifiedHtml.substring(templateHead.length, beautifiedHtml.length - templateTail.length);
  return [
    {
      range,
      newText: wrappedHtml
    }
  ];
}

export function serializeDocument(document: Object, pretty?: boolean): string {
  const doc = parse5.serialize(document, { treeAdapter : parse5.treeAdapters.htmlparser2 });
  if (pretty) {
    const beautify: any = require('js-beautify');
    return beautify.html(doc, {indent_size: 2});
  }
  return doc;
}

export function serializeDocument(document: Object, pretty?: boolean): string {
  const doc = serializer.serialize(document);
  if (pretty) {
    const beautify: any = require('js-beautify');
    return beautify.html(doc, {indent_size: 2});
  }
  return doc;
}

export const printPrettyHtml = (html)=> {
  html = beautifyHtml( html, {"indent_size":2} )
    .replace(/class=/g, "className=")
    .replace(/<input([^>]*)>/g, "<input$1/>")
    .replace(/readonly=""/g,"readOnly={true}")
    .replace(/font-size/g,"fontSize")
    .replace(/style="([^"]+)"+/g, (match, style)=> {
      let reactStyle = map(compact(style.split(";")), (keyvalue)=> {
        let [key, value] = keyvalue.split(":")
        return `${key}:"${value}"`
      }).join(",")
      return "style={{" + reactStyle + "}}"
    })
  console.log("\n"+ html)
}

(() => {
  const failures: Failure[] = [];
  const filePaths = nonFlagsArgs.length > 0 ? nonFlagsArgs : getAllFilePaths();

  for (const filePath of filePaths) {
    const fileContents = readFile(filePath);
    const formattedFileContents = fixSelfClosingSlashes(formatHtml(fileContents, beautifyOptions));

    if (fileContents !== formattedFileContents) {
      if (options.fix) {
        writeFile(filePath, formattedFileContents);
      } else {
        failures.push({ filePath, message: 'html formatting' });
      }
    }
  }

  bailIfFailures(failures);
})();

  // Post-parser cleanup routines.  The parser is for getting into structure of the doc.

  // cleanup the js <script> libs that are added after the main 'three.js' lib.
  // e.g make it so they're not all on one line.
  // We have to deal with this at the string level (text level) since I don't
  // know how to control formatting at the doc level.
  // Note: string is pass by value, so we get a copy of the text and we can manipulate
  // without altering the original.
  // <script src="../build/three.js"></script><!--vrize add start--><script src="js/vr/WebVR.js"></script><!--vrize add end--><!--vrize add start--><script src="js/vrize/vrize_kbd.js"></script><!--vrize add end-->
  beautifyJsLibChainHtml(text : string) {
    // let newText = text;

    // return newText;
    // text += "hello";
    // identify the "<script src=..three.js>" line.  This will be the long line
    // that has all the concatenated libs
    let regex = /<script\s+src=['"].*three\.js.*/
    let threeJsLibMatch = text.match(regex)

    // if found, pass to beautify
    if (threeJsLibMatch && threeJsLibMatch[0]) {
      let newText = beautify.html(threeJsLibMatch[0]);

      // and then sub it back in
      text = text.replace(regex, newText);
    }

    return text;

  }

export const printPrettyHtml = (html)=> {
  console.log("\n"+ beautifyHtml( html, {"indent_size":2} ).replace(/class=/g, "className=") )
}