Cách tạo đoạn mã tùy chỉnh của riêng bạn ngay trong trình chỉnh sửa mã của bạn

Đoạn mã là một thuật ngữ lập trình đề cập đến một phần nhỏ của mã nguồn, mã máy hoặc văn bản có thể sử dụng lại được.

Đoạn mã giúp lập trình viên giảm thời gian nhập thông tin lặp lại trong khi viết mã. Đoạn mã là một tính năng trên hầu hết các trình soạn thảo văn bản, trình biên tập mã và IDE.

Trong hướng dẫn này, chúng ta sẽ học cách viết các đoạn mã tùy chỉnh của riêng mình.

Điều kiện tiên quyết

Đối với hướng dẫn này, tôi sẽ giả sử rằng bạn có thể viết một lượng lớn mã bằng ngôn ngữ mà bạn muốn tạo đoạn mã.

Và với điều đó đã được khẳng định …

quý cô nói chúng ta hãy bắt đầu

Tại sao các đoạn mã lại hữu ích

Khi tôi mới bắt đầu học cách viết mã, đoạn mã đầu tiên tôi từng sử dụng là Ctrl +! và nhập để có được một mẫu tài liệu HTML5. (Tôi nghi ngờ có ai đó biết cách viết điều đó bằng trái tim.) Thật tuyệt và tôi cảm thấy mình giống như một ninja lập mã.

(Tái bút: nếu bạn không muốn đọc câu chuyện phía sau và chỉ muốn đi sâu vào hướng dẫn, thì nhảy ngay vào nó.)

Khi tôi bắt đầu khám phá nhiều hơn về mã hóa, tôi đã tìm hiểu về các tiện ích mở rộng VSCode giúp viết mã nhanh hơn – cụ thể là các đoạn mã – và sau đó tôi tiếp tục tải xuống.

Tất cả đều diễn ra tốt đẹp cho đến khi tôi bắt đầu thường xuyên sử dụng các khung và thư viện trong các dự án của mình. Điều này liên quan đến việc tôi cố gắng nhớ cách liên kết tài liệu của mình với các gói của chúng và cũng sử dụng các biến và thiết lập lại CSS được cá nhân hóa.

Thêm vào đó, tôi luôn quên liên kết các bảng định kiểu của mình với các trang HTML của mình, khiến tôi mất một khoảng thời gian không hợp lý để tìm ra lý do tại sao các trang của tôi không được tạo kiểu chính xác. (Tôi vẫn quên làm như vậy bây giờ và sau đó.)

Điều đó khiến tôi nghĩ đến việc có các mẫu HTML và CSS được cá nhân hóa của tôi, những mẫu này sẽ có tất cả mã cơ sở mà tôi luôn sử dụng trong các dự án của mình.

Lúc đầu, tôi chỉ tạo các mẫu và lưu chúng trên hệ thống của mình để tôi có thể sao chép mã bất kỳ lúc nào tôi bắt đầu một dự án mới. Nhưng điều đó cũng trở nên căng thẳng và tôi muốn chỉ cần nhập một vài ký tự, nhấn enter và bùng nổ để các mẫu của tôi hiển thị trên màn hình của tôi. Và đó là khi tôi học về VsCode Code Snippets.

Tôi không biết nó được gọi là đoạn mã vào thời điểm đó, vì vậy tôi đã dành hơn 2 tuần để cố gắng tìm một công cụ có thể giúp tôi làm điều này và tôi gần như bỏ cuộc. Cho đến khi tôi tình cờ xem được video của Brad Travesty vào một buổi tối hàng ngày của tôi lang thang trên đường phố YouTube mà không chủ động tìm kiếm.

Đó là một chiếc phao cứu sinh và thỉnh thoảng tôi lại thêm các đoạn mã tùy chỉnh mới vào bộ sưu tập của mình. Bạn có thể xem các mẫu HTML và CSS được cá nhân hóa của tôi nơi đây.

Bạn có thể đã thường ước rằng bạn có một đoạn mã tùy chỉnh của một đoạn mã cụ thể mà bạn sử dụng mọi lúc nhưng không biết cách tạo hoặc tìm nó. Chà, không muốn nữa vì tôi sắp chỉ cho bạn cách dễ dàng tạo của riêng bạn.

Cách tạo đoạn mã tùy chỉnh

