项目代码风格统一 —— Visual Studio Code 发布扩展插件

以和为贵_大杀四方
382 阅读5分钟

前言

在项目代码风格统一 —— Visual Studio Code 创建代码片段中我们已经创建了代码片段，但是这仅仅只在自己的VSCode 中生效，如何使项目组其他成员也同样遵从该规范，并在项目中提高开发效率。

要确保项目组的其他成员也遵循相同的代码风格规范，并在项目中提高开发效率，可以通过以下步骤使用 Visual Studio Code (VSCode) 的扩展能力来实现：

  1. 创建共享代码片段：首先，确保你已经创建了一套代码片段，这些片段应该符合你们团队的代码风格规范。
  2. 打包代码片段：将这些代码片段打包成一个 VSCode 扩展。你可以创建一个新的 VSCode 扩展项目，并将你的代码片段作为扩展的一部分。
  3. 开发扩展：在 VSCode 扩展中，你可以定义一个 package.json 文件，其中包含你的代码片段。这个文件定义了扩展的元数据，如名称、版本、作者等，以及代码片段的具体内容。
  4. 发布扩展：将你的扩展发布到 VSCode 的扩展市场。这样，其他团队成员就可以通过 VSCode 的扩展市场搜索并安装你的扩展。
  5. 安装扩展：通知团队成员通过 VSCode 的扩展市场搜索你的扩展名称，并进行安装。一旦安装，他们就可以在他们的 VSCode 环境中使用你定义的代码片段。
  6. 维护和更新：随着项目的发展，你可能需要更新代码片段。你可以更新你的扩展，并发布新版本，团队成员可以更新他们的扩展以获得最新的代码片段。

使用 VSCode 扩展的好处包括：

  • 一致性：确保所有团队成员都使用相同的代码风格和最佳实践。
  • 效率：通过减少重复代码和提高编码速度来提高开发效率。
  • 可维护性：统一的代码风格使得代码更易于阅读和维护。
  • 可扩展性：随着项目的发展，可以轻松添加或更新代码片段。
  • 易于共享：通过 VSCode 扩展市场，可以轻松地在团队或更广泛的社区中共享代码片段。

一、 前置工作

1. VSCode安装

首先要确保自己电脑上安装着VSCode软件，下载地址：code.visualstudio.com/ 建议安装最新版本

image.png

2. Node.js 和 Git安装

建议安装最新版本，目前我使用的node版本是V22.7.0

二、开始使用

参考官网your-first-extension

1. 初始化项目

npm install --global yo generator-code
yo code

# ? What type of extension do you want to create? New Extension (TypeScript)
# ? What's the name of your extension? HelloWorld
### Press <Enter> to choose default for all options below ###

# ? What's the identifier of your extension? helloworld
# ? What's the description of your extension? LEAVE BLANK
# ? Initialize a git repository? Yes
# ? Bundle the source code with webpack? No
# ? Which package manager to use? npm

# ? Do you want to open the new folder with Visual Studio Code? Open with `code`

2. 运行

2.1 命令 code ./HelloWorld

遇到的问题:zsh: command not found: code

  1. 配置文件中配置环境变量
    • 打开配置文件open -e ~/.zshrc
    • 在文件的末尾添加以下行 export PATH="$PATH:/Applications/Visual\ Studio\ Code.app/Contents/Resources/app/bin"
    • 保存并关闭文件，然后在终端中运行 source ~/.zshrc 来重新加载配置。
  2. 直接在软件中设置添加环境变量
    • 通过（⇧ ⌘ P）三个键 打开命令面板，就会弹出来这个界面，选择Shell Command就行
    • image.png

3. 开发和调试

具体内容可参照官网，内容已经详细介绍

4. 更新要发布的内容

5. 测试扩展

6. 发布扩展

6.1安装vsce

vsce 是 Visual Studio Code Extension CLI（命令行界面）的缩写，它是用于创建、打包、发布和安装 Visual Studio Code 扩展的工具

npm install -g @vscode/vsce

$ cd myExtension
$ vsce package
# myExtension.vsix generated
$ vsce publish
# <publisher id>.myExtension published to VS Code Marketplace

6.2 注册登录Vscode ,可以使用github账号

可以使用GitHub账号来发布VS Code扩展。首先，你需要在Visual Studio Code Marketplace上注册成为一个发布者（publisher）。注册过程通常涉及创建一个Microsoft Partner Network账号，但你也可以使用GitHub账号进行身份验证。

6.3 获取个人访问令牌

  1. 在Azure DevOps创建自己的组织

  2. 从您组织的主页，打开个人资料图片旁边的用户设置下拉菜单，然后选择个人访问令牌：

    image.png

  3. 创建token

    image.png

  4. 信息填写

    image.png

    • Name:名称，输入自己想要的
    • Organization：所有可访问的组织
    • Expiration (UTC)：Token过期时间
    • Scopes：范围
    • Show all scopes：Scopes自定义时，显示要勾选的项目

  5. 点击创建，将Token copy到安全的地方

6.4 创建发布者

发布者是可以将扩展发布到 Visual Studio Code 市场的身份。每个扩展都需要publisher在其package.json文件中包含一个标识符。即在文件中加入"publisher":"<publisher id>",

  1. 在marketplace中创建账号
  2. 使用您在上一节中创建个人访问令牌时使用的相同 Microsoft 帐户登录。
  3. 单击左侧窗格中的Create publisher。
    • Name：您的publisher的唯一名称，将与您的扩展一起显示在Marketplace中。
    • ID：Marketplace中publisher的唯一标识符，将用于您的扩展URL。创建后无法更改ID。
    • 其余字段可选
  4. 创建
  5. 验证发布者是否可用,出现如下信息，则证明验证成功
vsce login <publisher id>                                     
https://marketplace.visualstudio.com/manage/publishers/
Personal Access Token for publisher '<publisher id> ': ****************************************************
The Personal Access Token verification succeeded for the publisher '<publisher id> '.

6.5 发布

方式一：自动
vsce publish
方式二：手动

  1. vsce package生成将扩展打包成可安装的 VSIX 格式，然后上传到Visual Studio Marketplace 发布者管理页面：

  2. 新建

    image.png

  3. 上传 image.png

  4. 在插件市场能搜索到自己发布的插件

    image.png

总结

通过上述步骤，我们可以有效地在VSCode中实现项目代码风格的统一，并通过扩展功能提高开发效率。首先，通过创建和分享代码片段，我们可以确保团队成员使用统一的代码模板。其次，通过推荐和配置统一的VSCode扩展，我们可以进一步强化代码风格的一致性。最后，通过文档、培训、代码审查和持续集成的实践，我们可以确保团队成员不仅理解规范，而且能够遵循规范，从而提高整个项目的代码质量和开发效率。 更多发布扩展的详细用法等着我们去探索：官网

avatar
文章
阅读
粉丝