教你做个在线代码编辑器,体验堪比 VSCode!

有的需求需要在网页上写代码。

比如在线执行代码的 playground:

教你做个在线代码编辑器,体验堪比 VSCode!

或者在线面试:

教你做个在线代码编辑器,体验堪比 VSCode!

如果让你实现网页版 TypeScript 编辑器,你会如何做呢?

有的同学说,直接用微软的 monaco editor 呀:

教你做个在线代码编辑器,体验堪比 VSCode!

确实,直接用它就可以,但是有挺多地方需要处理的。

我们来试试看。

npx create-vite
教你做个在线代码编辑器,体验堪比 VSCode!

创建个 vite + react 的项目。

安装依赖:

npm install

npm install @monaco-editor/react

这里用 @monaco-editor/react 这个包,它把 monaco editor 封装成了 react 组件。

去掉 main.tsx 里的 index.css

教你做个在线代码编辑器,体验堪比 VSCode!

然后在 App.tsx 用一下:

import MonacoEditor from '@monaco-editor/react'

export default function App({

  const code = `import lodash from 'lodash';
function App() {
  return 
guang
  
}  
  `
;

  return MonacoEditor
      height={'100vh'}
      path={"guang.tsx"}
      language={"typescript"}
      value={code}
  />
}

跑下开发服务:

npm run dev

试下看:

教你做个在线代码编辑器,体验堪比 VSCode!

现在就可以在网页写 ts 代码了。

但是有报错:

教你做个在线代码编辑器,体验堪比 VSCode!

jsx 语法不知道怎么处理。

这里明显要改 typescript 的 tsconfig.json。

怎么改呢?

这样:

教你做个在线代码编辑器,体验堪比 VSCode!
import MonacoEditor, { OnMount } from '@monaco-editor/react'

export default function App({

  const code = `import lodash from 'lodash';
function App() {
  return 
guang
  
}  
  `
;

  const handleEditorMount: OnMount = (editor, monaco) => {
    monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
        jsx: monaco.languages.typescript.JsxEmit.Preserve,
        esModuleInteroptrue,
    })

}

  return MonacoEditor
      height={'100vh'}
      path={"guang.tsx"}
      language={"typescript"}
      onMount={handleEditorMount}
      value={code}
  />
}

onMount 的时候,设置 ts 的 compilerOptions。

这里设置 jsx 为 preserve,也就是输入

输出

,保留原样。

如果设置为 react 会输出 React.createElement(“div”)。

再就是 esModuleInterop,这个也是 ts 常用配置。

默认 fs 要这么引入,因为它是 commonjs 的包,没有 default 属性:

import * as fs from 'fs';

设置 esModuleInterop 会在编译的时候自动加上 default 属性。

就可以这样引入了:

import fs from 'fs';

可以看到,现在 jsx 就不报错了:

教你做个在线代码编辑器,体验堪比 VSCode!

还有一个错误:

教你做个在线代码编辑器,体验堪比 VSCode!

没有 lodash 的类型定义。

教你做个在线代码编辑器,体验堪比 VSCode!

写 ts 代码没提示怎么行呢?

我们也要支持下。

这里用到 @typescript/ata 这个包:

教你做个在线代码编辑器,体验堪比 VSCode!

ata 是 automatic type acquisition 自动类型获取。

它可以传入源码,自动分析出需要的 ts 类型包,然后自动下载。

我们新建个 ./ata.ts,复制文档里的示例代码:

import { setupTypeAcquisition } from '@typescript/ata'
import typescriprt from 'typescript';

export function createATA(onDownloadFile: (code: string, path: string) => void{
  const ata = setupTypeAcquisition({
    projectName'my-ata',
    typescript: typescriprt,
    loggerconsole,
    delegate: {
      receivedFile(code, path) => {
        console.log('自动下载的包', path);
        onDownloadFile(code, path);
      }
    },
  })

  return ata;
}

安装用到的包:

npm install --save @typescript/ata -f 

这里就是用 ts 包去分析代码,然后自动下载用到的类型包,有个 receivedFile 的回调函数里可以拿到下载的代码和路径。

然后在 mount 的时候调用下:

教你做个在线代码编辑器,体验堪比 VSCode!
const ata = createATA((code, path) => {
    monaco.languages.typescript.typescriptDefaults.addExtraLib(code, `file://${path}`)
})

editor.onDidChangeModelContent(() => {
    ata(editor.getValue());
});

ata(editor.getValue());

就是最开始获取一次类型,然后内容改变之后获取一次类型,获取类型之后用 addExtraLib 添加到 ts 里。

看下效果:

教你做个在线代码编辑器,体验堪比 VSCode!
教你做个在线代码编辑器,体验堪比 VSCode!

有类型了!

写代码的时候用到的包也会动态去下载它的类型:

教你做个在线代码编辑器,体验堪比 VSCode!

比如我们用到了 ahooks,就会实时下载它的类型包然后应用。

这样,ts 的开发体验就有了。

再就是现在字体有点小,明明内容不多右边却有一个滚动条:

教你做个在线代码编辑器,体验堪比 VSCode!

这些改下 options 的配置就好了:

教你做个在线代码编辑器,体验堪比 VSCode!scrollBeyondLastLine 是到了最后一行之后依然可以滚动一屏,关闭后就不会了。

minimap 就是缩略图,关掉就没了。

scrollbar 是设置横向纵向滚动条宽度的。

theme 是修改主题。

return MonacoEditor
      height={'100vh'}
      path={"guang.tsx"}
      language={"typescript"}
      onMount={handleEditorMount}
      value={code}
      options={
        {
          fontSize: 16,
          
          scrollBeyondLastLine: false,
          minimap: {
            enabled: false,
          },
          scrollbar: {
            verticalScrollbarSize: 6,
            horizontalScrollbarSize: 6,
          }
        }
    }
  />
教你做个在线代码编辑器,体验堪比 VSCode!

好多了。

我们还可以添加快捷键的交互:

教你做个在线代码编辑器,体验堪比 VSCode!默认 cmd(windows 下是 ctrl) + j 没有处理。

我们可以 cmd + j 的时候格式化代码。

教你做个在线代码编辑器,体验堪比 VSCode!
editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyJ, () => {
    editor.getAction('editor.action.formatDocument')?.run()
});