Tạo đoạn mã tùy chỉnh của riêng bạn khá dễ dàng. Và với sự trợ giúp của một công cụ khác được gọi là Trình tạo đoạn mã (mà tôi sẽ chỉ cho bạn cách sử dụng ngay sau đây), nó thậm chí còn trở nên dễ dàng hơn.

Bước 1: Kiểm tra xem trình chỉnh sửa của bạn có cho phép bạn tạo các đoạn mã tùy chỉnh hay không

Bạn có thể kiểm tra tài liệu trên trình soạn thảo mã của mình để tìm hiểu xem tính năng này có khả dụng hay không và cách truy cập nó.

Tôi đang sử dụng VsCode cho hướng dẫn này. Bạn có thể tải xuống nơi đây.

Để truy cập cài đặt này, bạn có thể nhấp vào biểu tượng cài đặt trên thanh bên và sau đó nhấp vào đoạn mã người dùng hoặc mở bảng lệnh bằng Cntr + shift + p trên Windows hoặc CMD + shift + p trên Mac, nhập “đoạn mã” và nhấp vào Tùy chọn: Định cấu hình Đoạn mã Người dùng.

Điều này sẽ cung cấp cho bạn một danh sách thả xuống với các lựa chọn ngôn ngữ khác nhau để bạn lựa chọn.

video1-open-code-snippet

Bước 2: Quyết định Phạm vi đoạn mã của bạn

Bạn có thể tạo đoạn mã toàn cầu mà bạn có thể sử dụng trên tất cả các ngôn ngữ hoặc tạo đoạn mã cục bộ dành cho một ngôn ngữ cụ thể.

Vì vậy, từ menu thả xuống, bạn có thể thấy Tệp đoạn mã toàn cầu mới và sau đó là một loạt các ngôn ngữ theo thứ tự bảng chữ cái.

Cuộn đến ngôn ngữ bạn muốn viết đoạn mã của mình và nhấp vào ngôn ngữ đó (hoặc chọn Tệp đoạn mã toàn cầu mới nếu bạn muốn sử dụng các đoạn mã của mình bằng nhiều ngôn ngữ).

Nếu bạn đã chọn một ngôn ngữ cụ thể, chẳng hạn như HTML, tệp sẽ tự động mở. Nhưng nếu bạn chọn Đoạn mã toàn cầu, bạn sẽ được nhắc nhập tên của tệp đoạn mã trước khi nó mở ra.

Đối với cái này, tôi sẽ sử dụng Global Snippet.

video2-enter-snippet-name

Bước 3: Hiểu cú pháp

Cú pháp cho đoạn mã thực sự khá dễ dàng. Nó được viết ở định dạng JSON và mỗi tệp có thể chứa số lượng đoạn trích không giới hạn.

{
// Code Snippet 1
  "Snippet name": {
    "scope": "language1, language2" 
    "prefix": "trigger word 1",
    "body": ["your code snippet"],
    "description": "description of the code"
  },
// Code Snippet 2
  "Snippet name": {
    "scope": "language1, language2" 
    "prefix": ["trigger word 1, trigger word 2"],
    "body": ["your code snippet"],
    "description": "description of the code"
  }
}

Hãy xem điều gì đang xảy ra trong đoạn mã này:

Tên đoạn mã

Tên đoạn mã là tên của đoạn mã. Nó cũng là những gì sẽ được hiển thị qua IntelliSense nếu không có mô tả nào được cung cấp.

Phạm vi

Điều này xác định những ngôn ngữ nào được phép sử dụng đoạn mã. Nhập tên của (các) ngôn ngữ được phân tách bằng dấu phẩy. Nếu bạn để trống hoặc bỏ qua, đoạn mã có thể được truy cập bằng bất kỳ ngôn ngữ nào. Phần này chỉ được bao gồm trong Global Snippets, vì các tệp Local Snippets đã có phạm vi cục bộ.

Tiếp đầu ngữ

Điều này mô tả một hoặc nhiều từ kích hoạt sẽ nhắc IntelliSense hiển thị đoạn mã.

Phần thân

Đây có thể là một chuỗi nếu nó là mã một dòng hoặc một mảng chuỗi nếu nó là mã nhiều dòng.

Sự miêu tả

