electron typescript运行并设置eslint检测

一、初始化package.json

二、安装依赖

三、项目结构

四、配置启动项

五、补充：ts转js别名问题

已整理好的开源代码：Type-Electron: 用typescript开发的electron项目脚手架，轻量级、支持一键配置网页转PC - Gitee.com

一、初始化package.json

我的：这里的"main"没太大影响，看后面的步骤。

javascript">{"name": "xloda-cloud-ui-pc","author": "Dragon Wu","description": "XLODA龙达云PC前端","version": "0.1.0","private": true,"main": "src/main.ts","scripts": {"start": "tsc && tsc-alias && electron ./.electron/main.js","lint": "eslint ./src"},"devDependencies": {"@eslint/js": "^9.19.0","@types/node": "^22.12.0","electron": "^33.3.1","eslint": "^9.19.0","globals": "^15.14.0","tsc-alias": "^1.8.10","typescript": "^5.7.3","typescript-eslint": "^8.22.0"},"dependencies": {}
}

二、安装依赖

1、安装electron

javascript">yarn add electron -D

2、安装typescript依赖

javascript">yarn add @types/node typescript -D

3、安装eslint

javascript">yarn create @eslint/config

官方文档：ESLint 入门 - ESLint - 可插拔 JavaScript Linter

三、项目结构

electron使用typescript运行的宗旨就是让electron运行main.ts通过typescript转编译后的js文件，因为electron只能直接运行js文件：

main.ts:

javascript">/*** @author Dragon Wu* @since 2025/1/12 20:18*/
import {app, BrowserWindow} from "electron";// 禁用启动的警告
process.env["ELECTRON_DISABLE_SECURITY_WARNINGS"] = "true";// 内嵌app的链接
const APP_URL = "http://localhost:3000";app.on("ready", () => {const mainWindow = new BrowserWindow({width: 1200,height: 800})mainWindow.loadURL(APP_URL).then()
});

四、配置启动项

使用main.js作为入口文件时，我们只要找到main.js路径配置到package.json的“main”位置就行了，但直接改.ts肯定会报错，所以我们需要让electron找到main.ts编译后转的.js文件的位置。

这里我们需要修改tsconfig.json如下：

javascript">{"compilerOptions": {"module": "commonjs","target": "es2018","noImplicitAny": true,"sourceMap": true,"outDir": "./.electron",  # ts 编译转为 js 后的目录位置"baseUrl": ".","paths": {"@/*": ["./src/*"]}},"include": ["**/*.ts","**/*.tsx"],"exclude": ["node_modules"]
}

终端运行：你会看到项目的ts文件被转为js文件存到了“outDir”指向的文件夹里（这里是".electron"）

javascript">tsc

由此，可以在启动项做文章：

javascript">  "scripts": {"start": "tsc && electron ./.electron/main.js",},

终端运行：可以看到electron程序正常启动了。

javascript">yarn run start

五、配置eslint

安装官网的配置方法，项目根目录会产生一个eslint.config.mjs文件，这个文件可以配置自定义rules，案例如下：

javascript">import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";/** @type {import('eslint').Linter.Config[]} */
export default [{files: ["**/*.{js,mjs,cjs,ts}"]},{languageOptions: {globals: globals.node}},pluginJs.configs.recommended,...tseslint.configs.recommended,{rules: {"import/first": "off","import/order": "off",}}
];

配置运行脚本：

javascript"> "scripts": {"lint": "eslint ./src"},

这里elint会检测 ./src下的ts文件的书写规范，若你有更多文件夹需要检测可以按照这种格式来:

javascript">eslint ./src ./example ./xxx

终端运行：

javascript">yarn run lint

即可进行eslint纠正检测。

亲测有效！

五、补充：ts转js别名问题

如ts文件里的文件路径：

import setApplicationMenu from "@/app/menu";

默认转编译后的js文件里的路径是：

const menu_1 = require("@/app/menu");

由于js不支持@来定位文件，所以使用“@/"来指定路径时会报错，解决方案如下：

安装路径转译模块：

yarn add tsc-alias -D

修改启动项的

tsc

为：

tsc && tsc-alias

最终启动项配置：

 "start": "tsc && tsc-alias && electron ./.electron/main.js"

执行：

yarn run start

别名路径被解析，启动成功！~