关于vscodeelectron的信息

by intanet.cn ca 开发工具 on 2024-03-18

本篇文章给大家谈谈vscodeelectron，以及对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

visual studio code主要用来写什么语言

Visual

Studio

Code

基于

Electron

开发。Electron

是一个基于

Chromium

的项目，可用于开发基于

Node.js

的本地应用程序。

也就是：你开发一个项歼判晌目，用electron，开发出来的东西，是可以跨氏锋平台的。

原理：electron嵌入了谷歌的内核，你写的页面代码，外边包装上一个应用的边框，就像一个冲笑桌面应用了。

electron怎么去判断用户是否多开客户端

如果你是想阻止多开的话下面这个链接有答案：

通过app.makeSingleInstance(callback)方法可以保证应用陆樱滚在同一时刻最多只有一个实颂胡例，链接里的文章讲的很清楚了，我就不赘早余述了

[img]

如何打造一款属于自己的 Visual Studio Code 颜色主题

Visual Studio Code 是我在最近一年中最喜欢竖拆的一款编辑器，微软每一次的更新都会给大家带来惊喜，更是令人愈加喜欢。之前一直使用内置的颜色主题 Light+ 和 Dark+ ，但近来突然觉得前者颜色区分度不高，一眼看上去就密密麻麻的一对代码，渣猛而后者则是被选中的文本背景色太浅，跟编辑器的背景颜色很相似，很难区分出来，于是萌生了要制作一款自己的颜色主题的想法。经过几天的研究，终于捣鼓出来了 Lei Theme 系列颜色主题。

先来看看其中两款主题的效果：

一般如纤桥来说，我们并不需要重头来制作一款颜色主题，首先需要选择一款自己最喜欢的颜色主题（或者说先找一款与自己的想法最相似的颜色主题），然后在此基础上进行些许调整即可。另外如果想将颜色主题发布到微软的 Visual Studio Code 扩展商店上，还需要注册一个微软开发者账号，并通过 vsce 工具来发布出去，下文会对此进行详细说明。

tmTheme 格式的颜色主题

TextMate 曾是多年前最流行的代码编辑器之一，其颜色主题的文件后缀为 .tmTheme ，在本文中我们将其简称为 tmTheme 格式。Visual Studio Studio 的颜色主题采用的是标准的 TextMate 主题格式，我们可以参考这篇文章 Writing a TextMate Grammar: Some Lessons Learned ，大概可以理解为这样： 编辑器对代码进行解析后，会为每个元素指定一个 scope ，这个 scope 即表明此元素是一个关键字还是一个常量，又或者是一个标点符号，通过 tmTheme 格式的文件来定义相应 scope 的文字样式。

根据该文章可知道以下是常见的 scope 列表：

comment

constant

constant.character.escape

constant.language

constant.numeric

declaration.section entity.name.section

declaration.tag

deco.folding

entity.name.function

entity.name.tag

entity.name.type

entity.other.attribute-name

entity.other.inherited-class

invalid

invalid.deprecated.trailing-whitespace

keyword

keyword.control.import

keyword.operator.js

markup.heading

markup.list

markup.quote

meta.embedded

meta.preprocessor

meta.section entity.name.section

meta.tag

storage

storage.type.method

string

string source

string.unquoted

support.class

support.constant

support.function

support.type

support.variable

text source

variable

variable.language

variable.other

variable.parameter

以下是一个 tmTheme 格式文件的代码片段：

dict

keyname/key

stringKeyword/string

keyscope/key

stringkeyword.control,keyword.other,variable.language,storage.type,storage.modifier,keyword.function/string

keysettings/key

dict

keyforeground/key

string#0808D1/string

/dict

/dict

dict

keyname/key

stringInvalid/string

keyscope/key

stringinvalid/string

keysettings/key

dict

keyforeground/key

string#cd3131/string

/dict

/dict

从上面的代码可以看出，其实这个 tmTheme 格式的文件似乎也挺简单的，然而初学者而言，难的是 不知道 scope 怎么写 ，下文会循序渐进地对此进行说明。

