本文已参与「新人创作礼」活动，一起开启掘金创作之路

初识

hello，在这里大家可以称我为小莫同学，本人今年 20，主要工作是一名前端开发攻城🦁，现在也是在杭州工作，现在算起来大概一年零二个月，技术也是从一开始工作处处都觉得难，到现在能够适应各种需求开发，当然也认识了很多的同事，他们无论带我关于技术亦或者为人处事方面，我都有了进一步提升，因为公司我是最小的，大家都比我大四五岁，所以对我是相当不错。废话不多说，我们直接步入正题

为什么写 vsCode 主题插件😃

因为有用过原生 vsCode 主题插件，也使用过One Dark Pro，整体来说都不错，但是自己还是有点不中意，后来决定去搞一个自己的，想法已有，立刻行动

第一步：安装所需环境👇

安装Yeoman 和 VS Code Extension generator

yarn add -g yo generator -code

创建项目

接下里就是创建我们自己的项目，执行命令

yo code

我们用上下键选择 New Color Theme

选中以后会出现以下提示，我这里简单说一下

第一个说的是从头开始新建一个新主题还是还是导入一个主题在它上面修改(这里如果自己有制作过主题的同学那么可以去选择导入，由于这篇文章说的是开发教程，所以我们选择第一个)

接下来再看他说的提示

第一个输入自己的扩展名字
第二个是问你扩展的标识是什么
第三个是做一些描述
第四个就是向用户显示的主题的名称是什么(这里一四可以填一样的，然后三可以选填，因为生成后的项目里面也可以修改配置)
还会让你选择默认生成主题颜色(这里选择的是 dark)

成功后会出现以下目录

开发主题🤡

这里我们需要配置的是 themes目录下的 yn-theme-color-theme.json文件

这里每一个配置项都是对应vscode编辑器的scope,比如说Comment是你注释的颜色，大家如果第一次不认识这些都是干嘛的，那么可以直接粗暴一点，直接改成红色，或者蓝色，这些显而易见的颜色我们都可以看到效果，当然这是不推荐的，我们可以通过翻译去看他的字面意义就可以知道他大概配置对应的是哪里

Tip:具体颜色大家可以通过一些配色的网站去找心意的颜色，也可以发挥自己的脑洞去设计

接下来讲一下settings里的字段

fontstyle 来控我们字体的设置
foreground 是来控制我们的某个配置的颜色

这里是我的package.json文件具体字段都有对应的注释

{
  "name": "yn-theme", // 插件名称
  "displayName": "yn-theme",
  "description": "Welcome to the Matthew theme plugin.",
  "publisher": "braveMan", // 发布人名称
  "version": "0.0.5", // 当前插件版本
  "icon": "theme-logo.png", // 插件 logo
  "engines": {
    "vscode": "^1.66.0" // 当前 node 版本
  },
  "categories": [
    "Themes"
  ],
  // 一些命令操作配置
  "scripts": {
    "install vsce": "npm install vsce -g --save vsce",
    "build": "vsce package",
    "publish": "vsce publish"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/yn22638/theme-plug-in"
  },
  // vscode 大部分插件配置都在这里
  "contributes": {
    "themes": [
      {
        "label": "curry-theme",
        "uiTheme": "vs-dark",
        "path": "./themes/curry-color-theme.json"
      }
    ]
  }
}

预览👀

我们可以直接按F5去在线预览效果，每当你改动一次，他都会及时更新你修改后的效果

这是默认主题的预览效果

针对于这些项目搭建与配置相对来说还是比较简单，难的可能就是里面配置项大家不明白的，还是需要多试试，多练习，慢慢就都掌握了

本地打包与安装

我们开发完后，需要打包或发布，这时候我们需要使用一个工具vsce，我们先来安装它

yarn i -g vsce

本地进行打包

vsce package

Tip: package.json中必须要配置发布人publisher,否则打包会出错

打包成功以后我们会发现本地会出现一个已vsix的文件，这个就是我们需要去发布提供的文件

也可以通过vscode插件右上角···选择冲vsix安装，但是这个只有自己有效果，这个在插件商店是搜不到的

发布线上

注册发布人账号与 token 配置 ✊

我们需要去注册一个publisher账号

创建microsoft账号在这里创建，我之前创建过，直接登录了
访问这个路径去创建一个组织

AzureDevOps
接下来创建属于我们自己的令牌

点击右上角用户icon，选择Personal access tokens的选项
点击创建，我们记得把token复制出来，自己存一下，因为这个关闭以后就看不到了

注册发布人🙎‍♂️

我们可以通过本地命令行的形式去创建vsce create-publisher braveman

但是现在这个命令被删除了，之前是可以通过这个命令区创建发布人的
我们直接去网页注册

create-publisher

跟着填就好了

Tip:这里要慎重去注册，因为现在注册了发布人暂时不支持删除😑

去本地发布/线上发布🥳

本地发布

执行下面命令
```
vsce publish
```

输入你生成的token秘钥

线上发布

去网站直接上传我们vsix文件

上传成功及发布成功

Tip:发布成功以后，过一段时间vscode拓展里面就能找到了，也可以在vscode插件扩展仓库里搜索到

小结 🌝

好了，到这里，这次 vsCode 主题插件 开发教程到这里就结束了，大家如果对这方面感兴趣的话，文档看不懂或有遇到问题的，提议随时联系我，关于上面教程还是蛮详细的，跟着做一定会做出一个属于自己的主题插件

一起加油吧👨‍💻

如果您已经看到这里了，可以加我的个人 vx 一起探讨技术上问题哦~

我自己工作空闲/业余时间也会帮着朋友做一些自己的组件库，大家感兴趣的话可以去看看Fighting Design觉得哪些地方不足或者想参与进来，大家可以联系我，到时候可以直接拉进社区群

如果觉得本文对您有帮助，请帮忙在 github 上点亮 star 鼓励一下吧！进入也可以看到源码哦~

这是在掘金写的第一篇文章，希望大家多提意见与想法 祝大家早安午安晚安

告辞💨

vsCode 主题插件教程(详细版) -《掘金的第一篇文档》

初识