你給開源項目提過 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 了。若是順利的話，你就能『混』 到一個開源項目貢獻者的頭銜。

\