创建颜色主题项目

根据官方文档，我们先执行以下命令安装 Yeoman 代码生成工具来创建一个默认的颜色主题项目：

$ npm install -g yo generator-code

安装完毕之后，进入 ~/.vscode/extensions 目录执行以下命令启动生成器：

$ yo code

说明： ~/.vscode/extensions 表示用户根目录下的 .vscode/extensions 目录，之所以在此处新建项目主要是为了不用发布到扩展商店也可以在本地进行使用，并且方便调试。

选择 New Color Theme 创建颜色主题项目：

_-----_ ╭——————————————————————————╮

| | │ Welcome to the Visual │

|--(o)--| │ Studio Code Extension │

`---------´ │ generator! │

( _´U`_ ) ╰——————————————————————————╯

/___A___\ /

| ~ |

__'.___.'__

´ ` |° ´ Y `

? What type of extension do you want to create?

New Extension (TypeScript)

New Extension (JavaScript)

❯ New Color Theme

New Language Support

New Code Snippets

接着需要在命令行下交互式地填写一些问题，以下是我在执行过程中填写的内容：

? What type of extension do you want to create? New Color Theme

URL (http, https) or file name of the tmTheme file, e.g., .

? URL or file name:

? What's the name of your extension? my-theme

? What's the identifier of your extension? my-theme

? What's the description of your extension?

? What's your publisher name? leizongmin

? What's the name of your theme shown to the user? my-theme

? Select a base theme: Dark

需要说明的是，第一个问题 URL (http, https) or file name of the tmTheme file 需要提供一个已有的 tmTheme 文件作为基础，此处可直接复制示例中的 URL 。

稍等片刻，工具自动生成了项目之后，会提示我们执行以下命令开始编辑代该项目：

$ cd my-theme

$ code .

以下是生成的项目的文件结构：

.

├—— README.md

├—— package.json （扩展信息文件）

├—— themes

│ └—— Monokai.tmTheme （颜色主题定义文件）

└—— vsc-extension-quickstart.md （帮助文件，上面详细说明操作步骤）

首先看看 package.json 文件：

{

"name": "my-theme",

"displayName": "my-theme",

"description": "",

"version": "0.0.1",

"publisher": "leizongmin",

"engines": {

"vscode": "^1.5.0"

},

"categories": [

"Themes"

],

"contributes": {

"themes": [

{

"label": "my-theme",

"uiTheme": "vs-dark",

"path": "./themes/Monokai.tmTheme"

}

]

}

}

contributes 中定义了此扩展项目包含的内容，其中 themes 表示颜色主题，是一个数组，我们可在此处放入多个颜色主题。以下是 themes 中每个元素的定义：

label 表示颜色主题的名称，即在 Preferences: Color Theme 列表中显示的名称

uiTheme 是指编辑器 UI 的颜色，可选为 vs-light 和 vs-dark ，如果我们的颜色主题是深色系的，就选 vs-dark

path 是 tmTheme 文件的位置

为了避免混淆，我们可以将文件 ./themes/Monokai.tmTheme 改名为 ./themes/my-theme.tmTheme ，并修改 package.json 相应的位置。

现在在 Visual Studio Code 中按快捷键 ⌘Command + Shift + P 打开命令面板（Windows / Linux 系统应为 Ctrl + Shift + P ），输入 Color Theme 并按回车，再中列表中选择 my-theme 按回车即可使用刚刚创建的新颜色主题：

从上图可以看出，这其实就是一个标准的 Monokai 主题。

tmTheme 编辑器

从生成的 vsc-extension-quickstart.md 文件中我们得知有一款 Web 版的在线 tmTheme 编辑器 ，通过该编辑器可以进行可视化地编辑 tmTheme 文件。比如以下视频是更改 String 和 Keyword 颜色的示例：

你的浏览器不支持 标签.

主要的操作方法为：

在左侧 Scope Name 列表中选中一项，然后双击 FG 列上的颜色（FG 表示 foreground，即前景颜色），然后选择要更改的颜色即可，可以看到代码预览区域的颜色会实时改变

