Git Product home page Git Product logo

contribute's Introduction

Contribution Guide

Hey there! We are really excited that you are interested in contributing. This is a general contribution guide for most of my projects. Before submitting your contribution, please make sure to take a moment and read through the following guide:

๐Ÿ‘จโ€๐Ÿ’ป Repository Setup

We use pnpm for most of the projects, we highly recommend you install ni so you don't need to worry about the package manager when switching across different projects.

We will use ni's commands in the following code snippets. If you are not using it, you can do the conversion yourself: ni = pnpm install, nr = pnpm run.

To set the repository up:

Step Command
1. Install Node.js, using the latest LTS -
2. Enable Corepack corepack enable
3. Install @antfu/ni npm i -g @antfu/ni
4. Install dependencies under the project root ni

๐Ÿ’ก Commands

nr dev

Start the development environment.

If it's a Node.js package, it will start the build process in watch mode.

If it's a frontend project, it usually starts the dev server. You can then develop and see the changes in real time.

nr play

If it's a Node.js package, it starts a dev server for the playground. The code is usually under playground/.

nr build

Build the project for production. The result is usually under dist/.

nr lint

We use ESLint for both linting and formatting. It also lints for JSON, YAML and Markdown files if exists.

You can run nr lint --fix to let ESLint formats and lints the code.

Learn more about the ESLint Setup.

nr test

Run the tests. We mostly using Vitest - a replacement of Jest.

You can filter the tests to be run by nr test [match], for example, nr test foo will only run test files that contain foo.

Config options are often under the test field of vitest.config.ts or vite.config.ts.

Vitest runs in watch mode by default, so you can modify the code and see the test result automatically, which is great for test-driven development. To run the test only once, you can do nr test --run.

For some projects, we might have multiple types of tests set up. For example nr test:unit for unit tests, nr test:e2e for end-to-end tests. nr test commonly run them together, you can run them separately as needed.

nr docs

If the project contains documentation, you can run nr docs to start the documentation dev server. Use nr docs:build to build the docs for production.

nr

For more, you can run bare nr, which will prompt a list of all available scripts.

๐Ÿ™Œ Sending Pull Request

Discuss First

Before you start to work on a feature pull request, it's always better to open a feature request issue first to discuss with the maintainers whether the feature is desired and the design of those features. This would help save time for both the maintainers and the contributors and help features to be shipped faster.

For typo fixes, it's recommended to batch multiple typo fixes into one pull request to maintain a cleaner commit history.

Commit Convention

We use Conventional Commits for commit messages, which allows the changelog to be auto-generated based on the commits. Please read the guide through if you aren't familiar with it already.

Only fix: and feat: will be presented in the changelog.

Note that fix: and feat: are for actual code changes (that might affect logic). For typo or document changes, use docs: or chore: instead:

  • fix: typo -> docs: fix typo

Pull Request

If you don't know how to send a Pull Request, we recommend reading the guide.

When sending a pull request, make sure your PR's title also follows the Commit Convention.

If your PR fixes or resolves an existing issue, please add the following line in your PR description (replace 123 with a real issue number):

fix #123

This will let GitHub know the issues are linked, and automatically close them once the PR gets merged. Learn more at the guide.

It's ok to have multiple commits in a single PR, you don't need to rebase or force push for your changes as we will use Squash and Merge to squash the commits into one commit when merging.

๐Ÿ“– References

Corepack

TL;DR

To enable it, run

corepack enable

You only need to do it once after Node.js is installed.

What's Corepack

Corepack makes sure you are using the correct version for package manager when you run corresponding commands. Projects might have packageManager field in their package.json.

Under projects with configuration as shown on the right, corepack will install v7.1.5 of pnpm (if you don't have it already) and use it to run your commands. This makes sure everyone working on this project have the same behavior for the dependencies and the lockfile.


package.json

{
  "packageManager": "[email protected]"
}

ESLint

We use ESLint for both linting and formatting with @luxass/eslint-config.

IDE Setup

We recommend using VS Code along with the ESLint extension.

With the settings on the right, you can have auto fix and formatting when you save the code you are editing.


VS Code's settings.json

// .vscode/settings.json
{
  // will ensure that eslint can use the experimental flat config
  "eslint.experimental.useFlatConfig": true,

  // disable the default formatter
  "prettier.enable": false,
  "editor.formatOnSave": false,

  // auto fix on save
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit",
    "source.organizeImports": "never"
  },
  
  // silent the stylistic rules in you IDE, but still auto fix them
  "eslint.rules.customizations": [
    { "rule": "style/*", "severity": "off" },
    { "rule": "*-indent", "severity": "off" },
    { "rule": "*-spacing", "severity": "off" },
    { "rule": "*-spaces", "severity": "off" },
    { "rule": "*-order", "severity": "off" },
    { "rule": "*-dangle", "severity": "off" },
    { "rule": "*-newline", "severity": "off" },
    { "rule": "*quotes", "severity": "off" },
    { "rule": "*semi", "severity": "off" }
  ],

  // The following is optional.
  // It's better to put under project setting `.vscode/settings.json`
  // to avoid conflicts with working with different eslint configs
  // that does not support all formats.
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue",
    "html",
    "markdown",
    "json",
    "jsonc",
    "yaml"
  ]
}

๐Ÿ™Œ Acknowledgements

I would like to thank antfu for his contribution guide which I used as a template for this one.

contribute's People

Contributors

luxass avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.