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",
@@ -91,4 +97,4 @@
         "last 2 versions",
         "not ie <= 8"
     ]
-}
+}
\ No newline at end of file

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>
-        <option-block>
-            <FormItem>
-                <ButtonGroup>
-                    <Button type="primary" @click="handle(k,v)" v-for="(v,k) in lang" :key="k">{{ k }}</Button>
-                </ButtonGroup>
-            </FormItem>
-            <FormItem>
-                <Checkbox v-model="current.isCompress">压缩</Checkbox>
-            </FormItem>
-        </option-block>
+  <div>
+    <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
+          >
+        </ButtonGroup>
+      </FormItem>
+      <FormItem>
+        <Checkbox v-model="current.isCompress">压缩</Checkbox>
+      </FormItem>
+    </option-block>
+  </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,
+  components: {
+    codemirror,
+  },
+  created() {
+    this.current = Object.assign(this.current, this.$getToolData("content"));
+  },
+  mounted() {
+    this.codemirror.setSize(null, 350);
+    if (this.current.lang) {
+      this.codemirror.setOption("mode", this.options[this.current.lang]);
+    }
+  },
+  computed: {
+    codemirror() {
+      return this.$refs.code.codemirror;
     },
-    created() {
-        this.current = Object.assign(this.current, this.$getToolData('content'))
+  },
+  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);
+      }
     },
-    mounted() {
-        this.codemirror.setSize(null, 350)
-        if (this.current.lang) {
-            this.codemirror.setOption('mode', this.options[this.current.lang])
-        }
-    },
-    computed: {
-        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)
-            }
-        },
-    },
-    data() {
-        return {
-            current: {
-                content: '',
-                lang: '',
-                isCompress: false,
-            },
-            options: {
-                mode: null,
-                lineNumbers: true,
-                lineWrapping: false,
-                foldGutter: true,
-                indentUnit: 4,
-                gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
-            },
-            lang: {
-                'js': 'text/javascript',
-                'html': 'text/html',
-                'css': 'text/css',
-                'xml': 'application/xml',
-                'sql': 'text/x-mysql',
-            },
-        }
-    },
-}
+  },
+  data() {
+    return {
+      current: {
+        content: "",
+        lang: "",
+        isCompress: false,
+      },
+      options: {
+        mode: null,
+        lineNumbers: true,
+        lineWrapping: false,
+        foldGutter: true,
+        indentUnit: 4,
+        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
+      },
+      lang: {
+        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 ? '' : '  ',
-            collapseContent: true,
-            lineSeparator: isCompress ? '' : '\n'
-        });
-    }
+  if (type === "xml") {
+    return xmlFormatter(code, {
+      indentation: isCompress ? "" : "  ",
+      collapseContent: true,
+      lineSeparator: isCompress ? "" : "\n",
+    });
+  } else if (type === "sql") {
     return codeFormatter(code, {
-        method: isCompress ? type + "min" : type
-    })
-}
\ No newline at end of file
+      method: isCompress ? type + "min" : type,
+    });
+  } else {
+    return prettier.format(code, options[type]);
+  }
+};