Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

✨ Utility: Ports

オープン
  • 何か問題がありますか？
#1,833 コメント 6 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
5/5
見積もり時間
1週間以上
初心者へのやさしさ
30/100
issue の種類
機能追加
明瞭さ
おおむね明確
活発さ
停滞
技術スタック
swift
領域
desktop, devtools

調査の方向性

まず Utility Area を見つけ、#1798 で導入されたポートフォワーディング機能を確認します。記載されたテーブル、コンテキストメニューのアクション、フィルタリング、フォワーディング状態、エラーを中心に Ports ユーティリティを定義し、ゼロ状態には ContentUnavailableView を使用します。ポートのフォワーディングまたは停止時にユーティリティが更新され、提示された受け入れ基準をサポートすれば完了です。

索引モデルが issue の本文から書いたものです。

説明

enhancement navigator
Description:

We should add a Ports utility to the Utility Area in CodeEdit that allows users to manage port forwarding within their development environment. This utility will make it easy for users to forward ports, monitor active ports, and configure various port-related settings from within the editor. The functionality will be visually displayed in a table where users can see port numbers, forwarded addresses, and port visibility (private or public). The user will also be able to interact with individual ports through a context menu.

Expected Behavior
  1. Ports Management Interface:
    • A dedicated utility within the Utility Area that lists forwarded ports in a table format.
    • The table should include columns for:
    • Port number
    • Forwarded address
    • Port visibility (Private or Public)
    • Origin (how the port was forwarded)
    • Status (running or stopped)
  2. Context Menu for Each Port:
    • Right-clicking (or Control-clicking) a port should bring up a context menu with the following actions:
      • Open in Browser: Opens the forwarded port in the default web browser.
      • Preview in Editor: If applicable, open the forwarded address in the editor’s built-in preview.
      • Set Port Label: Allows the user to assign a label or name to the port for easier identification.
      • Copy Local Address: Copies the local IP/hostname and port to the clipboard.
      • Port Visibility: Toggle between Private (accessible only to the local machine) and Public (accessible externally).
      • Change Port Protocol: Allow users to change the protocol used for the port (e.g., HTTP, HTTPS).
      • Stop Forwarding Port: Stops forwarding the selected port.
      • Forward a Port: Manually forward a new port by specifying the port number and address.
  3. Port Visibility and Protocol:
    • Ports can be toggled between Private (only accessible locally) and Public (accessible to other devices).
    • Users should be able to modify the protocol for a forwarded port (e.g., switching between HTTP and HTTPS).
  4. Filter/Search Ports:
    • A filter or search input should be provided at the bottom of the table to quickly find ports by number or address.
  5. Keyboard Shortcuts:
    • Consider adding keyboard shortcuts for key actions, such as stopping a port or toggling visibility.
  6. Error Handling:
    • If a port fails to forward or an error occurs during interaction, display a clear error message (e.g., “Port forwarding failed”).
    • Gracefully handle cases where a forwarded port is no longer available or conflicts arise.
Acceptance Criteria
  1. A new Ports Management Utility is available in the Utility Area where users can see and manage their forwarded ports.
  2. Users can forward new ports, stop forwarding, and toggle visibility between private and public with ease.
  3. Right-clicking a port shows a context menu with actions like Open in Browser, Preview in Editor, and Change Port Protocol.
  4. Ports can be filtered or searched for using a filter input in the interface.
  5. If a forwarded port encounters an error, the system displays a meaningful error message.
  6. The interface updates dynamically as ports are forwarded or stopped.
Screenshots

image

image

[!NOTE]
Please use the ContentUnavailableView for the zero-state.

Original Issue

I have just built the latest CodeEdit build and used the new feature introduced in #1798, and I noticed that there was no menu to manage open ports. For example, if I ran a web server on http://localhost:3000, an editor like VSCode would show that there is an open port in it's status bar:

image

What if CodeEdit had open ports in the navigator?

Screenshot 2024-08-01 at 10 13 43 AM

主要言語
Swift
スター
23k
フォーク
1.2k
30日以内にマージされた PR はありません

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

CodeEditApp/CodeEdit のほかの issue

CodeEditApp/CodeEdit の issue をすべて見る

似ている issue

Swift の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。