electron typescript运行并设置eslint检测

目录

一、初始化package.json

二、安装依赖

三、项目结构

四、配置启动项

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

一、初始化package.json

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

{
  "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

yarn add electron -D

2、安装typescript依赖

yarn add @types/node typescript -D

3、安装eslint

yarn create @eslint/config

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

三、项目结构

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

main.ts:

/**
 * @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如下：

{
  "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"）

tsc

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

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

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

yarn run start

五、配置eslint

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

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",
        }
    }
];

配置运行脚本：

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

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

eslint ./src ./example ./xxx

终端运行：

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 

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