你给开源项目提过 PR 吗？

这是我参与8月更文挑战的第3天，活动详情查看：8月更文挑战”

你有给开源的库或者框架提过 PR 吗？

若是没有，那么今天的文章会教你怎么给开源库提 PR。

为何要给开源项目提 PR？

这件事还得从好几年前（2019年）提及，那时候在折腾一个虚拟 DOM 的玩具（参考以前的文章：🔗虚拟DOM究竟是什么？），做为一个标准的前端工程，构建工具、Lint 工具、代码格式化都是必不可少的。

在构建工具上我选择了 Rollup，但愿每次构建的时候都能自动进行代码的 Lint，因此引入了 Rollup 的一个插件：rollup-plugin-eslint。

在使用这个插件的过程当中，发现和 Webpack 对应的插件 eslint-webpack-plugin 仍是有一些差距的。我在使用 Webpack 的 eslint-webpack-plugin 时候，只须要配置 fix 属性，就可以在保存代码的时候，自动对代码进行 fix。

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

而在使用 rollup-plugin-eslint 的时候，看文档上，好像没有提到这个选项，也就是说 rollup-plugin-eslint 根本不支持这个功能。而后，搜索了一下 Issues，不搜没关系，一搜吓一跳，发现有人在 2016 年就提出了这个疑问😳。

做者的回复也很简单，欢迎提交 PR。

我当时心想，这个功能这么久了都没人实现想必很难吧。可是隔壁的 eslint-webpack-plugin 明明支持这个功能，我去看看它怎么实现的不就好了🐶。

因而，我就把 eslint-webpack-plugin 的代码 clone 下来一顿搜索，发现它实现这个功能就用了三行代码。

if (options.fix) {
  await ESLint.outputFixes(results);
}
复制代码

激动的心，颤抖的手，我赶紧就去 rollup-plugin-eslint 那里提了个 PR。

🔗PR: github.com/TrySound/ro…

关键是，做者都没想到这个东西竟然这么简单就实现了。

如何在 GitHub 上提 PR？

上面是我第一次提 PR 的一个心路历程，若是你也发现了你如今使用的什么开源框架有待优化的地方，这里再教你们怎么在 GitHub 上提交一个 PR。

对开源项目进行 Fork

首先把你要提交 PR 的项目 Fork 到本身的仓库。

而后到本身的仓库中，将 Fork 的项目 clone 到本地。

$ git clone git@github.com:Shenfq/rollup-plugin-eslint.git
复制代码

切换到新分支，提交变动，推送到远程

代码 clone 到本地以后，先切换一个新的分支，分支名最好紧贴此次更新的内容。

$ git checkout -b feature/add-fix-option
复制代码

在新分支修改代码：

+  if (options.fix && report) {
+    CLIEngine.outputFixes(report);
+  }
复制代码

提交变动：

$ git add .
$ git commit -m "feat: add options.fix"
复制代码

最后将新的分支推送到远程：

$ git push --set-upstream origin feature/add-fix-option
复制代码

新建 PR

在本身的 GitHub 仓库中找到对应项目，打开 Pull requests Tab，点击 New pull request 按钮，新建一个 PR。

而后，在下面的界面中，选择刚刚提交的分支，最后点击 Create pull request 便可。

点击以后，就在对应的项目中提交了一个属于你的 PR 了。若是顺利的话，你就能『混』 到一个开源项目贡献者的头衔。

\