点击顶部栏的【Download】按钮即可下载编辑后的 tmTheme 文件，直接将其覆盖项目中的 ./themes/my-theme.tmTheme 文件即可

在 Visual Studio Code 中按快捷键 ⌘Command + Shift + P 打开命令面板，输入 Reload Window 并按回车即可看到修改后的颜色主题

但是，在一些实现细节上，Visual Studio Code 并不与该 tmTheme 编辑器一致，所以我们在该在线编辑器上看到的效果可能与 Visual Studio Code 上稍有不同，所以我们可能还需要直接编辑 tmTheme 文件。

如何知道 scope 是什么

下面是这款主题中，模板字符串的渲染效果：

从图中可以看到，模板字符串中的字符串和变量的颜色都是一样的，而假如我想改变模板字符串中变量的颜色，却是无从下手，因为即使翻遍 TextMate 官方文档中关于 tmTheme 的介绍也找不到模板字符串的 scope 是什么。

其实我们可以借助 Visual Studio Code 的开发者工具来找到任意元素的 scope ，以下是演示视频：

你的浏览器不支持 标签.

从开发者工具中我们可以看到模板字符串中 ${ 的样式是：

token block ts punctuation definition meta string begin function arrow new expr template expression template-expression

而模板变量 file 的样式是：

token block ts meta variable other readwrite string function arrow new expr template expression

再结合文首对于 scope 介绍的文章，我们假设我们要的 scope 名为 template.expression 。接着打开文件 ./themes/my-theme.tmTheme ，仿照该文件的格式，我们添加以下代码在对应位置：

dict

keyname/key

stringTemplate Expression/string

keyscope/key

stringtemplate.expression/string

keysettings/key

dict

keyforeground/key

string#23C4FA/string

/dict

/dict

再按快捷键 ⌘Command + Shift + P 打开命令面板，执行 Reload Window ，此时可以看到模板字符串中的变量颜色跟字符串的颜色不一样了：

tmTheme 文件处理规则

尽管已经实现了我们想要的效果，相信阅读到这里的时候很多人还是一头雾水，并不知道为何 scope 是 template.expression 。我在刚开始时虽然也猜想到是像 CSS 的类选择器一样，但还是不太确定，直到阅读到 Visual Studio Code 的源码后才得以印证。

以下是 Visual Studio Code 源码中负责处理 tmTheme 的 scope 的程序文件 src/vs/workbench/services/themes/electron-browser/stylesContributions.ts （ 点此查看完整文件 ）:

export class TokenStylesContribution {

public contributeStyles(themeId: string, themeDocument: IThemeDocument, cssRules: string[]): void {

let theme = new Theme(themeId, themeDocument);

theme.getSettings().forEach((s: IThemeSetting, index, arr) = {

// @martin TS(2.0.2) - s.scope is already a string[] so no need for all this checking.

// However will add a cast at split to keep semantic in case s.scope is wrongly typed.

let scope: string | string[] = s.scope;

let settings = s.settings;

if (scope settings) {

let rules = Array.isArray(scope) ? string[]scope : (scope as string).split(',');

let statements = this._settingsToStatements(settings);

rules.forEach(rule = {

rule = rule.trim().replace(/ /g, '.'); // until we have scope hierarchy in the editor dom: replace spaces with .

cssRules.push(`.monaco-editor.${theme.getSelector()} .token.${rule} { ${statements} }`);

});

}

});

}

private _settingsToStatements(settings: IThemeSettingStyle): string {

let statements: string[] = [];

for (let settingName in settings) {

const value = settings[settingName];

switch (settingName) {

case 'foreground':

let foreground = new Color(value);

statements.push(`color: ${foreground};`);

break;

case 'background':

// do not support background color for now, see bug 18924

//let background = new Color(value);

//statements.push(`background-color: ${background};`);

break;

case 'fontStyle':

let segments = value.split(' ');

segments.forEach(s = {

switch (s) {

case 'italic':

statements.push(`font-style: italic;`);

break;

case 'bold':

statements.push(`font-weight: bold;`);

break;

case 'underline':

statements.push(`text-decoration: underline;`);

break;

}

});

}

}

return statements.join(' ');

}

}

我们再来回顾一下上文 tmTheme 文件每一项 scope 的配置内容：

dict

keyname/key

stringTemplate Expression/string

keyscope/key

stringtemplate.expression/string

keysettings/key

dict

keyforeground/key

string;/string

/dict

/dict

其中第一项 name 表示的是我们给该规则起的名称； scope 则是适用的 scope ，如果多个可以用逗号分隔，比如 User-defined constant 的 scope 值就为 constant.character, constant.other ； settings 则是具体的样式信息，比如颜色值。

从源码中可以看出，支持的样式只有 foreground 和 fontStyle ，而 background 则从注释中可以看出由于某原因导致 Visual Studio Code 暂时不支持。

scope 值为 template.expression 则可被认为是 CSS 类选择器 token.template.expression ，在前文的 Developer Tools 的演示视频中，模板字符串的变量名在渲染时其 HTML 为 span class="token block ts meta variable other readwrite string function arrow new expr template expression".../span ，如果我们熟悉 CSS 的话应该能一眼就看出来 .token.template.expression 是会匹配到该标签的。所以，我们可以简单地把 scope 当作是 CSS 的类选择器。

需要注意的是，如果我们在定义 scope 时写得不够详细，可能会错误地匹配到其他元素，致使调好了一部分，另一部分却被调坏了，所以要做得完美也并非易事。

发布到扩展商店

要将扩展发布到扩展商店以便让更多人可以使用到，我们需要借助 vsce 命令行工具，可以参考文档 vsce - Publishing Tool Reference 。以下是其基本步骤：

安装 vsce 命令行工具。执行命令 npm install -g vsce

注册 Visual Studio Team Services 账号，并获取到 Access Token

创建 Publisher。执行命令 vsce create-publisher

登录到 Publisher。执行命令 vsce login

发布扩展。执行命令 vsce publish

详细操作步骤建议参考相应的官方文档。

本文并没有详细到手把手教地去讲解如何打造一款 Visual Studio Code 颜色主题，仅仅是提到了几个我在折腾过程中认为比较关键，而又很难通过文档去查到的要点。爱折腾是程序员的天性，希望本文能让爱折腾的你少走一些弯路，把喜爱的 Visual Studio Code 玩出花来。

electron和vue的关系

在electron-vue的配置中，主进程就是v8引擎，可以看成是一个浏览器； 渲染进程就是网页。可以在主进程中，导入url指向的html，可以认为是一个自定义的浏览器在加载网页。

（2）但是在渲染进程中的html页面中，是node环境，不再是html环境。这意味着，会拥有打开本地文件，访问数据库，没有跨域限制的网路访问等。

文章知识点与官方知识档案匹配

Vue入门技能树首页概览

25500 人正在系统学习中

点击阅读全文

打开CSDN APP，看更多技术内容

Electron+Vue开发环境的搭建教程2(直接使用electron-vue创建项目)

1,初始化项目 (1)首先执行如下命令使用 electron-vue 模版创建一个集成了 Vue 以及 Electron 的工程项目,项目名我这里叫做 vue_electron_demo 1 vue init simulatedgreg/electron-vue vue_electron_demo (2)在这期间会提示我们输入或选...

继续访问

vue3+electron开发桌面软件入门与实战(2)——宏明创建electron+vue3框架...

前面的文章讲解的知识点涵盖:electron项目创建,vue3+vite项目创建,vue+electron项目简单集成,我们也在前面明言,这种集成方案是很原始的,只能做最简单的项目,或者自己做个玩具,真正项目中并不建议。

继续访问

electron-vue-vite:Electron、vue3、vite2、ant-design-vue2 整合

electron-vue-vite Electron + vue3 + vite2 + ant-design-vue2 整合 :bug: 已知问题 项目打包后仍有问题 待解决... 暂时通过集成 webpack 解决打包问题 How and Why 写这个 Demo 项目主要有两个目的 vue@3.x 发布了，想试试新功能 工作中用的 umi+electron 项目大了，启动速度并不理想； 用 vite 试试，算一个储备方案 ^_^ Command npm run dev npm run build 如果只需要最基础的集成 Demo 请使用 或 分支 Note 踩坑记 import { write } from 'fs' 的这种形式会被 vite 编译成 /@modules/fs?import const { write } = require('fs') 这种形式就能用了 :winking_face: const {

Electron: 主进程开启子线程 cluster.fork

1.background.js const cluster = require('child_process'); var son_course = cluster.fork(process.env.NODE_ENV == "development" ? "./src/renderer.js"晌卜 : "./resources/renderer.js") //向子线程发生消息 son_course.send("我是你粑粑~~~") //接收子线程的消息 son_course.on('message',..

继续访问

electron-vue 项目创建及常见问题_--·的博客

electron-vue项目创建,此文章建立在已有electron环境的基础上 0 electron环境搭建 正常情况: npminstallelectron -g 1 有时,因为网络等原因,此步骤会执行报错 那么改用cnpm的方式安装 首先安装cnpm: ...

继续访问

Electron: 渲染进程开启子线程 Worker_一个头发贼多的小火鸡的博客-CS...

Electron: 渲染进程开启子线程 Worker 在Vue中需要使用例外的线程去执行轮询的任务,这里以获取网卡信息为例。 注:这里是在Electron中使用的,可以使用Node.js实例 “child_process”,如果是纯Vue工程无法使用Node实例。

继续访问

electron-vue-next:将vue-next与电子结合使用的入宴绝穗门模板

概述 该存储库包含用于将vue-next与最新电子一起使用的入门模板。 我开始通过伟大的计划学习电子和 。 这个项目也从中得到启发。 您可以在查看文档。 同样，我们也有。 特征 电子11 遵循电子指南，使渲染器仅在浏览器环境中处理 使用进行构建 授权及其生态系统 使用意味着开发渲染器过程可以非常快！ 将与强类型状态，获取器和提交一起使用 使用 默认情况下将与Javascript Standard结合使用 内置TypeScript支持在使用 （与vite对齐）来构建主流程打字稿代码 带有Github Release的Github Action是开箱即用的 如果遵循，则package.json中的自动凹凸版本并生成CHANGELOG.md 在“发布过程”部分中详细说明这项工作 很好地集成VSCode 支持通过vscode调试器在main / renderer进程中调试.ts /

Electron启动和基础应用

基础信息 界面启动 界面启动 : mainWindow.LoadFile 启动页面的渲染进 读取页面布局和演示 主进程可以打开无数个子进程 IPC在主进程执行任务并获取信息 //启用所有node下的资源为可用状态 webPreferences:{nodeIntegration:true} accelerator 快捷键 //开启调试 Window.WebContents.OpenDevTools(); var {Shell} = require('electron'); //在浏览器中打开URL

继续访问

2022年最新Vue+electron项目创建_vue electron_GIS_宇宙的博客-CSDN博 ...

1.点击创建项目 2.命名项目、选择你的包管理工具 3.选择手动配置 4.勾选你需要的东西,这里我多选了路由和vuex 5.最后就是选择你的vue版本和下面那个我随便选的 6.添加electron插件 创建完项目后,进入项目然后再插件管理中选择添加插...

继续访问

electron+vue项目简单创建

当具有electron和vue的基础知识后，可以创建基于vue的electron项目 electron-vue 充分利用 vue-cli 作为脚手架工具，加上拥有 vue-loader 的 webpack、electron-packager 或是 electron-builder，以及一些最常用的插件，如vue-router、vuex 等等。 在项目里已完成vue-cli脚手架的环境后： 1. 新...

继续访问



最新发布 vue3+electron开发桌面软件入门与实战（1）——创建electron+vue3主体项目

因为vue项目的默认入口文件是index.html，eletron项目的默认入口文件是main.js，所以这里我们就要解决两个框架搭配时，以哪个文件为入口。这个问题的答案可能很简单，但是其实体现的是vue和electron的关系。如果你仔细阅读electron官网并思考过，应该已经理解electron项目运行时，相当于是一个壳，壳里面集成了nodejs、v8引擎等必须的环境。

继续访问



热门推荐 Electron+vue的使用

electron+vue的结合使用。 1.Electron是什么？？ Electron相当于一个浏览器的外壳，可以把网页程序嵌入到壳里面，可以运行在桌面上的一个程序，通俗来说就是软件，比如像QQ、优酷、网易音乐等等。可以构建跨平台桌面程序，本身支持node.js，可以使用node.js的一些模块。 Electron官网： 2.Electron+vue的联合使用 1、 有vue基础跟nodejs基础的开发人员使用electron那就更顺风顺水了，没有node基

继续访问



Electron笔记三：调用外部程序（子进程管理）

1.安装child_process npm installchild_process --save 2.功能实现 main.js中添加 //打开一个子进程 constmyChildProccess=require('child_process'); myChildProccess.spawn('C:\\ProgramFiles\\Notepad++\\notepad++.exe'); npm start 运行看结果,发现notepad++.exe已经被运行起来了 3....

继续访问



Electron学习-主进程与渲染进程（2021.1.251.28）

注意： 真的从0开始，只有一点C/C++基础，所以js这方面完全是真·零基础，完全亦步亦趋跟着老师走的。看的是b站上“技术胖”老师的视频，学成必谢555(老师的网站是jspang.com,视频、文章都是免费的，太良心了555) 之前的学习记录都在电脑里，之后有空慢慢传上来 学的是electron，用的是vs code 写这个的主要目的是怕自己之后忘了，方便捡起来 --学习内容： 1.Electron的运行流程 读取package.json中的入口文件 "main": "index.js",

继续访问

Electron子进程开启Koa微服务(Koa + Sqlite3)

Electron 配合 Koa 实现带有本地微服务的桌面应用。Sqlite3数据库负责持久化数据。本文是实践过程中的经历和问题总结。

继续访问



electron-vue 开发(三)——点击提交按钮创建子窗口

electron-vue 开发(三)——创建窗口 创建窗口

继续访问



electron-v8.2.1-win32-x64.zip 下载失败（npm install electron 安装失败）

npm 安装 electron 依赖时下载失败（或下载缓慢）的解决方案 electron-v8.2.1-win32-x64.zip 下载失败 淘宝npm镜像： 以官网demo举例 克隆项目 git clone 进入仓库 c...

继续访问



electron中使用node的子进程创建本地的web server

刚开始，是要在别的框架中使用node，创建本地服务器 首先要有个server.js const http = require('http'); //const hostname = '127.0.0.1'; //可以不写，或者写localhost const port = 7888; // 通过 createServer 创建 web服务器 const server = http.creat...

继续访问

【Electron+Vue】【一】开发跨平台桌面应用了解+构建

目录 基础综合介绍： 环境搭建： 安装Electron Electron应用程序分成三个基础模块：主进程、进程间通信和渲染进程。 【主进程】 【渲染进程】 【主进程与渲染进程通信】 src目录结构 main目录 渲染进程 qq音乐播放器 网易云音乐 其他基于 ELECTRON-VUE 的作品 基础综合介绍： 虽然B/S是目前开发的主流，但是C/S仍然有很大的市场需求。受限于浏览器的沙盒限制，网页应用无法满足某些场景下的使用需求，而桌面应用可以读写本地文件、调用更多系统资源，..

继续访问



Vue框架开发Electron7 - 主进程和渲染进程通讯

第一种通信方法： 在vue框架中要有主进程和渲染进程，每个进程都有个we

electron开发的应用有哪些

Slack 用 Electron 开哪蔽发并缓桐了 Slack。

GitHub 用 Electron 开发了 Atom。

微软绝坦用 Electron 开发了 Visual Studio Code。

Discord 用 Electron 开发了 Discord。

关于vscodeelectron和的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。

vue动画库（vue3 动画） 保健品分类（保健品分类目录）
相关阅读
最近发表
文章归档
标签列表