feat: ✨ use prettier to enhance fmt function

package.json

@@ -8,6 +8,9 @@
         "lint": "vue-cli-service lint"
     },
     "dependencies": {
+        "@babel/parser": "^7.15.8",
+        "@typescript-eslint/typescript-estree": "^5.0.0",
+        "angular-html-parser": "^1.8.0",
         "axios": "^0.21.4",
         "babel-runtime": "^6.26.0",
         "code-formatter": "0.0.1",
@@ -30,6 +33,9 @@
         "moment": "^2.29.1",
         "php-array-reader": "^1.3.0",
         "phparr": "^0.2.0",
+        "postcss-less": "^5.0.0",
+        "postcss-scss": "^4.0.1",
+        "prettier": "^2.4.1",
         "properties-to-json": "^0.1.7",
         "qrcode": "^1.4.4",
         "qrcode-parser": "^1.2.0",

src/views/tool/code.vue

 <template>
   <div>
-        <div style="border: 1px solid #dcdee2;border-radius: 4px;">
-            <codemirror ref="code" v-model="current.content" :options="options"></codemirror>
+    <div style="border: 1px solid #dcdee2; border-radius: 4px">
+      <codemirror
+        ref="code"
+        v-model="current.content"
+        :options="options"
+      ></codemirror>
     </div>
     <option-block>
       <FormItem>
         <ButtonGroup>
-                    <Button type="primary" @click="handle(k,v)" v-for="(v,k) in lang" :key="k">{{ k }}</Button>
+          <Button
+            type="primary"
+            @click="handle(k, v)"
+            v-for="(v, k) in lang"
+            :key="k"
+            >{{ k }}</Button
+          >
         </ButtonGroup>
       </FormItem>
       <FormItem>
@@ -16,53 +26,57 @@
   </div>
 </template>
 <script>
-import {codemirror} from 'vue-codemirror'
-import formatter from './library/formatter'
-import 'codemirror/lib/codemirror.css'
-import 'codemirror/mode/javascript/javascript.js'
-import 'codemirror/mode/htmlmixed/htmlmixed.js'
-import 'codemirror/mode/css/css.js'
-import 'codemirror/mode/xml/xml.js'
-import 'codemirror/mode/sql/sql.js'
-import 'codemirror/addon/fold/foldcode.js'
-import 'codemirror/addon/fold/foldgutter.js'
-import 'codemirror/addon/fold/brace-fold.js'
-import 'codemirror/addon/fold/comment-fold.js'
-import 'codemirror/addon/fold/foldgutter.css'
+import { codemirror } from "vue-codemirror";
+import formatter from "./library/formatter";
+import "codemirror/lib/codemirror.css";
+import "codemirror/mode/javascript/javascript.js";
+import "codemirror/mode/htmlmixed/htmlmixed.js";
+import "codemirror/mode/css/css.js";
+import "codemirror/mode/xml/xml.js";
+import "codemirror/mode/sql/sql.js";
+import "codemirror/addon/fold/foldcode.js";
+import "codemirror/addon/fold/foldgutter.js";
+import "codemirror/addon/fold/brace-fold.js";
+import "codemirror/addon/fold/comment-fold.js";
+import "codemirror/addon/fold/foldgutter.css";
 
 export default {
   components: {
     codemirror,
   },
   created() {
-        this.current = Object.assign(this.current, this.$getToolData('content'))
+    this.current = Object.assign(this.current, this.$getToolData("content"));
   },
   mounted() {
-        this.codemirror.setSize(null, 350)
+    this.codemirror.setSize(null, 350);
     if (this.current.lang) {
-            this.codemirror.setOption('mode', this.options[this.current.lang])
+      this.codemirror.setOption("mode", this.options[this.current.lang]);
     }
   },
   computed: {
     codemirror() {
-            return this.$refs.code.codemirror
+      return this.$refs.code.codemirror;
     },
   },
   methods: {
     handle(lang, mode) {
       if (this.current.content) {
-                this.current.content = formatter(this.current.content, lang, this.current.isCompress)
-                this.codemirror.setOption('mode', mode)
-                this.current.lang = lang
-                this.$saveToolData(this.current)
+        this.current.content = formatter(
+          this.current.content,
+          lang,
+          this.current.isCompress
+        );
+        this.codemirror.setOption("mode", mode);
+        this.current.lang = lang;
+        this.$saveToolData(this.current);
       }
     },
   },
   data() {
     return {
       current: {
-                content: '',
-                lang: '',
+        content: "",
+        lang: "",
         isCompress: false,
       },
       options: {
@@ -71,16 +85,24 @@ export default {
         lineWrapping: false,
         foldGutter: true,
         indentUnit: 4,
-                gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
+        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
       },
       lang: {
-                'js': 'text/javascript',
-                'html': 'text/html',
-                'css': 'text/css',
-                'xml': 'application/xml',
-                'sql': 'text/x-mysql',
+        js: "text/javascript",
+        ts: "text/typescript",
+        css: "text/css",
+        scss: "text/scss",
+        less: "text/less",
+        json5: "text/json5",
+        graphql: "text/graphql",
+        markdown: "text/markdown",
+        html: "text/html",
+        xml: "application/xml",
+        sql: "text/x-mysql",
+        vue: "text/vue",
+        angular: "text/angular",
       },
-        }
+    };
   },
-}
+};
 </script>
\ No newline at end of file

src/views/tool/library/formatter.js

-import codeFormatter from 'code-formatter'
-import xmlFormatter from "xml-formatter"
-
+import codeFormatter from "code-formatter";
+import xmlFormatter from "xml-formatter";
+import prettier from "prettier/standalone";
+import parser from "prettier/parser-babel";
+import parserTypeScript from "prettier/parser-typescript";
+import parserGraphql from "prettier/parser-graphql";
+import parserMarkdown from "prettier/parser-markdown";
+import parserCss from "prettier/parser-postcss";
+import parserYaml from "prettier/parser-yaml";
+import parserHtml from "prettier/parser-html";
+import parserJson5 from "prettier/parser-babel";
+//https://github.com/prettier/prettier/issues/6264#issuecomment-507535391
+const options = {
+  js: { parser: "babel", plugins: [parser] },
+  ts: { parser: "typescript", plugins: [parserTypeScript] },
+  vue: { parser: "vue", plugins: [parserHtml] },
+  graphql: { parser: "graphql", plugins: [parserGraphql] },
+  markdown: { parser: "markdown", plugins: [parserMarkdown] },
+  css: { parser: "css", plugins: [parserCss] },
+  less: { parser: "less", plugins: [parserCss] },
+  scss: { parser: "scss", plugins: [parserCss] },
+  yaml: { parser: "yaml", plugins: [parserYaml] },
+  html: { parser: "html", plugins: [parserHtml] },
+  angular: { parser: "angular", plugins: [parserHtml] },
+  json5: { parser: "json5", plugins: [parserJson5] },
+};
 export default (code, type, isCompress = false) => {
   if (type === "xml") {
     return xmlFormatter(code, {
-            indentation: isCompress ? '' : '  ',
+      indentation: isCompress ? "" : "  ",
       collapseContent: true,
-            lineSeparator: isCompress ? '' : '\n'
+      lineSeparator: isCompress ? "" : "\n",
     });
-    }
+  } else if (type === "sql") {
     return codeFormatter(code, {
-        method: isCompress ? type + "min" : type
-    })
-}
+      method: isCompress ? type + "min" : type,
+    });
+  } else {
\ No newline at end of file
+    return prettier.format(code, options[type]);
+  }
+};