window配置Electron+VSCode完整环境

已于 2024-11-25 14:38:33 修改
阅读量1.9k 收藏 3
点赞数 1
分类专栏： Electron VS 文章标签： electron vscode javascript node.js npm
于 2021-04-27 15:25:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_36651243/article/details/116201926
版权
本文介绍了如何在Windows环境下搭建Electron开发环境，包括安装NodeJS、使用cnpm替代nmp、全局安装和管理Electron版本，以及在VSCode中配置相关工具如gulp和electron-packager。此外，还提到了VSCode的下载与安装步骤。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Electron官方网站传送门

环境准备

windows环境
NodeJS环境
NodeJS下载
在这里插入图片描述
npm无法使用？
方案一. 设置代理

npm config set proxy=http://代理服务器地址:8080

如果想取消代理

npm config delete proxy

方案二 设置镜像（常用淘宝 cnpm）

npm config set registry=https://registry.npm.taobao.org

或者如下（后续可直接使用cnpm指令）

npm install cnpm -g --registry=http://registry.npm.taobao.org

如果想取消镜像

npm config delete registry

查看npm设置

npm config list

Electron环境搭建

全局安装Electron

npm install electron -g

在这里插入图片描述
全局安装指定版本号(@^版本号)

npm install electron@^12.0.5 -g

Electron版本升级(@^版本号)

npm update electron@^12.0.5 -g

Electron版本查看

卸载Electron

npm uninstall electron -g

Electron环境查看

Electron

在这里插入图片描述

vscode环境

vscode官网

直接下载安装即可。

vscode配置

安装gulp（用于VScode）

cnpm install gulp -g

在这里插入图片描述

electron-packager打包工具

npm install electron-packager -g

在这里插入图片描述

