Tại sao tôi đã viết 33 phần mở rộng VSCode và cách tôi quản lý chúng
Xin chào, tôi là Fabio , một nhà phát triển tự học, đam mê nguồn mở và trao quyền cho mọi người. Tôi cũng muốn tạo ra các công cụ của riêng mình, vì vậy tự nhiên tôi đã viết rất nhiều phần mở rộng cho một trong những chương trình mà tôi dành nhiều thời gian cho tôi: VSCode.
Tôi muốn chia sẻ với các bạn một chút về quy trình làm việc của mình khi phát triển và quản lý các phần mở rộng VSCode cũng như nói về tất cả những thứ mà tôi đã tạo ra.
Tôi sẽ đề cập đến nhiều công cụ và tiện ích mở rộng mà tôi đã tạo, vì vậy bạn có muốn bắt đầu phát triển tiện ích hay không, muốn tìm tiện ích mở rộng mới hoặc chỉ có nhiều kho lưu trữ để quản lý tôi hứa bạn sẽ tìm thấy một cái gì đó thú vị ở đây!
Writing an extension
Tôi thích năng suất và tự động hóa, vì vậy cách tôi bắt đầu dự án mới rất hợp lý.
Tool
- nó lấy một thư mục làm đầu vào (“mẫu”).
- nó xử lý tất cả các tệp của nó bằng các thanh ghi xử lý yêu cầu bạn thay thế cho mỗi trình giữ chỗ mà nó tìm thấy (ví dụ
{{name}}). - nó xuất ra một thư mục mới với tất cả các phần giữ chỗ được thay thế.
Tôi đã xem xét yeoman nhưng có vẻ quá phức tạp đối với các trường hợp sử dụng của tôi. Tôi đã sử dụng khaos nhưng nó không tự động và nó không cập nhật các mẫu tự động, tôi không thể được yêu cầu cập nhật chúng theo cách thủ công mỗi khi tôi muốn sử dụng chúng.
Template
Và bây giờ tôi có một phần mở rộng Hello-World-ish đang hoạt động. Mẫu đó bao gồm nhiều chức năng trợ giúp tôi sử dụng thường xuyên: nó hỗ trợ tải tệp cấu hình tùy chỉnh từ
.vscodethư mục, nó tự động đăng ký lệnh, nó có thể suy ra gốc hiện tại dựa trên tệp đang hoạt động, v.v.
Nếu tôi có thể quay ngược thời gian, tôi có thể đặt tất cả các chức năng trợ giúp này vào một
vscode-utilsgói độc lập thay vì sao chép chúng trong tất cả các tiện ích mở rộng của tôi, rất tiếc là tôi không biết từ đầu rằng tôi sẽ thực hiện 10 phần mở rộng, hiện đang cập nhật tất cả chúng sẽ đòi hỏi khá nhiều thời gian.
Nếu bạn đang suy nghĩ về việc mở rộng VSCode tôi khuyên bạn nên tạo mẫu của riêng bạn, có lẽ bắt đầu từ bản thân làm cơ sở.
Documentation
Tôi luôn mở tài liệu khi đang phát triển các tiện ích. Đó là loại trang dài và không đơn giản để tìm API bạn cần nếu bạn không biết nó tồn tại, nhưng hãy đọc nhanh và bạn sẽ sớm làm quen với nó, nói chung tôi khá hài lòng với các API khả dụng.
Bạn cũng sẽ muốn đọc toàn bộ phần “Tham khảo mở rộng”.
Tiện ích mở rộng
Tin tưởng rằng nó hay không một số phần mở rộng tôi đã thực hiện giúp tôi thực sự phát triển các phần mở rộng khác, nhiều hơn về điều này sau này.
My extensions
Như tôi đã nói tôi thích năng suất, vì vậy hầu hết các phần mở rộng của tôi đều liên quan đến năng suất. Tôi cố gắng không phát minh lại bánh xe quá nhiều, và để giữ cho các đối tượng địa lý được tách biệt tốt giữa các phần mở rộng trong khi vẫn đảm bảo chúng hoạt động tốt với nhau.
Đối với tốt hay tồi tệ hơn, tôi thấy việc làm cho tiện ích mở rộng trở nên thú vị và không thiếu những thứ có thể được tự động hóa, đó là lý do sau khi tiện ích mở rộng đầu tiên tôi thực hiện tiện ích thứ hai, thứ ba ... và một phần ba thứ ba!
Kiểm tra trang của từng tiện ích để biết thêm thông tin chi tiết và ảnh chụp màn hình.
Extensions for making extensions
# 1 Debug Launcher : Bắt đầu gỡ lỗi (ngay cả các tệp đơn!), Mà không cần phải xác định bất kỳ tác vụ hoặc cấu hình khởi chạy nào, thậm chí từ thiết bị đầu cuối. Tôi không muốn làm lộn xộn kho lưu trữ của mình với các cấu hình khởi chạy lặp lại và các tác vụ (ai cũng sử dụng các tác vụ?). Việc khởi chạy trình gỡ lỗi từ thiết bị đầu cuối thực sự nên được bao gồm trong chính VSCode.
# 2 Trình gỡ rối StatusBar : Thêm trình gỡ rối vào thanh trạng thái, ít xâm nhập hơn trình gỡ lỗi mặc định. Bởi vì thanh công cụ mặc định chỉ hút . Nếu chỉ có họ tiếp xúc với nhiều tiểu bang , phần mở rộng này có thể tốt hơn rất nhiều.
# 3 Cài đặt .VSIX : Cài đặt
.vsixtiện ích mở rộng ngay từ trình khám phá, với một cú nhấp chuột phải. Bởi vì cài đặt .vsix sucks quá.
# 4 Bump : Bump phiên bản dự án của bạn và cập nhật các thay đổi. Ý kiến nhưng có thể cấu hình. Mỗi phần mở rộng đáng kính cần một thay đổi, nhưng điều đó không có nghĩa là bạn phải viết một cách thủ công. Tiện ích mở rộng này là một trong những mục yêu thích của tôi, có thể tôi sẽ tạo một
CLIphiên bản trong số đó và trong tương lai tôi cũng muốn nó làm cho bản phát hành GitHub cũng được phát hành cho tôi.
# 5 Tối ưu hóa hình ảnh : Tối ưu hóa một hoặc tất cả hình ảnh trong dự án của bạn bằng ứng dụng yêu thích của bạn. Chỉ cần một lệnh và bạn đã hoàn thành.
Quản lý dự án
# 6 Dự án + : Phần mở rộng để quản lý dự án. Tính năng phong phú, có thể tùy chỉnh, tự động tìm các dự án của bạn. Project Manager là phần mở rộng được sử dụng nhiều nhất của loại này, nhưng tôi có hơn một trăm kho lưu trữ, tôi cần các công cụ thích hợp để quản lý chúng, một trong số đó là các nhóm lồng nhau vô thời hạn.
Quản lý todos
# 7 Todo + : Quản lý danh sách việc cần làm một cách dễ dàng. Mạnh mẽ, dễ sử dụng và có thể tùy chỉnh. Nếu bạn không cần đánh dấu cú pháp cho
TODOcác tập tin, và có lẽ bạn muốn làm nổi bật cơ bản được xây dựng trong bạn có thể muốn kiểm tra Todo Tree , nó khá tốt.
# 8 Highlight : Highlighter văn bản nâng cao dựa trên regexes. Hữu ích cho todos, chú thích, vv Hầu hết mọi người chỉ sử dụng TODO Highlight , nhưng tôi là cách tổng quát hơn và cách mạnh mẽ hơn, nó có lẽ cũng nhanh hơn.
# 9 Markdown Todo : Quản lý danh sách việc cần làm bên trong các tệp đánh dấu dễ dàng. Không có gì lạ mắt, nhưng làm cho một số phím tắt của Todo + mà bạn biết và yêu thích về cơ bản hoạt động bên trong các tệp Markdown.
# 10 Dự án + Todo + : Xem toàn bộ các dự án của bạn, xem tất cả các tệp cần làm của bạn được tổng hợp thành một. Nếu bạn đang sử dụng Projects + để quản lý dự án và Todo + để quản lý các todos của mình, bây giờ bạn có thể tổng hợp tất cả các todos của bạn trên tất cả (hoặc một số) dự án của bạn thành một tệp.
Open in…
Chuyển đổi nhanh giữa các ứng dụng / trang web khác nhau là điều quan trọng đối với tôi, đây là lý do tại sao tôi thực hiện nhiều
Open in...tiện ích mở rộng.
# 11 Mở trong ứng dụng : Mở một tệp tùy ý trong ứng dụng mặc định của ứng dụng hoặc ứng dụng bạn muốn. Một
Open in...phần mở rộng tổng quát .
# 12 Mở trong trình duyệt : Thêm một số lệnh để mở tệp hoặc dự án hiện tại trong bất kỳ trình duyệt nào bạn thích, thậm chí tất cả chúng đều đồng thời.
# 14 Mở trong Trình tìm kiếm : Thêm một vài lệnh để mở tệp hoặc dự án hiện tại trong Trình tìm kiếm.
# 15 Mở trong GitHub : Mở dự án hoặc tệp hiện tại trong github.com. Có rất nhiều phần mở rộng khác cho việc này, nhưng khi tôi thử chúng, chúng chỉ là siêu cồng kềnh với những thứ tôi không cần hoặc không hoạt động.
# 18 Mở trong node_modules : Mở lựa chọn hiện tại hoặc chuỗi tùy ý
node_modules. Hữu ích khi bạn muốn tìm hiểu sâu hơn về các mô-đun bạn đang sử dụng.
# 19 Mở trong NPM : Mở lựa chọn, dự án hoặc chuỗi tùy ý hiện tại, trong npmjs.com. Hữu ích để xem nhanh readme.
# 20 Open in Ship : Thêm lệnh để mở dự án hiện tại trong Ship. Rất tiếc, Ship đã không còn được dùng nữa và nó không hoạt động nữa. Bây giờ tôi có một tab chuyên dụng trong Noty để quản lý các vấn đề sắp tới.
Khác
# 23 Làm mới trình duyệt : Làm mới trình duyệt bằng ⌘R, ngay từ Mã. Không cần phải chuyển tiêu điểm sang nó. Hữu ích khi bạn không thể sử dụng nạp lại nóng, và nếu bạn không muốn
browser-syncđể làm mới trang khi không cần thiết .
# 26 Git File History : Xem hoặc khác với các phiên bản trước của tập tin hiện tại. Có rất nhiều phần mở rộng khác cho việc này, nhưng khi tôi thử chúng, chúng chỉ là siêu cồng kềnh với những thứ tôi không cần hoặc không hoạt động.
# 27 GitHub Notifications : Biểu tượng thanh trạng thái an toàn, tùy biến, thông báo cho bạn về các thông báo trên GitHub.
# 28 Monokai Night Theme : Một chủ đề lấy cảm hứng từ Monokai đầy đủ, tối và tối giản. Không một chủ đề nào mà tôi đã thử nhìn vừa phải, tôi phải tự làm chủ đề của mình.
# 29 Không [Không được hỗ trợ] : Phần mở rộng để xóa “[Không được hỗ trợ]” khỏi thanh tiêu đề. Điều này không được dùng nữa, tôi khuyên bạn nên Fix VSCode Checksums thay thế. Thật không may sau khi một số cuộc thảo luận , và một số cuộc thảo luận nhiều hơn , hậu tố "[không được hỗ trợ] là ở đây, sẵn sàng làm phiền chúng tôi.
# 30 Mở nhiều tập tin : Mở tất cả các tập tin trong một thư mục cùng một lúc, tùy chọn lọc theo một ảnh toàn cục.
# 32 Terminals Manager : Phần mở rộng để thiết lập nhiều terminal cùng một lúc, hoặc chỉ chạy một số lệnh. Đây thực sự là phần mở rộng đầu tiên của tôi! Nếu bạn sử dụng thiết bị đầu cuối ở tất cả các bạn nên kiểm tra này ra, nó là khá lớn.
Phew! Phải mất một lúc. Fun bit của trivia: Tôi nghĩ rằng tôi có tài khoản với hầu hết các phần mở rộng được công bố trong Marketplace ngay sau khi Microsoft, ít nhất là nếu có ai đó với nhiều phần mở rộng xuất bản tôi đã không tìm thấy anh ta / cô ấy. Errata Corrige: Greg đã tạo thêm 2 phần mở rộng hơn tôi, tôi phải trở lại làm việc!
Quản lý tiện ích mở rộng
Quản lý nhiều kho lưu trữ có thể là một thách thức, đây là cách tôi đang thực hiện nó.
Repetitive commits
Sớm hay muộn bạn sẽ muốn thay đổi một cái gì đó trong tất cả các kho lưu trữ của bạn, điều đó có nghĩa là làm cơ bản cùng một cam kết trên nhiều kho lưu trữ, được nhàm chán một cách nhanh chóng.
Để tự động hóa các loại tác vụ này, tôi đã thực hiện tự động , một công cụ để thực hiện lệnh trên nhiều kho lưu trữ.
Tôi tiếp tục tìm cách sử dụng cho nó, chỉ gần đây tôi đã sử dụng nó để thực hiện các thay đổi sau trên tất cả các kho lưu trữ của tiện ích mở rộng của tôi:
- Kết hợp với
webpack: Tôi thấy thời gian khởi động được cải thiện lên đến ~ 80%. - Bỏ qua
package-lock.json: Nó chỉ là tiếng ồn trong lịch sử cam kết của tôi, đọc lý do của Sindre Sorhus vì bỏ qua nó ở đây . - Cập nhật
tsconfig.jsonđể xuất mã hiện đại: các chức năng không đồng bộ, mà tôi sử dụng khá nhiều, được chuyển thành mã chậm khi phiên bản đích<= es5và vì VSCode được vận chuyển với phiên bản Node.js hiện đại, không cần thiết. - Gỡ bỏ TSLint : Tôi nhận thấy tôi về cơ bản bỏ qua đầu ra của nó, vì vậy tôi loại bỏ hỗ trợ cho linting nói chung.
- Sử dụng logo hi-res trong readme: sử dụng logo hi-res trong readme thay vì 128x128 tôi đã sử dụng trước khi đóng góp cho readme tốt hơn, tiếc là tôi không có logo đặc biệt tốt nhưng đó là một câu chuyện khác :)
Bạn có thể xem cách thực hiện 5 thay đổi này, nhưng trên 33 vị trí lưu trữ, tăng lên nhanh chóng.
Đồng bộ hóa mô tả và từ khóa với GitHub
Đây là điều mà người ta không có làm, nhưng nó sẽ được tốt đẹp nếu có một công cụ thực hiện điều này cho bạn. May mắn là tự động và lệnh autogit-command-github-sync có thể thực hiện điều đó:
Báo cáo
Ngay sau khi thực hiện một vài phần mở rộng đầu tiên, tôi đã trở nên quan tâm đến việc biết có bao nhiêu lượt tải xuống mới mà họ nhận được. Bạn có thể xem tất cả các tiện ích của mình trong một trang, ở đây bạn có thể tìm thấy ví dụ của tôi, nhưng điều đó không thực sự giải quyết được sự cố nếu bạn không nhớ số lượng tiện ích mở rộng của mình đã có thời gian trước đó bạn đã kiểm tra. Đây là lý do tại sao tôi đã thực hiện rssa , một công cụ cho bạn biết khi nào mọi thứ thay đổi. Bạn có thể theo dõi bất kỳ thứ gì có thể truy cập được bằng URL với nó.
Nó sẽ không tuyệt vời để có bảng xếp hạng quá? Tôi chưa xuất bản công cụ này, nhưng tận dụng lịch sử của rssa chúng tôi có thể tạo biểu đồ, đây là biểu đồ về số lượt tải xuống của Todo + :
Đôi khi có thể có phần mở rộng với một triệu lượt tải xuống chỉ bằng cách đẩy nhiều bản cập nhật, đó là một trong những vấn đề của Thị trường.