Điều này mô tả đoạn mã và tác dụng của đoạn mã. Nếu điều này bị bỏ qua, tên của đoạn mã sẽ được sử dụng thay thế.

Đoạn mã ví dụ 1:

{
// log to console
  "Print to console": {
    "scope": "javascript, typescript",
    "prefix": "log",
    "body": "console.log();",
    "description": "Log output to console"
  }
}

Từ ví dụ trên, tên đoạn mã của chúng tôi là In ra bảng điều khiểnvà nó chỉ có thể được sử dụng trong Tệp JavaScript và TypeScript. Nếu bạn phải gõ khúc gỗ trong tệp JavaScript hoặc TypeScript, IntelliSense sẽ hiển thị nó cùng với mô tả Ghi đầu ra vào bảng điều khiển. Khi bạn chọn nó và nhấp vào enter, bạn sẽ thấy console.log () trên màn hình.

video3-log

Bước 4: Thêm các điểm dừng tab

Tabstops cho phép bạn di chuyển con trỏ trình chỉnh sửa bên trong đoạn mã. $ 1, $ 2, …, $ n chỉ định vị trí con trỏ mà nó sẽ di chuyển vào tuần tự khi bạn nhấn phím tab. $ 0 đại diện cho vị trí cuối cùng mà con trỏ dừng lại.

Đoạn mã ví dụ 2:

// named function
{
  "Named Function": {
    "scope": "javascript, typescript",
    "prefix": "nfn",
    "body": [
      "function $1($2){",
      "  $0",
      "}"
    ],
    "description": ""
  }
}

Trong ví dụ này, khi bạn nhập nfn, đoạn mã Hàm được đặt tên của chúng tôi sẽ hiển thị. Khi bạn chọn nó, bạn sẽ thấy đoạn mã của mình trên màn hình. Bạn cũng sẽ thấy rằng con trỏ bây giờ nằm ​​trước dấu ngoặc đơn thay vì ở cuối mã.

Nhập tên của chức năng, ví dụ: “GetUsers”, rồi nhấn nút tab. Bạn sẽ nhận thấy rằng con trỏ bây giờ đã di chuyển vào trong dấu ngoặc đơn.

Bạn có thể nhập tham số nếu nó có một hoặc và nhấn lại vào phím tab để di chuyển con trỏ đến điểm dừng tab tiếp theo nằm giữa dấu ngoặc nhọn nơi thân hàm của chúng ta sẽ đi đến.

vide04-tabstop

Lưu ý: Khi bạn đang viết mã nhiều dòng, bạn không thể sử dụng tab để thụt lề mã của mình theo cú pháp JSON. Bạn chỉ có thể sử dụng 2 dấu cách để thụt lề mã hoặc bất kỳ số lượng khoảng cách thụt lề nào bạn sử dụng để viết mã của mình.

Bước 5: Sử dụng Trình giữ chỗ

Đây là các điểm dừng Tab có giá trị. Chúng giúp người dùng dễ dàng xác định hoặc hiểu những gì họ phải nhập tại điểm dừng tab cụ thể đó.

Phần giữ chỗ sẽ tự động được đánh dấu để bạn có thể nhập ngay lập tức những gì bạn muốn thay thế nó.

Đoạn mã ví dụ 3:

// named function
{
  "Named Function": {
    "scope": "javascript, typescript",
    "prefix": "nfn",
    "body": [
      "function ${1:functionName}(${2:parameter}){",
      "  ${0:functionBody}",
      "}"
    ],
    "description": ""
  }
}

video5-chỗ dành sẵn

Bước 6: Tạo lựa chọn

Phần giữ chỗ có thể có các lựa chọn làm giá trị. Điều này có nghĩa là thay vì nhập giá trị của bạn, bạn có thể chọn từ một lựa chọn thả xuống.

Để tạo một giá trị, bạn viết các giá trị được phân tách bằng dấu phẩy giữa hai ký tự ống dẫn, ví dụ: $ {1 | một, hai, ba |}.

Đoạn mã ví dụ 4:

// array method
{
"Array Method": {
    "scope": "javascript, typescript",
    "prefix": "arrmth",
    "body": [
      "${1|forEach, map, filter, reduce|}((${2:item}) => {",
      "  $0",
      "})"
    ],
    "description": ""
  }
}

video6-lựa chọn