第九讲使用VSCODE调试Electron程序
星火燎猿
08-19 1851
第九讲使用VSCODE调试Electron程序介绍调试主进程调试渲染进 介绍 前面学员反馈说程序执行的时候遇到问题没办法调试，这节课程主要给大家介绍如何利用vscode来调试我们的Electron程序。前面课程我们已经介绍过，Electron程序包括主进程和渲染进程两部组成。开发过程中调试对于开发人员来说是必不可少的，今天我们就来讲一讲如何利用Vscode调试Electron程序，让你在以后的开发中遇到问题能够快速定位并解决问题！ 调试主进程 首先我们打开vscode如下图所示点击左侧虫子一样的图片
vscode+Electron环境搭建 helloword
chduguxue的专栏
10-17 4204
一个基于Chrome+Nodejs的容器，可以用纯前端的方式实现跨平台的桌面应用开发。代码由js，css，html构成，它支持把整个项目编译成exe。由于它支持Nodejs，所以可以引用dll，那么技术上涉及到跟硬件打交道的事情可以用c#，c++来开发，做成dll再有Nodejs去调用。所以我们可以把electron当作一个快速开发业务逻辑和界面逻辑的手段。底层核心可以用c++做，大大提高了开发效率。
使用VSCode调试Electron
01-08
1、点击VSCode左侧的调试按钮打开调试配置面板，然后点击“自定义运行和调试创建launch.json文件”，若出现选择下拉框，则选择“Node.js调试器”，没出现则不用管； 2、此时项目文件夹中的.vscode文件夹中就会多一个文件launch.js，修改该文件代码如下所示： { // 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。 // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387 version: 0.2.0, configu
Electron 开发桌面应用：从入门到发布跨平台应用
最新发布
数字魔方操控师的博客
05-05 958
一、引言在数字化时代，桌面应用程序依然在企业办公、创意设计、多媒体处理等领域发挥着重要作用。然而，传统桌面应用开发面临着平台差异带来的诸多挑战，如针对 Windows、macOS、Linux 等不同操作系统，需要使用不同的技术栈分别进行开发，这无疑增加了开发成本和周期。Electron 的出现为开发者带来了全新的解决方案，它基于 Web 技术，允许开发者使用 HTML、CSS 和 JavaScript 构建跨平台的桌面应用，极大地降低了开发门槛和成本，提高了开发效率。
vscode electron安装环境
allen1880的专栏
12-05 1007
vscode electron安装环境
VSCode创建 electron 项目
bigblack12321的博客
10-31 1889
VSCode创建 electron 项目vue+vite项目
vscode调试Electron+ts
qq_43478653的博客
05-14 868
调试Electron+js: https://www.electronjs.org/zh/docs/latest/tutorial/debugging-vscode。
Electron快速入门（一）：用VS Code快速创建html+js+css编写的项目
lulei5153的博客
06-20 693
Electron快速入门：用VS Code快速创建html+js+css编写的项目：创建3个文件输入3个命令完成一个初始项目
Angular+Electron+VSCode的桌面应用开发入门笔记（1）
热门推荐
yr7942793的博客
03-26 2万+
第一部分 Electron开发入门笔记 GitHub 的 Electron 框架（以前叫做 Atom Shell）允许你使用 HTML, CSS 和 JavaScript 编写跨平台的桌面应用。它是 io.js 运行时的衍生，专注于桌面应用而不是 web 服务端。 Electron 丰富的原生 API 使我们能够在页面中直接使用 JavaScript 获取原生的内容。 本文学习的主要知识来
window10 Electron+Vue 最简单的原生项目创建，从环境搭建到打包
weixin_47219632的博客
12-13 1803
window10 Electron+Vue 最简单的原生项目创建，从环境搭建到打包
vue3+typescript+electron+NodeSerialport开发环境搭建
Havoc_Z的博客
11-04 1208
由于现在网上的教程文档使用的版本还有发布时间过于久远，前端技术更新较快，所以有了这一篇开发环境搭建 目录 安装node.js 安装vue-cli 创建一个vue项目 vue项目集成electron 安装NodeSerialport的准备工作 安装node-gyp 安装python 安装C++环境 安装NodeSerialport 安装node.js node官网网址 点击进入node官网网址，下载16.13.0 LTS长期支持版本 默认一路安装 使用Wi...
Vue+ElementUI+Electron环境搭建及程序打包
qq_32863863的博客
08-29 873
2.安装完成后,新建目录”node_cache“ ”node_global“1.shift+鼠标右键打开PowerShell窗口,新建vue项目。2.在dist目录下新建main.js,package.json。5.执行npm run build, 打包项目。2.npm run dev 运行该项目。修改: package.json。1.下载并安装Node.js。3.electron 运行。执行electron .3.新建及修改环境变量。2.修改main.js。3.修改App.vue。
使用VSCode 的electron build 打包自己的项目变成安装程序到桌面
bigblack12321的博客
10-31 847
vscode打包项目到桌面
Electron的安装与使用
m0_50298323的博客
07-05 8120
Electron的安装与使用
如何正确的安装Electron，并完成vue3+electron的环境搭建
不喜欢BUG，喜欢前端的日子
08-22 4380
本文主要介绍了，如何使用 vue3+electron 的环境搭建配置，其中比较重要的就是在安装 electron 的时候碰到的下载问题如何解决和启动 electron 的时候如何把 vue 内嵌至 electron中，在运行项目的时候正确的启动项目。前人裁树,后人乘凉，希望大家在搭建的时候不会遇到任何bug，欢迎一起交流
vscode调试Electron项目
chduguxue的专栏
10-17 816
vscode中打开electron项目断点运行配置
Electron开发 - 如何在主进程Main中让node-fetch使用系统代理
王森的博客
07-03 1229
开发过程中，有些时候，要访问公司内网服务器，提供的一些服务啥的，但是问题的关键是用户使用的网络各不相同，所以就要动态地使用系统代理来访问，但是主进程默认为控制台级别的请求，不走系统网络，除非你代码中指定走系统代理，这个就有了这篇内容
electron集成桌面应用配置以及踩坑环节
weixin_42571834的博客
05-30 1506
配置： vue+electron+webpack+nodenode：在v17以下不会有额外的问题，v17以上因为修改过openSSL,需要额外配置根据电脑的配置自行选择合适的兼容命令，要么退回v17以下的版本创建一般项目通过官网教程可以简单的做一个了解;主要是看懂通 主进程和渲染进程之间的通信工作原理。
【桌面开发】Electron+vue框架+vs-code&vs-code调试环境搭建
lichong951的专栏
09-23 2482
环境准备。
VScode 库函数
03-20
<think>嗯，用户想了解VSCode使用的库函数及插件支持。首先，我需要明确VSCode本身是基于Electron框架开发的，所以核心库应该是Electron相关的。然后，VSCode的插件系统是基于扩展API的，这些API应该属于它自己的架构。另外，用户提到的引用内容里提到了PHP IntelliSense插件和修改主题的方法，可能需要详细说明插件的工作原理和如何查找相关扩展。 接下来，我需要分步骤回答。首先介绍VSCode的核心库，比如Electron、Monaco Editor、Language Server Protocol（LSP）等。然后，关于插件支持，要解释扩展API和常用插件类型，比如语言支持、调试工具、主题等。用户可能还想知道如何查找和管理插件，比如通过市场搜索或命令行安装。最后，结合用户提供的引用，具体提到PHP IntelliSense和主题修改的例子，可以引用他们的例子来说明插件配置方法。 需要注意的是，用户的问题可能涉及技术细节，比如库函数的具体名称或插件开发的相关文档。要确保信息准确，可能需要参考官方文档或可靠来源。此外，用户可能对如何自定义或开发插件感兴趣，但问题中没有明确提到，不过生成相关问题时可以包括这些方面。 还要检查是否遗漏了用户需求中的任何部分。用户引用了两个例子，一个是关于PHP插件的函数跳转，另一个是修改主题颜色，所以在回答中需要涵盖插件安装配置和主题自定义的方法。同时，用户想查找相关的库函数，可能需要说明VSCode自身的API和扩展机制。 最后，生成相关问题时要考虑用户可能的后续疑问，比如如何开发自己的插件、调试扩展或处理兼容性问题。确保问题覆盖用户可能感兴趣的各个方面，帮助他们进一步探索VSCode的功能。</think>### VSCode 使用的库函数及插件支持分析 #### 一、VSCode 核心库函数 VSCode 基于 Electron 框架开发，其核心功能依赖于以下技术栈： 1. **Electron**：使用 Chromium 渲染引擎和 Node.js 运行时实现跨平台桌面应用开发[^1] 2. **Monaco Editor**：微软开源的代码编辑器核心，支持语法高亮、智能提示等特性 3. **Language Server Protocol (LSP)**：实现代码智能感知的核心协议，支持 50+ 编程语言 4. **Debug Adapter Protocol (DAP)**：统一调试接口，支持多语言调试器集成 #### 二、插件扩展支持 VSCode 的扩展系统通过公开 API 实现功能扩展： ```typescript // 典型扩展结构示例 import * as vscode from 'vscode'; export function activate(context: vscode.ExtensionContext) { let disposable = vscode.commands.registerCommand('extension.sayHello', () => { vscode.window.showInformationMessage('Hello World!'); }); context.subscriptions.push(disposable); } ``` #### 三、常用插件类型 1. **语言支持插件**（如示例中的 PHP IntelliSense）： - 通过 `ctrl+shift+x` 打开扩展商店搜索安装[^1] - 提供代码补全、定义跳转、语法检查等功能 - 配置示例（PHP IntelliSense）： ```json "php.executablePath": "/usr/bin/php", "php.validate.enable": true ``` 2. **主题定制插件**（如用户提到的颜色修改）： - 方法1：通过 `settings.json` 临时修改： ```json "editor.tokenColorCustomizations": { "textMateRules": [{ "scope": "variable.parameter.function", "settings": { "foreground": "#dc3958" } }] }[^2] ``` - 方法2：修改主题文件实现永久定制 3. **调试工具插件**： - Python Debugger - C/C++ 扩展工具包 - Docker 集成支持 #### 四、扩展开发接口 | 接口类型 | 功能描述 | 典型应用场景 | |-------------------|------------------------------|----------------------| | `vscode.languages` | 语言特性注册 | 语法高亮/代码补全 | | `vscode.window` | 界面交互控制 | 状态栏/信息提示 | | `vscode.workspace` | 工作区管理 | 文件监控/配置读取 | | `vscode.commands` | 命令系统 | 快捷键绑定/功能触发 |
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

离歌漠

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值