feat: js 代码格式化切换为 prettier

xjq7 · Nov 20, 2022 · 6beafb1 · 6beafb1
1 parent 9efcb52
commit 6beafb1
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 24 deletions.
diff --git a/client/index.html b/client/index.html
@@ -12,6 +12,11 @@
       content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
     />
     <title>Runcode 在线代码运行编辑器</title>
+    <script defer src="https://unpkg.com/prettier@2.7.1/standalone.js"></script>
+    <script
+      defer
+      src="https://unpkg.com/prettier@2.7.1/parser-babel.js"
+    ></script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/client/src/hooks/useClangFormat/useClangFormat.ts b/client/src/hooks/useClangFormat/useClangFormat.ts
@@ -1,5 +1,6 @@
 import { useRef, useState } from 'react';
 import { useEffect } from 'react';
+import { CodeType } from '~utils/codeType';
 import ProcessManager from './process-manager';
 
 interface Props {
@@ -10,7 +11,12 @@ let clangFormatInstance = new ProcessManager('clang-format', 'clang-format');
 
 clangFormatInstance.start();
 
-function useClangFormat({ onCodeFormatDone }: Props) {
+function useClangFormat({
+  onCodeFormatDone,
+}: Props): [
+  boolean,
+  ({ type, code }: { code: string; type: CodeType }) => void
+] {
   const [clangFormat, setClangFormat] =
     useState<ProcessManager>(clangFormatInstance);
 
@@ -28,7 +34,35 @@ function useClangFormat({ onCodeFormatDone }: Props) {
 
     clangFormatRef.current = clangFormat;
   }, []);
-  return [clangFormat];
+
+  const format = ({ type, code }: { code: string; type: CodeType }) => {
+    if (type === CodeType.nodejs) {
+      if (window.prettier && window.prettierPlugins) {
+        try {
+          const formatCode = window.prettier.format(code, {
+            parser: 'babel',
+            plugins: window.prettierPlugins,
+            singleQuote: true,
+            tabWidth: 4,
+          });
+          onCodeFormatDone(formatCode);
+        } catch (error: any) {
+          console.log('js format error', error.message);
+        }
+      }
+    } else if (
+      [CodeType.c, CodeType.cpp, CodeType.java, CodeType.dotnet].includes(type)
+    ) {
+      clangFormat?.worker?.postMessage({
+        function: 'format',
+        code,
+      });
+    }
+  };
+
+  const isReady = !!clangFormat;
+
+  return [isReady, format];
 }
 
 export default useClangFormat;
diff --git a/client/src/pages/editor/components/Operator.tsx b/client/src/pages/editor/components/Operator.tsx
@@ -52,7 +52,9 @@ function Operator(props: Props) {
     getEditor()?.setValue(result);
   };
 
-  const [clangFormat] = useClangFormat({ onCodeFormatDone });
+  const [isFormatReady, format] = useClangFormat({
+    onCodeFormatDone,
+  });
 
   const { width } = useWindowSize();
 
@@ -106,15 +108,6 @@ function Operator(props: Props) {
 
   const [timesPrevent, setTimesPrevent] = useState(false);
 
-  const showClangFormat = useMemo(
-    () =>
-      clangFormat &&
-      (CodeType.cpp === codeType ||
-        CodeType.java === codeType ||
-        CodeType.c === codeType),
-    [codeType, clangFormat]
-  );
-
   const saveCode = () => {
     storage.set(CodeStorageKey[codeType], getEditor()?.getValue());
   };
@@ -226,21 +219,13 @@ function Operator(props: Props) {
           </Dropdown>
         )}
 
-        {(codeType === CodeType.nodejs || showClangFormat) && (
+        {isFormatReady && (
           <Button
             type="primary"
             className="mr-2"
             onClick={() => {
-              if (codeType === CodeType.nodejs) {
-                getEditor()?.getAction('editor.action.formatDocument')?.run();
-              } else if (showClangFormat) {
-                const code = getEditor()?.getValue();
-                if (!code) return;
-                clangFormat?.worker?.postMessage({
-                  function: 'format',
-                  code,
-                });
-              }
+              const code = getEditor()?.getValue() || '';
+              format({ type: codeType, code });
             }}
           >
             format

diff --git a/client/src/vite-env.d.ts b/client/src/vite-env.d.ts
@@ -9,8 +9,22 @@ interface ImportMeta {
   readonly env: ImportMetaEnv;
 }
 
+interface Prettier {
+  format(
+    code: string,
+    options: {
+      parser: string;
+      plugins: any[];
+      singleQuote?: boolean;
+      tabWidth?: number;
+    }
+  ): string;
+}
+
 interface Window {
   readonly terminal: any;
+  readonly prettier: Prettier;
+  readonly prettierPlugins: any;
 }
 
 interface Response<T> {

diff --git a/question/FrontEnd/deepClone/test.mjs b/question/FrontEnd/deepClone/test.mjs
@@ -3,7 +3,7 @@ import f from './index.mjs';
 import { it } from 'mocha';
 import { assert } from 'chai';
 
-it('一层对象: 输入 { f: 1 }', () => {
+it('一层对象: 输入 { f: 2 }', () => {
   assert.deepEqual(f({ f: 2 }), { f: 2 });
 });