!!!###!!!title=5-How to Contribute Code——VisActor/VRender Contributing Documents!!!###!!!!!!###!!!description=---title: 5. How to Contribute Codekey words: VisActor, VChart, VTable, VStory, VMind, VGrammar, VRender, Visualization, Chart, Data, Table, Graph, Gis, LLM---!!!###!!!

Create a Branch

The default branch for VRender is the develop branch. Whether it's for feature development, bug fixes, or documentation writing, please create a new branch and then merge it into the develop branch. Use the following code to create a branch:

// Create a branch for documentation and demo
git checkout -b docs/add-funnel-demo

Find or Create an Issue

In principle, we require that every PR has a corresponding issue. Before starting development, please make sure there is a corresponding issue that has not been claimed.

Search for an Issue

You can search for bug or feature-related issues in the following ways:

Click on "NEW ISSUE" to open the issue selection page, then choose either "Bug Report" or "Feature Request".

Fill in the relevant information for the documentation issue and add appropriate tags.

Claim an Issue

If you want to contribute code, you can leave a message under the issue to claim it. An administrator will contact you, confirm, and then assign the issue to you.

For example:

Write Code

All components in the VRender ecosystem are located in the same directory, divided by package names. Developers need to develop code on their own code branch and then commit it.

Use Marscode AI Programming Assistant for Code Writing

By using the Marscode AI Programming Assistant, you can receive comprehensive assistance throughout the code writing process.

If you haven't installed the Marscode AI Programming Assistant yet, please download it from this link: https://www.marscode.cn/home?utm_source=developer&utm_medium=oss&utm_campaign=visactor_a

During code writing, using the context command appropriately can enhance the accuracy of the content.

**⭐️ #Workspace**

Select global code in Workspace as context, and AI will automatically find relevant code context based on your query.

**⭐️ #Files**

Search and select files in the code repository as context.

**⭐️ #Code**

Search and select functions or classes in the code repository as context.

The following examples demonstrate how to use the Marscode AI Programming Assistant for code writing.

5.1 Quickly Familiarize Yourself with the Entire Repository

Here, use #Workspace to invoke it, then ask it to generate a project structure explanation document.

You can also ask further questions about subfolders.

5.2 Explain Code

5.2.1 Generate Code Explanations

When selecting a piece of code in a file, you can choose the Explain command from the floating menu, and Marscode will generate detailed code explanations for you. You can then review and modify based on this.

You can also directly input the Explain command in the dialog box.

You can also use the #Code context mentioned above to combine Explain with your instructions for more detailed tasks.

5.2.2 Generate Explanations for the Entire File

Explain can be used in conjunction with Context or Files commands to generate explanations for the entire file.

5.3 Content Retrieval

Usually, each Q&A session with Marscode will provide reference documents, which can provide more context for further analysis.

You can also directly search for files:

5.4 Code Generation

In daily coding, you may often encounter scenarios where you need to use repetitive code, and sometimes you may not know if a certain function for a feature is already implemented. In such cases, use #Workspace to ask questions. For example:

5.5 Add Comments

Use the "/doc" command to generate code comments.

5.6 Generate Unit Tests

VRender unit test code is located in the "tests" directory of each package.

You can quickly generate unit test code using the "/test" command in Marscode.

5.7 Intelligent Suggestions

During the writing process, intelligent code suggestions are a standard feature of the programming assistant. Feel free to experience it yourself.

Commit Code

After completing the documentation, push the code to your remote branch. For example:

git commit -a -m "docs: add custom funnel demo and related docs"

VisActor's commit messages follow the Conventional Commits specification, with docs used for demos.

<type>[optional scope]: <description>

Common type values include docs (documentation, log changes), feat (new feature), fix (bug fix), refactor (code refactoring), etc. Please choose according to the actual situation.

Write a short and precise description in English.

Before submitting the commit, we will perform a commit lint check. You can check the specific rules here.

A common issue is when the upstream (@visactor/vstroy) has new updates, which may cause conflicts when submitting a Pull Request. Therefore, before submitting, merge the commits from other developers with your own commits. Use the following code to switch to the develop branch:

git checkout develop

Pull the latest code from the remote:

git pull upstream develop

Switch back to your development branch:

git checkout docs/add-funnel-demo

Merge the commits from develop into your branch:

git rebase develop

Push the updated code to your branch:

git push origin docs/add-funnel-demo

Submit a PR

You can click on the Compare & pull request button on your GitHub repository page.

Or create one through the contribute button:

Fill in the modifications for this submission according to the template:

  • Check the type of modification
  • Fill in the associated issue
  • If there are complex changes, explain the background and solution

After filling in the relevant information, click on Create pull request to submit.

An administrator will review the PR and decide whether to approve it. If it is not approved, you will need to make modifications and resubmit.

Next Steps

Next, you can read about the implementation principles and source code explanations for each module, or join in contributing to these documents.

Join the VisActor family and contribute your efforts!

GitHub: github.com/VisActor

VisActor WeChat Subscription Account (you can join the WeChat group through the subscription account menu):

VisActor Official Website: www.visactor.io/

Feishu Group:

Discord: https://discord.com/invite/3wPyxVyH6m

This Document is Contributed by the Following Individuals

玄魂