This is the third day of my participation in the August More Text Challenge. For details, see “August More Text Challenge”.

Have you ever offered PR to open source libraries or frameworks?

If not, today’s post will show you how to PR an open source library.

Why give PR to open source projects?

It all started a few years ago (in 2019), with a virtual DOM toy (see the previous article: 🔗 What exactly is a virtual DOM?). As a standard front-end project, build tools, Lint tools, and code formatting are all required.

I selected Rollup on the build tool. I wanted to automate Lint every build, so I introduced a plugin for Rollup: rollup-plugin-esLint.

In the process of using this plugin, I found that there are some gaps between eslint-webpack-plugin and Webpack. When I use Webpack’s eslint-Webpack-plugin, I just need to configure the fix property to automatically fix the code when I save it.

// webpack.config.js
const ESLintPlugin = require('eslint-webpack-plugin');
​
module.exports = {
  // ...
  plugins: [
    new ESLintPlugin({
      fix: true,
      extensions: ['js', 'jsx']
    })
};
​
Copy the code

When using rollup-plugin-esLint, it doesn’t seem to mention this option, which means rollup-plugin-esLint doesn’t support it at all. Then, I searched for Issues. It doesn’t matter if I don’t search for Issues. I was surprised to find that someone raised this question in 2016 😳.

The author’s reply is also very simple, welcome to submit PR.

I thought to myself, it must be hard not to have this feature for so long. However, the eslint-webpack-plugin next door supports this functionality, so I’ll see how it works 🐶.

I searched eslint-webpack-plugin for three lines of code.

if (options.fix) {
  await ESLint.outputFixes(results);
}
Copy the code

With excited heart and trembling hands, I quickly went to rollup-plugin-eslint to propose a PR.

🔗 PR: github.com/TrySound/ro…

The point is, the author didn’t think it would be so easy to implement.

How to get PR on GitHub?

Here’s how TO submit a PR on GitHub if you’ve also found out that any of the open source frameworks you’re currently using need to be optimized.

Fork the open source project

Start by forking the project you want to submit to PR into your own repository.

Then go to your own repository and clone the Fork project to the local.

$ git clone [email protected]:Shenfq/rollup-plugin-eslint.git
Copy the code

Switch to new branch, commit changes, push to remote

After the code clone to the local, first switch to a new branch, branch name preferably close to the content of the update.

$ git checkout -b feature/add-fix-option
Copy the code

Modify the code in the new branch:

+ if (options.fix && report) { + CLIEngine.outputFixes(report); +}Copy the code

Submit changes:

$ git add .
$ git commit -m "feat: add options.fix"
Copy the code

Finally push the new branch to the remote:

$ git push --set-upstream origin feature/add-fix-option
Copy the code

New PR

Find the project in your GitHub repository, open the Pull Requests Tab, click the New Pull Request button, and create a New PR.

Then, on the screen below, select the branch you just submitted and click Create Pull Request.

Click on it, and you submit a PR for your project. If things go well, you’ll get the title of a contributor to an open source project.

\