Tại đây, sau khi bạn nhập vào arrmth, chọn nó từ IntelliSense và nhấn enter. Điểm dừng tab đầu tiên sẽ là danh sách thả xuống các lựa chọn mảng để chọn. Điểm dừng tab tiếp theo là tham số và điểm dừng cuối cùng là mã hàm.

Trình tạo đoạn mã

Khi các đoạn mã của bạn bắt đầu phát triển về dòng và kích thước, việc nhập và tạo chúng trong trình soạn thảo mã của bạn sẽ trở nên khó khăn. Đây là nơi mà một trình tạo đoạn mã xuất hiện.

Trình tạo đoạn mã sẽ lấy mã thông thường của bạn và biến nó thành đoạn mã.

Tôi sẽ sử dụng Trình tạo đoạn mã cho hướng dẫn này. Với trình tạo đoạn mã cụ thể này, bạn có thể viết các đoạn mã cho VsCode, Sublime Text và Atom.

image1-đoạn mã-tạo

Cách sử dụng Trình tạo đoạn mã

bên trong sự miêu tả nhập, nhập tên của đoạn mã sẽ được sử dụng làm tên và mô tả của đoạn mã.

bên trong kích hoạt tab đầu vào, hãy nhập tiền tố của đoạn mã của bạn.

bên trong đoạn mã của bạn .. nhập, hãy nhập mã của bạn ở dạng tự nhiên như bạn làm mà không cần viết nó dưới dạng một mảng chuỗi.

Sau đó, bạn có thể thêm Tabstops, Trình giữ chỗ và Lựa chọn như đã giải thích ở trên.

Đoạn mã ví dụ 5:

//named function
function ${1:functionName}(${2: parameter}) {
  ${0:functionBody}
}

image2-arrow-function

Đoạn mã ví dụ 6:

//array method
${1|forEach, map, filter, reduce,|}((${2:item}) => {
 $0
)}

image3-array-method

Mã đoạn mã cuối cùng

{
  // log to console
  "Print to console": {
    "scope": "javascript, typescript",
    "prefix": "log",
    "body": "console.log();",
    "description": "Log output to console"
  },
  // named function
  "Named Function": {
    "scope": "javascript, typescript",
    "prefix": "nfn",
    "body": [
      "function ${1:functionName}(${2:parameter}){",
      "  ${0:functionBody}",
      "}"
    ],
    "description": ""
  },
  // array method
  "Array Method": {
    "scope": "javascript, typescript",
    "prefix": "arrmth",
    "body": [
      "${1|forEach, map, filter, reduce|}((${2:item}) => {",
      "  $0",
      "})"
    ],
    "description": ""
  }
}

Và đó là nó. Dễ dàng vắt chanh.

tóm tắt lại

Hãy tóm tắt lại. Chúng tôi đã học được rằng:

  • đoạn mã là một phần nhỏ của mã nguồn, mã máy hoặc văn bản có thể sử dụng lại giúp lập trình viên giảm thời gian nhập các mã lặp lại trong khi lập trình.
  • một tệp đoạn mã có thể chứa số lượng đoạn mã không giới hạn.
  • bạn có thể có một đoạn mã phạm vi cục bộ chỉ được sử dụng trong một tệp ngôn ngữ hoặc một đoạn mã phạm vi toàn cầu được sử dụng trong hai hoặc nhiều tệp ngôn ngữ.
  • các đoạn mã được viết theo cú pháp JSON.
  • bạn có thể thêm tab, trình giữ chỗ và lựa chọn vào các đoạn mã của mình.
  • bạn cũng có thể sử dụng trình tạo đoạn mã để tạo đoạn mã của mình.

Cảm ơn bạn đã đọc bài viết của tôi. Bạn có thể kết nối với tôi trên Twitter, LinkedIn hoặc là blog của tôi.

Tôi rất muốn biết liệu bạn có đang tạo các đoạn mã tùy chỉnh của riêng mình hay không và chúng có thể là gì. Và đừng ngại chia sẻ bài viết này với những người khác có thể thấy bài viết này hữu ích. Tạm biệt!

Mr Đậu vẫy tay chào tạm biệt

Tài nguyên

The source: https://nguyendiep.com
Category: SEO

Thanks for Reading

Enjoyed this post? Share it with your networks.

Get more stuff

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.

Thank you for subscribing.

Something went wrong.

Leave a Feedback!