electron typescript运行并设置eslint检测

目录

一、初始化package.json

二、安装依赖

1、安装electron

2、安装typescript依赖

3、安装eslint

三、项目结构

四、配置启动项


一、初始化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 && 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",
    "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纠正检测。

亲测有效!

相关推荐
祝余呀7 分钟前
html初学者第一天
前端·html
脑袋大大的1 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络2 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘3 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way3 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家3 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689974 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽5 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头5 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github