Рубрики
Uncategorized

Я автоматизировал публикацию моего расширения VSCode

Действия GitHub изменили способ CI / CD для проектов с открытым исходным кодом. В этом блоге пост я хочу … Помечено VSCode, GitHub, с открытым исходным кодом, CI CD.

Действия GitHub изменили способ CI/CD для проектов с открытым исходным кодом. В этом посте в блоге я хочу показать вам один удивительный способ, которым он пригодился, в одном из моих проектов.

Предпосылка

Я управляю «Пользовательские профили для VSCode» , который является расширением, который поможет вам создать изолированные экземпляры VSCode, а также для команд, чтобы выровнять на их конфигурации VSCode.

Проблема

Каждый раз, когда я делаю улучшение к проекту, я должен сделать эту дополнительную задачу создания пакета .vsix и загрузите его на рынок VSCode. Что я бы хотел сделать, объединить свой код изменения и автоматизировать все задачи, связанные с развертыванием.

Действия GitHub на спасение

Я решил решить это с действиями GitHub. Я создаю PR — который должен идеально пытаться создавать и тестировать мою пакет, а однажды объединить, автоматически развернуто на рынке VSCode.

Давайте погрузимся в код

Весь код доступен в GitHub в «пользовательских профилях для хранилища VSCode». Вы можете найти файл рабочего процесса здесь — CD.yml.

Вот простой файл рабочего процесса, который я использовал для автоматизации развертывания.

name: "cd"

on:
  push:
    branches:
      - cool

jobs:
  cd:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout to branch
        uses: actions/checkout@v2

      - name: Setup node.js
        uses: actions/setup-node@v1
        with:
          node-version: ${{ secrets.NODE_VERSION }}

      - name: Install packages
        run: npm ci

      - name: Calculate version
        id: calculateVersion
        run: |
          APP_VERSION=`cat package.json | jq ".version" -M | sed 's/\"//g'`
          echo "::set-output name=AppVersion::$APP_VERSION"
          echo "app version = v$APP_VERSION"
      - name: Build VSIX package
        run: npm run build -- -o custom-profiles-for-vscode.v${{ steps.calculateVersion.outputs.AppVersion }}.vsix

      - name: Publish extension package
        env:
          VSCODE_MARKETPLACE_TOKEN: ${{ secrets.VSCODE_MARKETPLACE_TOKEN }}
        run: npm run vsce -- publish -p $VSCODE_MARKETPLACE_TOKEN

      - uses: actions/upload-artifact@v2
        name: Upload artifact
        with:
          name: custom-profiles-for-vscode.v${{ steps.calculateVersion.outputs.AppVersion }}.vsix
          path: custom-profiles-for-vscode.v${{ steps.calculateVersion.outputs.AppVersion }}.vsix

Шаги должны быть довольно простыми для понимания, которые включают в себя:

  1. Получите код из моей ветки
  2. Настройка Node.js на бегунке
  3. Установите пакеты NPM

4. Рассчитайте версию

Я использую поле версии в package.json Файл, чтобы определить, какую версию пакета мне нужно развернуть.

Это не проблема, даже если я забываю поднять версию, так как развертывание в любом случае не удастся.

Я буду интегрировать Gitversion с этим в какой-то момент. Оставайтесь настроиться на этот блог пост! 😁

5. Создание проекта

Я использую VSCE — VSCODE Удлинитель Manager Пакет для создания и развертывания моего проекта на рынок.

"scripts": {
    ...
    "build": "(rm -rf out || true) && mkdir out && cp package.json out && vsce package"
    ...
},

Здесь я копирую package.json и содержимое сборки и готов к развертыванию. Это создает .vsix Файл, который мы проверим позже.

6. Развертывание на рынке

Опять же, ВССЕ приходит удобно подталкивать сборку на рынок. Я добавил токен для аутентификации.

Вы можете создать этот токен через Azure DEVOPS. Проверьте эту страницу для получения более подробной информации — https://code.visualstudio.com/api/working-with-extensions/publishing-extension . Вам нужен токен с Рынок: Управление Сфера охвата, и вы должны быть хороши, чтобы пойти.

Введите это как секрет на странице секретов репозитория GitHub, и вы сможете использовать его в вашем рабочем процессе.

7. Публикация артефакта

Если рынок VSCode не ваша вещь, я также публикую расширение как .vsix Файл, который может быть установлен на VSCode с помощью палитра команд ( CTRL/CMD + Сдвиг + P ) а потом Расширения: установка из VSIX

И это так легко автоматизировать развертывание для ваших проектов расширения VSCode на рынок! Дайте это попробовать, я уверен, что это спасит вам много времени.

Иметь отличный. 👋

-Сарав

Оригинал: «https://dev.to/mrsauravsahu/i-automated-publishing-my-vscode-extension-1m71»