#93 优化代码格式化功能

package.json

@@ -5,23 +5,27 @@
     "scripts": {
         "serve": "vue-cli-service serve --port 8081",
         "build": "vue-cli-service build",
+        "report": "vue-cli-service build --report",
         "lint": "vue-cli-service lint"
     },
     "dependencies": {
+        "@babel/parser": "^7.16.2",
+        "@prettier/plugin-php": "^0.17.6",
+        "@typescript-eslint/typescript-estree": "^5.3.0",
+        "angular-html-parser": "^1.8.0",
         "axios": "^0.21.4",
         "babel-runtime": "^6.26.0",
         "bignumber.js": "^9.0.1",
         "code-formatter": "0.0.1",
         "codemirror": "^5.63.3",
-        "codemirror-graphql": "^1.0.3",
+        "codemirror-graphql": "^1.1.0",
         "cron-parser": "^2.16.3",
         "cronstrue": "^1.122.0",
         "crypto-js": "^3.3.0",
         "diff-match-patch": "^1.0.5",
         "file": "^0.2.2",
-        "graphql": "^16.0.1",
+        "graphql": "15.5.0",
         "ipinyinjs": "^1.0.0",
-        "is-url": "^1.2.4",
         "jian_fan": "^1.0.3",
         "js-base64": "^2.6.4",
         "js-htmlencode": "^0.3.0",
@@ -38,6 +42,11 @@
         "moment": "^2.29.1",
         "php-array-reader": "^1.3.2",
         "phparr": "^0.2.0",
+        "postcss": "^8.3.11",
+        "postcss-less": "^5.0.0",
+        "postcss-scss": "^4.0.2",
+        "prettier": "^2.4.1",
+        "prettier-plugin-sql": "^0.3.0",
         "properties-to-json": "^0.1.7",
         "qrcode": "^1.4.4",
         "qrcode-parser": "^1.2.0",
@@ -45,6 +54,8 @@
         "serialize-php": "^1.1.2",
         "sm-crypto": "^0.1.4",
         "system": "^2.0.1",
+        "typescript": "^4.4.4",
+        "uglify-js": "3.14.3",
         "uuid": "^8.3.2",
         "view-design": "^4.6.1",
         "vue": "^2.6.14",

src/tool/config.js

@@ -33,15 +33,6 @@ const setUserCommon = function (tools) {
     cache.setNoVersion('user_common', tools)
 }
 
-const getToolTitle = function (name) {
-    for (let i = 0; i < tool.length; i++) {
-        if (tool[i].name === name) {
-            return __()
-        }
-    }
-    return ''
-}
-
 const getToolDefaultCategory = function (name) {
     for (let i = 0; i < tool.length; i++) {
         if (tool[i].name === name) {

src/views/tool/code.vue

@@ -68,6 +68,7 @@ export default {
                     this.$saveToolData(this.current);
                     return this.$Message.success(`${this.current.isCompress ? "压缩" : "格式化"}完成`);
                 } catch (e) {
+                    console.log(e)
                     return this.$Modal.error({
                         title: "格式化错误",
                         content: `${e.message}`

src/views/tool/components/codeEditor.vue

@@ -2,7 +2,7 @@
     <div ref="container" class="code-editor" :style="`height:${containerHeight};width:${width}`"></div>
 </template>
 <script>
-import {compress, format} from "../library/formatter";
+import {format} from "../library/formatter";
 import {create} from "../library/editor";
 
 export default {
@@ -71,10 +71,10 @@ export default {
             return this.editor
         },
         format(lang, option = {}) {
-            this.$emit('input', format(this.editor.getValue(), lang, option))
+            this.$emit('input', format(this.editor.getValue(), lang, false, option))
         },
         compress(lang) {
-            this.$emit('input', compress(this.editor.getValue(), lang))
+            this.$emit('input', format(this.editor.getValue(), lang, true))
         }
     }
 };

src/views/tool/library/formatter.js

-import prettier from "prettier/standalone";
-import parser from "prettier/parser-babel";
-import parserJson5 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 parserJava from "prettier-plugin-java";
-import parserSql from "prettier-plugin-sql";
-import parserPhp from "@prettier/plugin-php";
-import parserXml from "@prettier/plugin-xml";
-
-//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]},
-    json: {parser: "json5", plugins: [parserJson5], quoteProps: "preserve", trailingComma: "none"},
-    xml: {parser: "xml", plugins: [parserXml]},
-    sql: {parser: "sql", plugins: [parserSql]},
-    php: {parser: "php", plugins: [parserPhp]},
-    java: {parser: "java", plugins: [parserJava]},
-};
-const format = (code, lang, formatOptions = {}) => {
-    if (!(lang in options)) {
-        throw new Error(`${lang} can't format`);
-    }
-    let tab = "tab" in formatOptions ? formatOptions.tab : 4;
-    let langOption = options[lang];
-    langOption.tabWidth = tab
-    if ("printWidth" in formatOptions){
-        langOption.printWidth = formatOptions.printWidth
-    }
-    if ("proseWrap" in formatOptions){
-        langOption.proseWrap = formatOptions.proseWrap
-    }
-    return prettier.format(code, langOption);
-};
-
-export default format
-
-export const jsonFormatter = (code) => {
-    return format(code, 'json', {printWidth: 2, proseWrap: "never"})
-}
-

src/views/tool/library/formatter/angular.js

+import prettier from "prettier/standalone";
+import parserHtml from "prettier/parser-html";
+
+export const beautify = (code, option = {}) => {
+    return prettier.format(code, {
+        plugins: [parserHtml],
+        parser: "angular",
+        tabWidth: "tab" in option ? option.tab : 4
+    });
+}
+
+export default {
+    beautify
+}

src/views/tool/library/formatter/css.js

+import prettier from "prettier/standalone";
+import parserCss from "prettier/parser-postcss";
+export const beautify = (code, option = {}) => {
+    return prettier.format(code, {
+        plugins: [parserCss],
+        parser: "css",
+        tabWidth: "tab" in option ? option.tab : 4
+    });
+}
+
+// eslint-disable-next-line no-unused-vars
+export const compress = (code, options = {}) => {
+    return code
+        // .replace(/\/\*([^*]|[\r\n]|(\*+([^*\/]|[\r\n])))*\*+\//g, "") // 移除注释
+        .replace(/\s+/g, " ").replace(/{\s+/g, "{").replace(/}\s+/g, "}").replace(/;\s+/g, ";").replace(/\/\*\s+/g, "/*").replace(/\*\/\s+/g, "*/")
+}
+
+export default {
+    beautify,compress
+}

src/views/tool/library/formatter/graphql.js

+import prettier from "prettier/standalone";
+import parserGraphql from "prettier/parser-graphql";
+export const beautify = (code, option = {}) => {
+    return prettier.format(code, {
+        plugins: [parserGraphql],
+        parser: "graphql",
+        tabWidth: "tab" in option ? option.tab : 4
+    });
+}
+
+export default {
+    beautify
+}

src/views/tool/library/formatter/html.js

+import prettier from "prettier/standalone";
+import parserHtml from "prettier/parser-html";
+
+export const beautify = (code, option = {}) => {
+    return prettier.format(code, {
+        plugins: [parserHtml],
+        parser: "html",
+        tabWidth: "tab" in option ? option.tab : 4
+    });
+}
+// eslint-disable-next-line no-unused-vars
+export const compress = (code, options = {}) => {
+    let headHTML = "";
+    code = code.replace(/(\r\n|\n|\r|\t)/gm, "");
+    code = code.replace(/\s+/g, " ");
+    code = code.replace(new RegExp("</HEAD", "gi"), '</head');
+    code = code.replace(new RegExp("</head ", "gi"), '</head');
+    let bodySplit = "</head>";
+    let i = code.indexOf(bodySplit) !== -1;
+    if (i === true) {
+        let tempo = code.split(new RegExp(bodySplit, 'i'));
+        headHTML = tempo[0];
+        code = tempo[1];
+    } else {
+        bodySplit = "";
+    }
+    code = code.replace(/(\r\n|\n|\r|\t)/gm, "");
+    code = code.replace(/\s+/g, " ");
+    return headHTML + bodySplit + '\n' + code;
+}
+
+export default {
+    beautify, compress
+}

src/views/tool/library/formatter/index.js

+import js from "./javascript"
+import json from "./json"
+import ts from "./typescript"
+import css from "./css"
+import html from "./html"
+import sql from "./sql"
+import xml from "./xml"
+import php from "./php"
+import yaml from "./yaml"
+import markdown from "./markdown"
+import graphql from "./graphql"
+import vue from "./vue"
+import less from "./less"
+import scss from "./scss"
+import angular from "./angular"
+
+const methods = {
+    js,
+    json,
+    ts,
+    vue,
+    graphql,
+    markdown,
+    css,
+    less,
+    scss,
+    yaml,
+    html,
+    angular,
+    xml,
+    php,
+    sql
+};
+
+// 代码格式化
+export const format = (code, lang, isCompress = false, options = {}) => {
+    if (!(lang in methods)){
+        throw new Error(`${lang} not support`);
+    }
+    let method = isCompress ? "compress" : "beautify";
+    if (!(method in methods[lang])){
+        throw new Error(`${lang} not support ${method}`);
+    }
+
+    return methods[lang][method](code,options)
+};
+
+export const jsonFormatter = (code) => {
+    return format(code, 'json')
+}
+
+export default format
+

src/views/tool/library/formatter/javascript.js

+import prettier from "prettier/standalone";
+import parser from "prettier/parser-babel";
+
+// https://github.com/mishoo/UglifyJS/issues/4878
+// eslint-disable-next-line import/no-unresolved, import/extensions, import/no-webpack-loader-syntax
+import UglifyJS from './uglify';
+export const beautify = (code, option = {}) => {
+    return prettier.format(code, {
+        plugins: [parser],
+        parser: "babel",
+        tabWidth: "tab" in option ? option.tab : 4
+    });
+}
+// eslint-disable-next-line no-unused-vars
+export const compress = (code, options = {}) => {
+    let result = UglifyJS.minify(code, {
+        keep_fnames: true,
+        compress: false,
+        mangle: false,
+        output: {
+            beautify: false,
+        }
+    })
+    if (!("code" in result) || !result.code){
+        throw new Error("compress error:"+JSON.stringify(result.error))
+    }
+    return result.code
+}
+
+export default {
+    beautify,compress
+}

src/views/tool/library/formatter/json.js

+export const beautify = (code, option = {}) => {
+    return JSON.stringify(JSON.parse(code.trim()), null, "tab" in option ? option.tab : 4)
+}
+// eslint-disable-next-line no-unused-vars
+export const compress = (code, options = {}) => {
+    return JSON.stringify(JSON.parse(code.trim()), null, 0)
+}
+
+export default {
+    beautify, compress
+}

src/views/tool/library/formatter/less.js

+import prettier from "prettier/standalone";
+import parserCss from "prettier/parser-postcss";
+export const beautify = (code, option = {}) => {
+    return prettier.format(code, {
+        plugins: [parserCss],
+        parser: "less",
+        tabWidth: "tab" in option ? option.tab : 4
+    });
+}
+
+export default {
+    beautify
+}

src/views/tool/library/formatter/markdown.js

+import prettier from "prettier/standalone";
+import parser from "prettier/parser-markdown";
+
+export const beautify = (code, option = {}) => {
+    return prettier.format(code, {
+        plugins: [parser],
+        parser: "markdown",
+        tabWidth: "tab" in option ? option.tab : 4
+    });
+}
+
+export default {
+    beautify
+}

src/views/tool/library/formatter/php.js

+import prettier from "prettier/standalone";
+import phpPlugin from "@prettier/plugin-php/standalone";
+export const beautify = (code, option = {}) => {
+    return prettier.format(code, {
+        plugins: [phpPlugin],
+        parser: "php",
+        tabWidth: "tab" in option ? option.tab : 4
+    });
+}
+
+export default {
+    beautify
+}

src/views/tool/library/formatter/scss.js

+import prettier from "prettier/standalone";
+import parserCss from "prettier/parser-postcss";
+export const beautify = (code, option = {}) => {
+    return prettier.format(code, {
+        plugins: [parserCss],
+        parser: "scss",
+        tabWidth: "tab" in option ? option.tab : 4
+    });
+}
+
+export default {
+    beautify
+}

src/views/tool/library/formatter/sql.js

+import prettier from "prettier/standalone";
+import parserSql from "prettier-plugin-sql";
+export const beautify = (code, option = {}) => {
+    return prettier.format(code, {
+        plugins: [parserSql],
+        parser: "sql",
+        tabWidth: "tab" in option ? option.tab : 4
+    });
+}
+// eslint-disable-next-line no-unused-vars
+export const compress = (code, options = {}) => {
+    return code.replace(/\s+/g, " ").replace(/\s+\(/, "(").replace(/\s+\)/, ")")
+}
+
+export default {
+    beautify,compress
+}

src/views/tool/library/formatter/typescript.js

+import prettier from "prettier/standalone";
+import parserTypeScript from "prettier/parser-typescript";
+export const beautify = (code, option = {}) => {
+    return prettier.format(code, {
+        plugins: [parserTypeScript],
+        parser: "typescript",
+        tabWidth: "tab" in option ? option.tab : 4
+    });
+}
+
+export default {
+    beautify
+}

src/views/tool/library/formatter/vue.js

+import prettier from "prettier/standalone";
+import parserHtml from "prettier/parser-html";
+
+export const beautify = (code, option = {}) => {
+    return prettier.format(code, {
+        plugins: [parserHtml],
+        parser: "vue",
+        tabWidth: "tab" in option ? option.tab : 4
+    });
+}
+
+export default {
+    beautify
+}

src/views/tool/library/formatter/xml.js

+import xmlFormatter from "xml-formatter"
+
+export const beautify = (code, option = {}) => {
+    return xmlFormatter(code, {
+        indentation: " ".repeat("tab" in option ? option.tab : 4),
+        collapseContent: true,
+        lineSeparator: '\n'
+    });
+}
+// eslint-disable-next-line no-unused-vars
+export const compress = (code, options = {}) => {
+    return xmlFormatter(code, {
+        indentation: '',
+        collapseContent: true,
+        lineSeparator: ''
+    });
+}
+
+export default {
+    beautify, compress
+}

src/views/tool/library/formatter/yaml.js

+import prettier from "prettier/standalone";
+import parser from "prettier/parser-yaml";
+
+export const beautify = (code, option = {}) => {
+    return prettier.format(code, {
+        plugins: [parser],
+        parser: "yaml",
+        tabWidth: "tab" in option ? option.tab : 4
+    });
+}
+
+export default {
+    beautify
+}

vue.config.js

 const adapter = require('./src/tool/adapter');
+const IS_PROD = process.env.NODE_ENV === 'production'
 const pages = {
     tool: {
         entry: 'src/tool.js',
@@ -24,7 +25,39 @@ const config = {
             });
             return args
         })
+        if (IS_PROD){
+            // 独立打包js 防止js文件过大 影响相关平台审核
+            config.optimization.splitChunks({
+                cacheGroups: {
+                    prettierParserTypescript: {
+                        test: /[\\/]node_modules[\\/]prettier[\\/]parser-typescript\.js/,
+                        name: 'prettier-parser-typescript',
+                        chunks: 'all',
+                        priority: 100,
+                        reuseExistingChunk:true,
+                        enforce:true
+                    },
+                    i18n: {
+                        test: /[\\/]src[\\/]i18n[\\/]index\.js/,
+                        name: 'i18n',
+                        chunks: 'initial',
+                        priority: 100,
+                        enforce:true
+                    },
+                    uglify: {
+                        test: /[\\/]src[\\/]views[\\/]tool[\\/]library[\\/]formatter[\\/]uglify\.js/,
+                        name: 'uglify',
+                        chunks: 'all',
+                        priority: 100,
+                        enforce:true
+                    }
+                }
+            })
+        }
     },
+    configureWebpack:config =>{
+
+    }
 };
 
 adapter.initialize()