代码格式化工具优化

src/views/tool/code.vue

@@ -6,7 +6,7 @@
         <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,51 +16,49 @@
     </div>
 </template>
 <script>
-    import { codemirror } from 'vue-codemirror'
-    import formatter from 'code-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 {
+export default {
     components: {
         codemirror,
     },
-        created () {
+    created() {
         this.current = Object.assign(this.current, this.$getToolData('content'))
     },
-        mounted () {
+    mounted() {
         this.codemirror.setSize(null, 350)
         if (this.current.lang) {
             this.codemirror.setOption('mode', this.options[this.current.lang])
         }
     },
     computed: {
-            codemirror () {
+        codemirror() {
             return this.$refs.code.codemirror
         },
     },
     methods: {
-            handle (lang, mode) {
+        handle(lang, mode) {
             if (this.current.content) {
-                    this.current.content = formatter(this.current.content, {
-                        method: this.current.isCompress ? lang+"min" : lang
-                    })
+                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 () {
+    data() {
         return {
             current: {
                 content: '',
@@ -84,5 +82,5 @@
             },
         }
     },
-    }
+}
 </script>
\ No newline at end of file

src/views/tool/library/formatter.js

+import codeFormatter from 'code-formatter'
+import xmlFormatter from "xml-formatter"
+
+export default (code, type, isCompress = false) => {
+    if (type === "xml") {
+        return xmlFormatter(code, {
+            indentation: isCompress ? '' : '  ',
+            collapseContent: true,
+            lineSeparator: isCompress ? '' : '\n'
+        });
+    }
+    return codeFormatter(code, {
+        method: isCompress ? type + "min" : type
+    })
+}
\ No newline at end of file