나는 오픈 소스 편집기에 기여했고, 당신도 할 수 있습니다

몇 달 전, 양식의 자동 완성에 대한 Jason Grigsby의 게시물이 화제가 되었습니다. 나는 사용자가 자신의 카드 사진을 찍어 신용 카드 세부 정보를 채울 수 있다는 아이디어를 좋아했습니다. 내가 좋아하지 않는 것은 자동 완성에 가능한 모든 값을 마음으로 배우는 것이었습니다. 노년에 게을러지고 있습니다.

최근에는 지능적인 자동 완성 기능을 제공하는 편집기를 사용하면서 버릇이 생겼습니다. 과거에는 거대하고 복잡한 IDE에서만 제공되던 기능이었습니다. 내가 선택한 편집기를 열고 input 요소를 만들고 autocomplete 속성을 추가했지만 코드 완성이 on 또는 off 상태를 제공한다는 것을 발견했습니다. 실망.

내가 원했던 것은 다음과 같다.

요즘 개발 환경의 가장 좋은 점은 우리가 작성하는 데 사용하는 기술에서 사용하는 도구를 구축한다는 것입니다. 예, 이것은 혼란스럽게 들립니다. 우리는 코드 Inception에 도달했습니다. Node.js를 사용하면 백엔드에서 JavaScript를 실행할 수 있으며 Electron을 사용하면 HTML, CSS 및 JavaScript를 사용하여 모든 플랫폼에 설치 가능한 애플리케이션을 만들 수 있습니다.

SmashingMag에 대한 추가 정보:

• 그래서 당신은 직장에서 프로젝트를 오픈 소스로 결정했습니다
• 오픈 소스 라이선스에 대한 짧은 가이드
• 오픈 소스 프로젝트를 시작하는 방법
• 오픈 소스 디자인의 경우

Atom은 이 기술을 사용하고 오픈 소스가 되어 기여를 허용한 최초의 편집자였으며 Microsoft의 Visual Studio Code가 그 뒤를 이었습니다.

사용 중인 거의 모든 다른 편집기를 사용하면 확장, 플러그인 또는 스니펫 컬렉션을 다양한 형식으로 작성할 수 있습니다. 나는 의도적으로 플러그인이나 확장을 작성하고 싶지 않았지만 오히려 이 기능을 편집기의 핵심에 추가하고 싶었습니다. 플러그인, 확장 및 스니펫에는 장점이 있습니다. 예를 들어 업데이트하기 쉽습니다. 문제는 사용자별로 찾아서 설치해야 한다는 것입니다. 자동 완성이 너무 중요하다고 생각하고 대신 편집기 자체를 해킹하고 싶었습니다.

Atom과 Visual Studio Code는 모두 GitHub에서 사용할 수 있으며 확장 방법에 대한 지침이 함께 제공됩니다. 문제는 이것이 위압적으로 느껴질 수 있다는 것입니다. 나는 그것이 당신이 생각하는 것만큼 어렵지 않다는 것을 보여주기 위해 오늘 여기에 왔습니다. Visual Studio Code는 현재 제 편집기이며 놀라운 자동 완성 기능을 제공합니다. 그것이 내가 해결하고 싶었던 것입니다.

확장 가능하고 사용자 정의 가능한 도구는 새로운 것이 아닙니다. 우리가 사용하는 대부분은 애드온, 플러그인 또는 전문 언어의 형태로 어떤 식으로든 확장될 수 있습니다. 내가 화를 낼 때 사용한 첫 번째 편집기는 VTML, WIZML 및 JScript와 같은 펑키한 언어가 있는 Allaire와 Macromedia의 HomeSite였습니다. 당시 JavaScript의 Windows 버전이었습니다. 그 편집기를 위해 많은 확장 프로그램과 도구 모음을 작성했는데, 이는 당시 회사의 생산성을 크게 향상시켰습니다.

고맙게도 웹 스택이 응용 프로그램을 구축하는 데 훨씬 더 흥미로워지면서 전문 언어를 제공하는 것이 시간 낭비라는 사실을 회사에서 이해하고 있습니다.

지금 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 을 지원하는 요소의 모든 정의로 이동하여 o 를 내 고유의 inputautocomplete 로 바꿨습니다.

 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로 이동하여 pull 요청을 추가했습니다. 며칠 후 내 풀 리퀘스트가 통과되었으며 내가 한 작업이 다음 빌드의 일부가 될 것이라는 댓글을 받았습니다.

6. 당황하다

솔직히 말해서, 나는 이것이 에디터의 핵심에 대한 변화를 보증할 만큼 충분히 놀랍다고 생각하지 않았습니다. 그냥 놀고 싶었습니다. 많은 사람들이 당신이 하는 일에 대해 같은 생각을 할 것입니다. 그리고 그것이 문제입니다. 우리가 틀렸습니다. 오픈 소스 프로젝트에 기여하기 위해 멋진 개발자가 되어야 하는 것은 아닙니다. 또한 유명하거나 군중의 일부가 될 필요도 없습니다. 때로는 무언가를 보고, 분석하고, 개선할 방법을 찾기만 하면 됩니다.

우리가 사용하는 도구를 더 잘 만드는 것은 우리에게 달려 있습니다. 오픈 소스 프로젝트에 기여할 수 있는 방법이 보이면 부끄러워하지 마십시오. 당신은 다른 사람들이 간과한 너무도 당연하고 단순한 아이디어를 생각해낸 사람일 수도 있습니다. 당신은 무언가를 더 유용하거나 보기 좋게 만드는 사람일 수 있습니다. 우리 모두는 기여할 수 있는 기술을 가지고 있습니다. 그 이상을 해봅시다.