那些在线代码编辑器,给你们的编辑器加上代码格式化有这么难吗?

站长

2023年07月20日 11:12 · 阅读数 18

最近应该有不少在面试或者准备面试的小伙伴吧？想必大家都有做过什么笔试或者有去 leetcode 或者 牛客网 上面刷算法题吧。

不知道你是否有因为这个问题而困惑,就是它们的在线代码编辑器就是没有代码格式化问题,导致写出来的代码特别丑,需要手动去调代码。难道去实现一个代码格式化插件很难吗?

我知道 leetcode 可以在 vscode 上写以及可以冲 vip 可以有代码格式化体验,但是我就偏偏不冲 vip 我就偏偏不用 vscode,我就要骂你我就要骂你 😡😡😡

那么在接下来的文章当中我就来带大家去实现一个简易版的代码编辑器以及如何实现代码格式化。

项目安装

首先我们先来创建一个初始化项目:

npx create-neat formatt

当终端里输入该命令之后,会出现以下效果,如下所示: 那些在线代码编辑器,给你们的编辑器加上代码格式化有这么难吗?

选择第四个,后面直接傻瓜式按回车键即可。当然你也可以用你自己喜欢的方式创建一个 React 项目。

要想使用在线代码编辑器,我们先安装相关依赖,这里我就不介绍为什么使用这个了,用了就是用了,没有什么为啥:

pnpm add monaco-editor-webpack-plugin  monaco-editor react-monaco-editor prettier @types/prettier

这里并没有区分安装环境,你们自己区分一下即可。

创建编辑器

首先我们在 App.tsx 文件下编写以下代码:

import React, { FC, useState } from "react";
import MonacoEditor from "react-monaco-editor";

const App: FC = () => {
  const [code, setCode] = useState<string>(`const moment = "靓仔";`);
  return (
    <>
      <MonacoEditor
        language="javascript"
        height="100vh"
        width="100vw"
        theme="vs-dark"
        value={code}
        options={{
          selectOnLineNumbers: true,
          folding: true,
        }}
        onChange={(newCode: string) => setCode(newCode)}
        editorDidMount={(editor) => editor.focus()}
      />
    </>
  );
};

export default App;

代码编辑完成之后,我们执行 pnpm start 执行运行项目,最终效果如下图所示: 那些在线代码编辑器,给你们的编辑器加上代码格式化有这么难吗?

这个时候我们是可以在这里正常编写代码了,但是好像这代码并没有高亮,我们可以通过配置 webpack 的方式,让其支持特殊语言的代码高亮,具体配置在 webpack.config.js 文件下添加如下配置:

    const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");

    module.exports = {
      plugins: [
        new MonacoWebpackPlugin([
          "css",
          "html",
          "javascript",
          "json",
          "less",
          "php", // 使用代码编辑器怎么可以没有php
          "scss",
          "typescript",
        ]),
      ],
    };

修改完成 webpack 配置之后,我们需要重新运行项目,最终效果已经是我们想要的效果了: 那些在线代码编辑器,给你们的编辑器加上代码格式化有这么难吗?

如何实现代码格式化

要想实现代码格式化,其实真的很简单,只需要使用 prettier 即可。

一般情况下,我们在我们平时用来开发的编辑器当中,按下 ctrl + s 键即可实现自动保存,那么我们也用这个按键来实现保存代码自动格式化,在 App.tsx 文件下添加以下代码:

import React, { FC, useState, useEffect } from "react";
import MonacoEditor from "react-monaco-editor";
import prettier from "prettier/standalone";
import parserBabel from "prettier/parser-babel";

const App: FC = () => {
  const [code, setCode] = useState<string>(`const moment = "靓仔";`);

  useEffect(() => {
    const handleKeyDown = async (event: KeyboardEvent) => {
      if ((event.ctrlKey || event.metaKey) && event.key === "s") {
        event.preventDefault();
        try {
          const newCode = await prettier.format(code, {
            parser: "babel",
            plugins: [parserBabel],
            printWidth: 80,
            tabWidth: 2,
          });
          setCode(newCode);
        } catch (error) {
          alert(`代码格式化失败:${error}`);
        }
      }
    };

    document.addEventListener("keydown", handleKeyDown);

    return () => {
      document.removeEventListener("keydown", handleKeyDown);
    };
  }, [code]);

  return (
    <>
      <MonacoEditor
        language="javascript"
        height="100vh"
        width="100vw"
        theme="vs-dark"
        value={code}
        options={{
          selectOnLineNumbers: true,
          folding: true,
        }}
        onChange={(newCode: string) => setCode(newCode)}
        editorDidMount={(editor) => editor.focus()}
      />
    </>
  );
};

export default App;