目前写 React + TypeScript 项目的最佳配置方案是什么?

我大概两年前上手的 emacs,最开始是从纯原生 emacs 一步步手动配置扩展的,用来写纯 go 项目基本没遇到什么问题,用的很顺手。直到最近开始写一个 react + typescript 的前端项目,由于我有 vs code 的使用习惯,比较依赖基于 lsp 的语法补全,于是就朝着这个方向配置,结果配置到最后总是发现有些地方实现不了。

我尝试过 typescript-mode + tide + web-mode ,也尝试过从 29 版开始的 tree-sitter 模式来配置,最后总是遇到 .ts.tsx 文件只有其中一个能正常工作,要么语法高亮不起作用,要么自动补全失效了。

不得已之下,放弃折腾了,直接切换到 Doom Emacs ,配置起来确实方便多了,而且我发现 doom 里面有一个自制的 typescript-tsx-mode,几乎是完美了解决了我之前遇到的问题,从此我终于可以愉快的写前端项目了。

然后新问题又来了,用了一段时间之后,发现在写 .tsx 文件代码的时候,电脑风扇高速转动,嗡嗡作响, CPU 占用极高,当然也不是一直这样,一般都是在语法略微复杂的时候,似乎解析就比较吃力的样子。后来我就照着 lsp-mode 的官方性能优化文档做了一些调整,再后来又配置了 emacs-lsp-booster ,把补全 UI 从 company-mode 切换到 corfu,整体性能确实提升了一大截。

以上这些折腾完了,坚持了一段时间,偶尔还是会有遇到 CPU 占用高的问题,貌似一般 tsx 代码超过 500 行,就吃不消了。我用内置的 profiler 看了下,貌似是因为 web-mode 的自动扫描比较吃资源,但是还没找到很好的解决办法。

顺便说一下,我还给项目配置了 eslint、prettier、lsp-tailwindcss 这些,这几个一般来说对性能影响不算大,格式化操作我都是配置在保存的时候执行,tailwindcss 的 lsp 补全有大概一两秒的延迟,不过影响不大,属于能用。

那么请问大家有什么更好的 typescript + tsx 配置方案呢,是否能解决性能问题?

补充:

打开 htop 的同时输入代码,看了下 CPU 占用,主要是 lsp/.../eslintServer.jslsp/.../tsserver.js 这两个 node 模块的资源消耗比较高。

1 个赞

我用 lsp-mode + tsx-ts-mode ,目前只有在类型表达式输入到一半的时候,由于解析不完整导致 lsp 返回了超多候选项,会卡住 Emacs ,其它时候都还好。具体表现是, company 弹出来以后,每输入一个字符都要等很久。(狂按 C-g 取消) 调高 company-idle-delay 解决不了我这个问题,还在找解决方案。

之前遇到的另一个问题是,重启 lsp-server 之后, lsp-doc 要等很久才出现,读了一圈 typescript language server performance 相关的问档以后,为每个 function 都手动补上返回类型,有大幅度改善。

等 TypeScript 7 吧

我也蛮期待 TypeScript 7,不过还不确定 7 能解决的问题跟现在 emacs 上的性能问题是不是一回事

感觉还是vscode更好一点。。。

如果不讨厌 python ,可以试试 lsp-bridge 。

1 个赞

已经习惯了 emacs 的快捷键和操作逻辑,比如 kill ring 和 scratch 这些东西,我尝试过回到 vscode ,结果各种不适应,还得重新把 emacs 的按键绑定转移到 vscode 里面,又是另一番折腾了,只能说鱼和熊掌不可兼得。

等有空了试试,不知道有没有正在用的人说说使用体验

优点: 把工作量外包出去了,性能好很多

缺点: python 和 elisp 结合,没那么好修改定制,除 linux 外细节没那么好

PS:我在 macOS 上用

我日常用lsp-bridge写vue,支持eslint和tailwindcss混合。

前端只有lsp-bridge可以达到性能。

1 个赞

lsp-bridge + typescript-ts-mode, 至于其他的 company, corfu都废弃了

有 dotfile 分享下配置吗

lsp bridge 性能确实好,但是看着隔壁 lsp ui 有比较羡慕LSP UI

80%的功能都有

我是已经绑过了。。。。改了一堆,包括idea也是