Electron结合React开发中electron.remote引入fs模块无智能提示的解决方案咨询

我之前也碰到过这个烦人的小问题！核心原因就是编辑器没办法自动识别window.require('electron').remote.require('fs')返回值的类型，默认当成了any类型，所以才丢失了智能提示。下面给你几个简单可行的解决办法：

方案1：用类型断言/JSDoc直接指定类型 #

如果你用的是TypeScript，或者在JavaScript里支持JSDoc注释，直接给获取到的fs模块指定fs模块的类型就行：

TypeScript写法 #

// 先导入fs的类型
import type { Fs, promises as FsPromises } from 'fs';

// 通过类型断言让编辑器识别类型
const electronFs = window.require('electron').remote.require('fs') as Fs;
// Promise版本同样适用
const electronFsPromises = window.require('electron').remote.require('fs').promises as FsPromises;

JavaScript+JSDoc写法 #

/** @type {import('fs').Fs} */
const electronFs = window.require('electron').remote.require('fs');

// Promise版本
/** @type {import('fs').promises} */
const electronFsPromises = window.require('electron').remote.require('fs').promises;

写完之后，编辑器就能立刻识别到electronFs的所有方法和参数，自动补全功能就回来了。

方案2：封装成单独模块统一导出 #

如果不想在每个使用的地方都加类型注释，可以把remote获取fs的逻辑封装到一个单独文件里，一次指定类型，到处复用：

比如创建一个electron-fs.js文件：

/** @type {import('fs').Fs} */
const fs = window.require('electron').remote.require('fs');
export default fs;

// 按需导出Promise版本
/** @type {import('fs').promises} */
export const fsPromises = window.require('electron').remote.require('fs').promises;

然后在其他组件/文件里直接导入：

import fs, { fsPromises } from './electron-fs';

// 这里直接就能用智能提示了
fs.readFile('./test.txt', (err, data) => {
  // ...
});

额外注意：Electron版本兼容 #

顺便提一句，Electron 14及以上版本默认禁用了remote模块，如果你用的是高版本，需要在主进程的BrowserWindow配置里手动启用：

// 主进程代码
const mainWindow = new BrowserWindow({
  // ...其他配置
  webPreferences: {
    enableRemoteModule: true,
    contextIsolation: false // 若开启了contextIsolation，需额外配置预加载脚本，这里不再展开
  }
});

内容的提问来源于stack exchange，提问作者SkyNess