代码格式化工具优化

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>
+        <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>
-    <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 '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 {
-        components: {
-            codemirror,
+export default {
+    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'))
-        },
-        mounted () {
-            this.codemirror.setSize(null, 350)
-            if (this.current.lang) {
-                this.codemirror.setOption('mode', this.options[this.current.lang])
+    },
+    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)
             }
         },
-        computed: {
-            codemirror () {
-                return this.$refs.code.codemirror
+    },
+    data() {
+        return {
+            current: {
+                content: '',
+                lang: '',
+                isCompress: false,
             },
-        },
-        methods: {
-            handle (lang, mode) {
-                if (this.current.content) {
-                    this.current.content = formatter(this.current.content, {
-                        method: this.current.isCompress ? lang+"min" : lang
-                    })
-                    this.codemirror.setOption('mode', mode)
-                    this.current.lang = lang
-                    this.$saveToolData(this.current)
-                }
+            options: {
+                mode: null,
+                lineNumbers: true,
+                lineWrapping: false,
+                foldGutter: true,
+                indentUnit: 4,
+                gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
             },
-        },
-        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',
-                },
-            }
-        },
-    }
+            lang: {
+                'js': 'text/javascript',
+                'html': 'text/html',
+                'css': 'text/css',
+                'xml': 'application/xml',
+                'sql': 'text/x-mysql',
+            },
+        }
+    },
+}
 </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