我貢獻了一個開源編輯器，你也可以

幾個月前，Jason Grigsby 關於表格自動完成的帖子引起了廣泛關注。 我喜歡允許用戶通過為信用卡拍照來填寫信用卡詳細信息的想法。 我不喜歡的是熟記自動填充的所有可能值。 我年紀大了越來越懶。

最近，我因使用為我執行智能自動完成功能的編輯器而被寵壞了，這是過去只有大型複雜 IDE 才能提供的功能。 打開我選擇的編輯器，我創建了一個input元素並添加了一個autocomplete屬性，結果發現代碼完成為我提供了on或off的狀態。 令人失望。

我想要的是以下內容：

如今，我們的開發環境的偉大之處在於，我們構建了我們在使用它們編寫的技術中使用的工具。 是的，這聽起來令人困惑——我們已經達到了代碼初始階段。 Node.js 允許我們在後端運行 JavaScript，並且使用 Electron 我們可以使用 HTML、CSS 和 JavaScript 創建適用於所有平台的可安裝應用程序。

關於 SmashingMag 的進一步閱讀：

• 所以你決定在工作中開源一個項目
• 開源許可證簡短指南
• 如何啟動一個開源項目
• 開源設計案例

Atom 是第一個使用該技術並允許通過開源進行貢獻的編輯器，緊隨其後的是 Microsoft 的 Visual Studio Code。

幾乎所有其他使用的編輯器都允許我們編寫各種格式的擴展、插件或片段集合。 我故意不想編寫插件或擴展，而是想將此功能添加到編輯器的核心。 插件、擴展和片段有其優點； 例如，它們很容易更新。 問題是需要為每個用戶找到並安裝它們。 我認為自動補全太重要了，而是想破解編輯器本身。

Atom 和 Visual Studio Code 都可以在 GitHub 上找到，並附帶有關如何擴展它們的說明。 挑戰在於，這可能會讓人望而生畏。 我今天在這裡向你展示它並不像你想像的那麼難。 Visual Studio Code 是我目前的編輯器，它具有驚人的自動完成功能。 這就是我想要解決的問題。

可擴展和可定制的工具並不是什麼新鮮事。 我們使用的大部分內容都可以以一種或另一種方式進行擴展，無論是以附加組件、插件還是專業語言的形式。 我憤怒地使用的第一個編輯器是 Allaire 和 Macromedia 的 HomeSite，它有 VTML、WIZML 和 JScript 等時髦的語言，當時是 Windows 版本的 JavaScript。 我為那個編輯器寫了很多擴展和工具欄，這極大地提高了我公司當時的生產力。

值得慶幸的是，這些天來，公司明白提供專業語言是浪費時間，因為 Web 堆棧已經變得越來越有趣，可以用來構建應用程序。

如果您現在下載 Visual Studio Code，您將看到我的自動完成功能是其中的一部分。 這就是我的做法。

1. 投訴

我的第一步是訪問 Visual Studio Code 的 GitHub 存儲庫並提交問題，請求編輯器使用此功能。 如果您不想自己做，這也可能是您的最後一步。 正在為該項目尋找工作的其他人可能會發現您的投訴並為您解決。 就我而言，我想了解更多。

2. 分叉代碼

我不只是提交問題，而是去了 GitHub 存儲庫並分叉了代碼。 我為此使用了我的個人帳戶。 您無需隸屬於 Microsoft 或被添加到特殊組。 該存儲庫是公開的和開放的。 歡迎大家。 甚至還有一個貢獻行為準則，這意味著人們應該表現得很好。 我將代碼下載到我的硬盤上，並按照說明如何在本地構建編輯器。

3. 準備好開發工作流程

Visual Studio Code 是用 Node.js 和 TypeScript 編寫的。 開發流程從團隊提供的腳本開始，它為我提供了一個在我正在使用的版本旁邊運行的 Visual Studio Code 的開發版本。 在命令行上運行的腳本可確保捕獲我的更改，並且每次保存代碼時，編輯器的開發版本都會重新啟動，我可以測試更改。 從源代碼構建和運行代碼到設置開發工作流程，所有這些都得到了很好的記錄。 而且它獨立於平台——你會得到關於 Windows、Linux 和 Mac OS X 的說明。

您可以在下面的屏幕截圖中看到這在我的計算機上的樣子。 大視圖編輯器 (1) 是我用來編碼另一個的； 右邊（3）是開發版； 底部 (2) 是創建開發版新版本的腳本。 在編輯器中編寫編輯器確實感覺很奇怪，但你會習慣的。

