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

Creating a Branch

The default branch for VChart is the develop branch. For any 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 documentation, demo branch
git checkout -b docs/add-funnel-demo

Finding or Creating an Issue

In principle, we require every PR to have a corresponding issue. Before starting development, please confirm whether there is a corresponding issue, and the issue has not been claimed.

Search for Issues

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

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

Fill in the relevant information for the document issue you want to submit and apply the appropriate tags.

Claiming an Issue

If you want to contribute code, you can leave a message to claim the issue. An administrator will contact you and, upon confirmation, assign the issue to you.

For example:

Writing Code

The source code for VChart is located in the following way within the project:

All the components of the VChart ecosystem are in the same directory, split by package name. Developers need to develop code in their own code branch and then submit it.

Writing Code with Marscode AI Programming Assistant

With the help of the Marscode AI Programming Assistant, comprehensive assistance can be provided throughout the coding process.

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

When writing code, using context commands appropriately can improve the accuracy of content.

**⭐️ #Workspace**

Select global code from Workspace as context, and AI will automatically find relevant code context based on the user's Query.

**⭐️ #Files**

Search and select files in the code repository as context.

**⭐️ #Code**

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

Below is an example of how to use the Marscode AI Programming Assistant for coding.

5.1 Quickly Familiarize with the Entire Repository

Here, use ** # to summon #Workspace ** and then ask it to help generate a project structure description document.

We can still ask further questions about subfolders.

5.2 Explaining Code

5.2.1 Generate Code Descriptions

When we select a piece of code in a file, we can choose the Explain command from the floating menu, and Marscode will generate a detailed code explanation for us, which we can proofread and adapt.

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

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

5.2.2 Generate Explanation for the Entire File

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

5.3 Content Retrieval

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

You can also directly perform file retrieval:

5.4 Code Generation

In daily coding, we often encounter scenarios where repetitive code is used. Sometimes you may not know if a certain function has already been implemented. At this time, use #Workspace to ask questions. For example:

5.5 Adding Comments

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

5.6 Generating Unit Tests

The unit test code for VChart is located in the “__tests” directory of each package.

Use the Marscode "/test" command to quickly generate unit test code.

5.7 Intelligent Suggestions

During writing, the intelligent generation of optional code is a standard feature of the programming assistant. Please feel free to explore this feature.

Submitting Code

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

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

The commit message for VisActor follows the Conventional Commits specification, demo uses docs

<type>[optional scope]: <description>

Common types include docs (documentation, log changes), feat (new features), fix (problem fixes), refactor (code refactoring), etc. Please choose based on the actual situation.

Please write the description with a concise and accurate English description.

Before submitting a commit, we will conduct commit lint checks. For more details, please see check rules.

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

git checkout develop

Use the following code to pull out the latest code from upstream:

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

Submit the updated code to your branch:

git push origin docs/add-funnel-demo

Submitting a PR

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

Or create one through the contribute button:

Fill in the modification details of this submission according to the template:

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

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

An administrator will review the PR to decide whether to approve it. If not approved, modifications will be needed before resubmitting.

Next Step

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

Please join the VisActor family and contribute your efforts!

GitHub: github.com/VisActor

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

VisActor Official Website: www.visactor.io/

Feishu Group:

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

This Document Was Contributed By

玄魂