你給開源項目提過 PR 嗎？
你有給開源的庫或者框架提過 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: https://github.com/TrySound/rollup-plugin-eslint/pull/27
關鍵是，作者都沒想到這個東西居然這么簡單就實現了。
如何在 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 了。如果順利的話，你就能『混』 到一個開源項目貢獻者的頭銜。
