有的需求需要在网页上写代码。
比如在线执行代码的 playground:
![c23c1bb8e95cd456731b90f8cdd7cd54.webp](https://filescdn.proginn.com/af42997fb4519c2b74d93a08134fc671/c23c1bb8e95cd456731b90f8cdd7cd54.webp)
或者在线面试:
![dcab20aee9f4b91cc42c4900a37cd8f3.webp](https://filescdn.proginn.com/166b02a195c4df4e12629117162010ac/dcab20aee9f4b91cc42c4900a37cd8f3.webp)
如果让你实现网页版 TypeScript 编辑器,你会如何做呢?
有的同学说,直接用微软的 monaco editor 呀:
![0182ae2fe9922b9127c16c4eaf8bf15d.webp](https://filescdn.proginn.com/5728d03f2b95262e3adbaa2bdb87e91f/0182ae2fe9922b9127c16c4eaf8bf15d.webp)
确实,直接用它就可以,但是有挺多地方需要处理的。
我们来试试看。
npx create-vite
![14e0a838d6fa52a1dba5de1fcd3873a6.webp](https://filescdn.proginn.com/f1e32396c3ce3663f54be348480934cc/14e0a838d6fa52a1dba5de1fcd3873a6.webp)
创建个 vite + react 的项目。
安装依赖:
npm install
npm install @monaco-editor/react
这里用 @monaco-editor/react 这个包,它把 monaco editor 封装成了 react 组件。
去掉 main.tsx 里的 index.css
![651178afa8acb0de7e29686cff2bf33d.webp](https://filescdn.proginn.com/61432109fb08fcc1c5f97749d1b0edc8/651178afa8acb0de7e29686cff2bf33d.webp)
然后在 App.tsx 用一下:
import MonacoEditor from '@monaco-editor/react'
export default function App() {
const code = `import lodash from 'lodash';
function App() {
return <div>guang</div>
}
`;
return <MonacoEditor
height={'100vh'}
path={"guang.tsx"}
language={"typescript"}
value={code}
/>
}
跑下开发服务:
npm run dev
试下看:
![337e981f36e897016774d1d2086bd4aa.webp](https://filescdn.proginn.com/d5cdbba104c2f856313e82a366fb6cbb/337e981f36e897016774d1d2086bd4aa.webp)
现在就可以在网页写 ts 代码了。
但是有报错:
![5757a893e996b7c6323dd7e866f8ccbc.webp](https://filescdn.proginn.com/d776d92dae6b53275bfb4fc878f6c2f2/5757a893e996b7c6323dd7e866f8ccbc.webp)
jsx 语法不知道怎么处理。
这里明显要改 typescript 的 tsconfig.json。
怎么改呢?
这样:
![0b22950a3a6fe3168198aa5810c02b81.webp](https://filescdn.proginn.com/7686c69984450ca0110c2cc68dc41ccd/0b22950a3a6fe3168198aa5810c02b81.webp)
import MonacoEditor, { OnMount } from '@monaco-editor/react'
export default function App() {
const code = `import lodash from 'lodash';
function App() {
return <div>guang</div>
}
`;
const handleEditorMount: OnMount = (editor, monaco) => {
monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
jsx: monaco.languages.typescript.JsxEmit.Preserve,
esModuleInterop: true,
})
}
return <MonacoEditor
height={'100vh'}
path={"guang.tsx"}
language={"typescript"}
onMount={handleEditorMount}
value={code}
/>
}
onMount 的时候,设置 ts 的 compilerOptions。
这里设置 jsx 为 preserve,也就是输入 <div> 输出 <div>,保留原样。
如果设置为 react 会输出 React.createElement("div")。
再就是 esModuleInterop,这个也是 ts 常用配置。
默认 fs 要这么引入,因为它是 commonjs 的包,没有 default 属性:
import * as fs from 'fs';
设置 esModuleInterop 会在编译的时候自动加上 default 属性。
就可以这样引入了:
import fs from 'fs';
可以看到,现在 jsx 就不报错了:
![5b90d59d92e4b455cc86027e9ca9c1a3.webp](https://filescdn.proginn.com/cd7a3dea4c6170795c9898a774db70c5/5b90d59d92e4b455cc86027e9ca9c1a3.webp)
还有一个错误:
![5eb3dee3a928b87971b41e61271d69ea.webp](https://filescdn.proginn.com/1653ac77e9042fa39a6432f08b3537a2/5eb3dee3a928b87971b41e61271d69ea.webp)
没有 lodash 的类型定义。
![3c12db4c173d63048fbec9f7a524b520.webp](https://filescdn.proginn.com/af360381d18ccaba179ea4ceb0b1cd05/3c12db4c173d63048fbec9f7a524b520.webp)
写 ts 代码没提示怎么行呢?
我们也要支持下。
这里用到 @typescript/ata 这个包:
![aaba79ced276fd6274448167f7934879.webp](https://filescdn.proginn.com/8a486cba48c7f7c92a4e682ef1c8a093/aaba79ced276fd6274448167f7934879.webp)
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,
logger: console,
delegate: {
receivedFile: (code, path) => {
console.log('自动下载的包', path);
onDownloadFile(code, path);
}
},
})
return ata;
}
安装用到的包:
npm install --save @typescript/ata -f
这里就是用 ts 包去分析代码,然后自动下载用到的类型包,有个 receivedFile 的回调函数里可以拿到下载的代码和路径。
然后在 mount 的时候调用下:
![77ecd1c8faffc21b6becf72e98c1c9b2.webp](https://filescdn.proginn.com/37db3aaab35bc89f85c034de98c2d7a5/77ecd1c8faffc21b6becf72e98c1c9b2.webp)
const ata = createATA((code, path) => {
monaco.languages.typescript.typescriptDefaults.addExtraLib(code, `file://${path}`)
})
editor.onDidChangeModelContent(() => {
ata(editor.getValue());
});
ata(editor.getValue());
就是最开始获取一次类型,然后内容改变之后获取一次类型,获取类型之后用 addExtraLib 添加到 ts 里。
看下效果:
![41dab337a26bf93a5296f75b5ef1da05.webp](https://filescdn.proginn.com/e8ee6b156caa528618ade3c06f58c05c/41dab337a26bf93a5296f75b5ef1da05.webp)
![4ad82f075e1b5a568e88ed7159c5050e.webp](https://filescdn.proginn.com/ebdd01e713ac634a65c94c97c00e00e4/4ad82f075e1b5a568e88ed7159c5050e.webp)
有类型了!
写代码的时候用到的包也会动态去下载它的类型:
比如我们用到了 ahooks,就会实时下载它的类型包然后应用。
这样,ts 的开发体验就有了。
再就是现在字体有点小,明明内容不多右边却有一个滚动条:
![969f9bff3da8bc96f3b8a6d168d0bbb2.webp](https://filescdn.proginn.com/36226aef9d0cac3b30d4d7fb0820dc44/969f9bff3da8bc96f3b8a6d168d0bbb2.webp)
这些改下 options 的配置就好了:
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,
}
}
}
/>
![9bb0342d0ccf3d6e521e128b2831d8a9.webp](https://filescdn.proginn.com/009918f053ec4e639fcd4cc736f82730/9bb0342d0ccf3d6e521e128b2831d8a9.webp)
好多了。
我们还可以添加快捷键的交互:
默认 cmd(windows 下是 ctrl) + j 没有处理。
我们可以 cmd + j 的时候格式化代码。
![6af02c771354ceb22bfcdb79ba1441c2.webp](https://filescdn.proginn.com/030e329be8f2bfe0d3438dacc1430881/6af02c771354ceb22bfcdb79ba1441c2.webp)
editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyJ, () => {
editor.getAction('editor.action.formatDocument')?.run()
});
试下效果:
![3560ed61f5163a7fbe155d297bcb580e.webp](https://filescdn.proginn.com/a3618cfdbcc1927231c2cfc556baa780/3560ed61f5163a7fbe155d297bcb580e.webp)
有同学可能问,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 个:
![fd01408116f33eea591a72a77f7c4b7e.webp](https://filescdn.proginn.com/ad4e75107c2e49178fcfcbb6b0938c67/fd01408116f33eea591a72a77f7c4b7e.webp)
用到再搜就行。
这样,我们的网页版 TypeScript 编辑器就完成了。
总结
有的需求需要实现网页版编辑器,我们一般都用 monaco editor 来做。
今天我们基于 @monaco-editor/react 实现了 TypeScript 编辑器。
可以在 options 里配置滚动条、字体大小、主题等。
然后 onMount 里可以设置 compilerOptions,用 addCommand 添加快捷键等。
并且我们基于 @typescript/ata 实现了自动下载用到的 ts 类型的功能,它会扫描代码里的 import,然后自动下载类型,之后 addExtraLib 添加到 ts 里。
这样在网页里就有和 vscode 一样的 ts 编写体验了。
👇🏻 点击下方阅读原文,获取鱼皮往期编程干货。
往期推荐