如果所有這一切都不適用於您，請不要氣餒。 我遇到了一些障礙，不得不求助於 Google 和 StackOverflow 尋求解決方案。 Node.js 社區非常有幫助。

4.編寫功能

接下來，我準備全力以赴，使用 TypeScript 編寫一些巧妙的代碼。 我知道這是很多人認輸的地方，因為它太難繼續下去了。

我最大的問題是我不知道從哪裡開始使用此功能。 所以，我做了我們都做的事情：我在整個項目中對autocomplete進行了全文搜索。 使用這種高度科學的方法，我發現了一個htmlTags.ts文件，其中包含標籤定義和屬性值數組。 我查找了input元素，發現了這個：

 input: new HTMLTagSpecification( nls.localize('tags.input', 'The input element represents a typed data field, usually with a form control to allow the user to edit the data.'), ['accept', 'alt', 'autocomplete:o', 'autofocus:v', 'checked:v', 'dirname', 'disabled:v', 'form', 'formaction', 'formenctype:et', 'formmethod:fm', 'formnovalidate:v', 'formtarget', 'height', 'inputmode:im', 'list', 'max', 'maxlength', 'min', 'minlength', 'multiple:v', 'name', 'pattern', 'placeholder', 'readonly:v', 'required:v', 'size', 'src', 'step', 'type:t', 'value', 'width']),

那個autocomplete:o看起來很有趣，所以我檢查了o的定義位置。 這是我發現的：

 var valueSets: IValueSets = { … o: ['on', 'off'], … }

這看起來就像我添加autocomplete屬性時發生的事情。 為了改變這一點，我去了可能的自動完成值的標准定義並複制了它們。

我創建了一個名為inputautocomplete的新值集並粘貼了值：

 var valueSets: IValueSets = { … inputautocomplete: ['additional-name', 'address-level1', 'address-level2', 'address-level3', 'address-level4', 'address-line1', 'address-line2', 'address-line3', 'bday', 'bday-year', 'bday-day', 'bday-month', 'billing', 'cc-additional-name', 'cc-csc', 'cc-exp', 'cc-exp-month', 'cc-exp-year', 'cc-family-name', 'cc-given-name', 'cc-name', 'cc-number', 'cc-type', 'country', 'country-name', 'current-password', 'email', 'family-name', 'fax', 'given-name', 'home', 'honorific-prefix', 'honorific-suffix', 'impp', 'language', 'mobile', 'name', 'new-password', 'nickname', 'organization', 'organization-title', 'pager', 'photo', 'postal-code', 'sex', 'shipping', 'street-address', 't].sort()el-area-code', 'tel', 'tel-country-code', 'tel-extension', 'tel-local', 'tel-local-prefix', 'tel-local-suffix', 'tel-national', 'transaction-amount', 'transaction-currency', 'url', 'username', 'work'], … }

然後我去了所有支持autocomplete的元素的定義，並用我自己的inputautocomplete替換了o ：

 input: new HTMLTagSpecification( nls.localize('tags.input', 'The input element represents a typed data field, usually with a form control to allow the user to edit the data.'), ['accept', 'alt', 'autocomplete:inputautocomplete' … ]),

我保存了我的更改； 該腳本重建了編輯器； 我嘗試了編輯器的開發版； 並且autocomplete按照我想要的方式工作。

5. 發送拉取請求

就是這樣。 我將我的更改提交到 Git（在 Visual Studio Code 中），然後轉到 GitHub 並添加了一個拉取請求。 幾天后，我收到一條評論，說我的拉取請求通過了，我所做的將成為下一個構建的一部分。

6.感到困惑

坦率地說，我認為這不足以保證對編輯器的核心進行更改。 我只是想玩玩。 你們中的許多人可能對自己所做的工作有同樣的想法。 事情就是這樣：我們錯了。 為開源項目做貢獻並不需要你是一個了不起的開發者。 它也不需要您出名或成為人群中的一員。 有時你需要做的就是看一些東西，分析它並找到改進它的方法。

我們有責任讓我們使用的工具變得更好。 如果您看到了為開源項目做出貢獻的方法，請不要害羞。 你可能會想出一個如此明顯和簡單的想法，以至於其他人都忽略了它。 您可能是使某些東西更有用或更美觀的人。 我們都有能力做出貢獻。 讓我們做更多的事情。