Trang chủ » Mã hóa » Cách thêm đoạn mã tùy chỉnh vào nguyên tử
Cách thêm đoạn mã tùy chỉnh vào nguyên tử
Không phải ngẫu nhiên mà Nguyên tử, trình chỉnh sửa mã nguồn được tạo bởi Github là phổ biến trong cộng đồng phát triển web. Nó không chỉ dễ dàng mở rộng với hàng ngàn Gói nguyên tử và có hỗ trợ ngôn ngữ rộng, nhưng hầu hết mọi phần của nó là tùy chỉnh bởi người dùng.
Bằng cách tận dụng nguyên tử của Tính năng đoạn trích, bạn có thể làm cho công việc mã hóa của bạn hiệu quả hơn, như tái sử dụng đoạn mã định kỳ bạn có thể giảm phần lặp đi lặp lại trong công việc của bạn. Trong bài đăng này, tôi sẽ chỉ cho bạn cách bạn có thể sử dụng đoạn mã tích hợp của Atom, và tạo đoạn mã tùy chỉnh của riêng bạn.
Sử dụng đoạn mã tích hợp
Theo mặc định, Atom đi kèm với đoạn mã tích hợp, mỗi cái là ràng buộc vào một phạm vi thuộc một loại tập tin nhất định. Ví dụ, nếu bạn đang làm việc trên một tệp với .js tiện ích mở rộng, chỉ các đoạn thuộc phạm vi JavaScript sẽ có sẵn cho tệp đó.
Nhìn tất cả các đoạn có sẵn đối với loại tệp hiện tại của bạn, nhấn Alt + Shift + S. Nếu bạn chọn một đoạn trích từ danh sách thả xuống và nhấp vào nó, Atom sẽ chèn đoạn mã đầy đủ vào trình chỉnh sửa của bạn mà không gặp rắc rối nào nữa.
Nếu bạn đã biết về các tùy chọn, bạn không nhất thiết phải tải toàn bộ danh sách. Khi bạn bắt đầu gõ, Atom bật lên hộp kết quả tự động hoàn thành lên, có chứa các đoạn mã có sẵn thuộc phạm vi nhất định và chuỗi bạn đã nhập cho đến nay.
Ví dụ: nếu bạn gõ h nhân vật thành một .html tệp, danh sách thả xuống với tất cả các đoạn mã HTML tích hợp bắt đầu bằng h sẽ xuất hiện.
Bằng cách nhấp vào bất kỳ tùy chọn nào, Atom sẽ dán thẻ HTML đầy đủ (ví dụ. ) và định vị con trỏ trong thẻ bắt đầu và đóng.
Nếu bạn không muốn làm phiền với danh sách thả xuống, bạn có thể đạt được kết quả tương tự bằng cách nhập h1, và nhấn Tab hoặc Enter - cả hai phím này chèn đoạn mã đầy đủ thuộc về tiền tố của đoạn trích.
Thêm đoạn mã tùy chỉnh của bạn
1. Tìm tập tin cấu hình
Để thêm đoạn mã tùy chỉnh của riêng bạn vào Atom, trước tiên, bạn cần tìm tập tin cấu hình được gọi là đoạn trích.cson đó là một Ký hiệu đối tượng CoffeeScript tập tin.
Bấm vào Tập tin> Đoạn trích menu ở thanh trên cùng và Atom sẽ mở đoạn trích.cson tệp mà bạn có thể thêm đoạn mã tùy chỉnh của riêng mình.
2. Tìm đúng phạm vi
Bạn sẽ cần bốn điều để thêm đoạn mã tùy chỉnh của bạn:
Các tên của phạm vi
Các tên của đoạn trích
Các tiếp đầu ngữ Nó sẽ hoạt động như tay cầm của đoạn trích
Các cơ thể của đoạn trích
Tên, tiền tố và phần thân của đoạn trích (2-4) chỉ phụ thuộc vào bạn, tuy nhiên bạn phải tìm tên của phạm vi (1) trước khi thêm đoạn tùy chỉnh của bạn.
Để tìm phạm vi bạn cần, nhấp vào Tệp> Cài đặt menu trong thanh menu trên cùng, sau đó tìm Gói tab trong số các Cài đặt. Tại đây, hãy tìm kiếm phạm vi bạn cần, ví dụ: nếu bạn muốn thêm đoạn mã vào ngôn ngữ HTML, hãy nhập HTML vào thanh tìm kiếm.
Bấm vào gói hỗ trợ ngôn ngữ của ngôn ngữ đã chọn và mở Cài đặt riêng. Trong sô Cài đặt ngữ pháp, bạn có thể nhanh chóng tìm thấy tên của phạm vi, như bạn có thể thấy trên ảnh chụp màn hình bên dưới.
Dưới đây là một số phạm vi bạn có thể muốn sử dụng trong các dự án Atom của mình:
Văn bản thô: .văn bản
HTML: .text.html.basic
CSS: .nguồn.css
Sass: .nguồn.sass
ÍT HƠN: .nguồn.css.less
JavaScript: .source.js
PHP: .text.html.php
Con trăn .mã nguồn
Java: .nguồn.java
Đừng quên rằng bạn sẽ cần phải thêm một dấu chấm (.) trước tên của phạm vi để sử dụng nó trong đoạn trích.cson tập tin.
3. Tạo các đoạn mã một dòng
Để tạo ra một đoạn mã đơn, bạn cần thêm phạm vi, tên, tiền tố và phần thân của đoạn mã vào đoạn trích.cson tập tin, sử dụng cú pháp sau:
'.text.html.basic': 'Tiêu đề widget': 'tiền tố': 'wti "body': ''
Đoạn ví dụ này thêm một gắn thẻ Tên tiện ích lớp đến phạm vi HTML. Bạn có thể thêm bất kỳ đoạn mã đơn dòng nào khác vào trình soạn thảo Atom của mình theo cú pháp này.
Sau khi lưu tệp cấu hình, bất cứ khi nào bạn gõ tiền tố và nhấn phím Tab, Atom sẽ dán phần thân đoạn mã vào trình soạn thảo mã của bạn. Tên của đoạn trích (trong ví dụ Tên tiện ích) sẽ được hiển thị trong hộp kết quả tự động hoàn thành.
4. Tạo đoạn mã nhiều dòng
Đoạn mã nhiều dòng sử dụng một cú pháp khác nhau một chút. Bạn cần thêm dữ liệu giống như cho đoạn mã một dòng - phạm vi, tên, tiền tố và phần thân của đoạn mã.
Điều khác biệt ở đây là bạn cần đặt cơ thể đoạn trích trong một cặp "" " (ba dấu ngoặc kép).
'.text.html.basic': 'Liên kết hình ảnh': 'tiền tố': 'iml "cơ thể':" "" "" "
Nếu bạn muốn thêm nhiều hơn một đoạn tùy chỉnh vào cùng một phạm vi, thêm tên của phạm vi chỉ một lần, sau đó liệt kê từng đoạn một:
'.text.html.basic': 'Tiêu đề widget': 'tiền tố': 'wti "body': '"Liên kết hình ảnh ':' tiền tố ':' iml" cơ thể ': "" " "" "
5. Thêm điểm dừng tab
Bạn có thể tạo điều kiện thuận lợi hơn cho việc sử dụng các đoạn mã tùy chỉnh của mình bằng cách thêm tab dừng đến cơ thể đoạn trích. Dừng tab cho biết các điểm mà người dùng có thể điều hướng bằng cách sử dụng phím Tab. Với các điểm dừng tab, bạn có thể tiết kiệm thời gian điều hướng trong văn bản yêu cầu.
Bạn có thể thêm các điểm dừng tab sử dụng $ 1, $ 2, $ 3, Ngày cú pháp. Nguyên tử sẽ định vị con trỏ đến vị trí nó tìm thấy $ 1, sau đó bạn có thể nhảy đến $ 2 với phím Tab, sau đó để $ 3, và v.v..
'.text.html.basic': 'Liên kết hình ảnh': 'tiền tố': 'iml "cơ thể':" "" "" "
6. Thêm tham số tùy chọn
Nguyên tử cho phép bạn thêm thông tin vào đoạn trích của bạn bằng cách sử dụng tham số tùy chọn. Tính năng này có thể hữu ích nếu người khác cũng sử dụng trình chỉnh sửa của bạn và bạn muốn cho họ biết mục đích của đoạn trích hoặc nếu bạn có đoạn mã tùy chỉnh phức tạp đến mức bạn cần thêm ghi chú cho họ.
Các giá trị của các tham số tùy chọn là hiển thị trong hộp kết quả tự động hoàn thành xuất hiện khi bạn bắt đầu nhập tiền tố. Trong ví dụ dưới đây, tôi đã thêm một mô tả & a Hơn… liên kết đến trước Tên tiện ích đoạn trích tùy chỉnh:
'.text.html.basic': 'Tiêu đề widget': 'tiền tố': 'wti "body': '"description ':' Bạn có thể thêm tiêu đề tiện ích với đoạn mã này vào tiện ích thanh bên." descriptionMoreURL ':' http://hongkiat.com '
Khi người dùng bắt đầu nhập tiền tố wti, thông tin bổ sung (mô tả + liên kết) sẽ được hiển thị ở dưới cùng của hộp kết quả tự động hoàn thành. Có một cái nhìn vào các thông số tùy chọn khác bạn có thể sử dụng để thêm thông tin bổ sung vào đoạn mã tùy chỉnh của mình.
