代码格式化工具优化

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

src/views/tool/phpArraySerialize.vue

-<template>
-    <div>
-        <Input v-model="current.input" :rows="7" type="textarea" placeholder="内容"></Input>
-        <option-block>
-            <FormItem>
-                <Select v-model="current.source" style="width:200px">
-                    <Option v-for="v in type" :value="v" :key="v">源数据:{{ v }}</Option>
-                </Select>
-            </FormItem>
-            <FormItem>
-                <Select v-model="current.target" style="width:200px">
-                    <Option v-for="v in type" :value="v" :key="v">目标数据:{{ v }}</Option>
-                </Select>
-            </FormItem>
-            <FormItem>
-                <ButtonGroup>
-                    <Button type="primary" @click="handle()">转换</Button>
-                </ButtonGroup>
-            </FormItem>
-        </option-block>
-        <Input v-model="current.output" :rows="7" type="textarea" placeholder="结果"></Input>
-    </div>
-</template>
-<script>
-    import jsonToPhpArray from "phparr"
-    import phpArrayToJson from "php-array-reader"
-    import phpSerialize from "serialize-php"
-
-    export default {
-        created() {
-            this.current = Object.assign(this.current, this.$getToolData("input"))
-        },
-        methods: {
-            handle() {
-                if (this.current.input) {
-                    let target = "";
-                    let source = {};
-                    try {
-                        switch (this.current.source) {
-                            case "phpArray": {
-                                source = phpArrayToJson.fromString(this.current.input);
-                                break;
-                            }
-                            case "phpSerialize":
-                                source = phpSerialize.unserialize(this.current.input);
-                                break;
-                            case "jsJson":
-                                source = JSON.parse(this.current.input);
-                                break;
-                            default:
-                                return;
-                        }
-                    }
-                    catch (e) {
-                        this.$Message.error("源数据解析错误:"+e.message);
-                        return;
-                    }
-                    try {
-                        switch (this.current.target) {
-                            case "phpArray":
-                                target = jsonToPhpArray(source);
-                                break;
-                            case "phpSerialize":
-                                target = phpSerialize.serialize(source);
-                                break;
-                            case "jsJson":
-                                target = JSON.stringify(source);
-                                break;
-                            default:
-                                return;
-                        }
-                    }
-                    catch (e) {
-                        this.$Message.error("目标数据转换错误:"+e.message);
-                        return;
-                    }
-                    this.current.output = target;
-                    this.$clipboardCopy(this.current.output);
-                    this.$saveToolData(this.current);
-                }
-            }
-        },
-        data() {
-            return {
-                current: {
-                    input: "",
-                    output: "",
-                    source: "phpArray",
-                    target: "jsJson"
-                },
-                type: ["phpArray", "phpSerialize", "jsJson"],
-            }
-        },
-    }
-</script>
\ No newline at end of file