试下效果:

教你做个在线代码编辑器,体验堪比 VSCode!

有同学可能问,monaco editor 还有哪些 action 呢?

打印下就知道了:

editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyJ, () => {
    // editor.getAction('editor.action.formatDocument')?.run()
    let actions = editor.getSupportedActions().map((a) => a.id);
    console.log(actions);
});

有 131 个:

教你做个在线代码编辑器,体验堪比 VSCode!

用到再搜就行。

这样,我们的网页版 TypeScript 编辑器就完成了。

总结

有的需求需要实现网页版编辑器,我们一般都用 monaco editor 来做。

今天我们基于 @monaco-editor/react 实现了 TypeScript 编辑器。

可以在 options 里配置滚动条、字体大小、主题等。

然后 onMount 里可以设置 compilerOptions,用 addCommand 添加快捷键等。

并且我们基于 @typescript/ata 实现了自动下载用到的 ts 类型的功能,它会扫描代码里的 import,然后自动下载类型,之后 addExtraLib 添加到 ts 里。

这样在网页里就有和 vscode 一样的 ts 编写体验了。


👇🏻 点击下方阅读原文,获取鱼皮往期编程干货。

往期推荐

我的新项目又来咯!

我们团队前端的自学经历,三本又怎样?

面对狗血小 Bug,我再也不慌了~

偷偷分享下我们公司的研发规范~

我们做的小工具,爆了!

大厂,是怎么提高研发效率的?

唉,新项目内测延期了。。我的一点思考

本内容观点仅代表发布作者本人观点立场,欣文网平台只做信息内容展示和存储。发布作者:全网转载,转转请注明出处:https://www.xinenw.com/6044

(0)
上一篇 2024年4月28日 17:28
下一篇 2024年4月28日 17:28

相关推荐

  • 499元,小米这新品果然又杀疯了

    潮流是一阵妖风。 一会儿往东吹,一会儿往西吹,反正从来不朝着机哥梳得布灵布灵的三七分油头的方向吹。 二月份的时候,全网吹起了Vision Pro。 机哥我,买了。 但让我万万没想到的是,比Vision Pro本身更热门的。 是100元/小时的租赁服务。 三月份的时候,全网吹起了小米汽车SU7。 机哥我,买了。 但让我万万没想到的是,比小米汽车热度更高的。 居…

    2024年4月22日
    8800
  • 五一到处人从众?大学生宅在寝室靠“裹被子自拍”走红,惊艳网友!

    点击蓝字| 关注我们 文|我是笑笑 一年当中最长的假期莫过于年假了,除此之外就是五一和十一小长假,5天、7天小长假也可以让大家精神放松,压力得到缓解。 要是学生群体的话,加上寒暑假,好像上学也不算太痛苦,毕竟放假是真的开心。哪怕还有折磨人的“寒暑假生活”作业要交。 对于怎样度过小长假这个问题,不同人有不同选择,有的人会选择在家里度过,好好放松休息,而有的人会…

    2024年5月12日
    15000
  • 官方预告新架构,英特尔下一代平台技术预览

    如果有关注最近这几年的PC市场可能会意识到,最近这段时间的PC处理器更新换代速度似乎越来越快了。 以英特尔为例,2020年第二季度他们发布了旗下首款采用“混合架构”的处理器酷睿i5-L16G7。仅仅过了一年多一点之后,这种新设计就被全面铺开,成为了大家熟知的第12代酷睿。再过了一年时间,13代酷睿就显著增大缓存,同时提升了能效比和核心数量。 接下来到了202…

    2024年5月27日
    1800
  • 相比甜,牙齿更怕的是这种味道,很多人都不知道

    说起牙齿,我们可能首先会想到“硬”。的确,牙齿硬度可观,甚至有些朋友用牙齿碎坚果壳、起瓶盖。(危险,千万别模仿) 牙齿的硬度源自其成分和结构,牙齿表层的牙釉质的主要成分是羟基磷酸钙,其莫氏硬度可达 5~6,对比一下,铁约为 5,不锈钢为 5.5,这么看来,也许那部经典电视剧改名叫“‘铁齿钢牙’纪晓岚”更合适,因为纯铜太软配不上牙…… 图库版权图片,转载使用可…

    2024年5月27日
    1500
  • 小米15升级细节再曝光!小折叠要来了

    按照惯例,小米会在今年第四季度带来全新一代的数字系列旗舰。陆续出现的爆料则显示,全新的小米15系列将会在今年提前发布时间,有望在10月中旬亮相。 对比来看,前代产品小米14系列在2023年10月26日正式发布。如果爆料信息准确的话,那么今年应该会更早见到小米旗下的数字旗舰迭代。 随着新品发布时间的接近,更多的产品爆料信息也在陆续出现。 博主@数码闲聊站 的一…

    2024年5月26日
    3000

发表回复

登录后才能评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信
原欣文网读者需要重新注册,平台不断升级敬请见谅!