我贡献了一个开源编辑器，你也可以

几个月前，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.感到困惑

坦率地说，我认为这不足以保证对编辑器的核心进行更改。 我只是想玩玩。 你们中的许多人可能对自己所做的工作有同样的想法。 事情就是这样：我们错了。 为开源项目做贡献并不需要你是一个了不起的开发者。 它也不需要您出名或成为人群中的一员。 有时你需要做的就是看一些东西，分析它并找到改进它的方法。

我们有责任让我们使用的工具变得更好。 如果您看到了为开源项目做出贡献的方法，请不要害羞。 你可能会想出一个如此明显和简单的想法，以至于其他人都忽略了它。 您可能是使某些东西更有用或更美观的人。 我们都有能力做出贡献。 让我们做更多的事情。