Hướng dẫn how do i enable autocomplete vs code in html? - làm cách nào để bật tính năng tự động điền so với mã trong html?

IntelliSense là một thuật ngữ chung cho các tính năng chỉnh sửa mã khác nhau bao gồm: Hoàn thành mã, thông tin tham số, thông tin nhanh và danh sách thành viên. Các tính năng IntelliSense đôi khi được gọi bởi các tên khác như "Hoàn thành mã", "Hỗ trợ nội dung" và "Gợi ý mã".

IntelliSense cho ngôn ngữ lập trình của bạn

Visual Studio Code IntelliSense được cung cấp cho JavaScript, TypeScript, JSON, HTML, CSS, SCSS và ít ra khỏi hộp. Mã VS hỗ trợ hoàn thành dựa trên từ cho bất kỳ ngôn ngữ lập trình nào nhưng cũng có thể được cấu hình để có Intellisense phong phú hơn bằng cách cài đặt một phần mở rộng ngôn ngữ.

Dưới đây là các phần mở rộng ngôn ngữ phổ biến nhất trên thị trường. Chọn một gạch mở rộng bên dưới để đọc mô tả và đánh giá để quyết định tiện ích mở rộng nào là tốt nhất cho bạn.

Tính năng IntelliSense

VS Code Intellisense Các tính năng được cung cấp bởi một dịch vụ ngôn ngữ. Một dịch vụ ngôn ngữ cung cấp hoàn thành mã thông minh dựa trên ngữ nghĩa ngôn ngữ và phân tích mã nguồn của bạn. Nếu một dịch vụ ngôn ngữ biết có thể hoàn thành, các đề xuất Intellisense sẽ bật lên khi bạn gõ. Nếu bạn tiếp tục gõ các ký tự, danh sách các thành viên [biến, phương thức, v.v.] được lọc chỉ bao gồm các thành viên chứa các ký tự được đánh máy của bạn. Nhấn Tab hoặc Enter sẽ chèn thành viên đã chọn.Tab or Enter will insert the selected member.

Bạn có thể kích hoạt Intellisense trong bất kỳ cửa sổ trình soạn thảo nào bằng cách nhập ⌃space [Windows, Linux Ctrl+Space] hoặc bằng cách nhập ký tự kích hoạt [chẳng hạn như ký tự dấu chấm [.] Trong JavaScript].⌃Space [Windows, Linux Ctrl+Space] or by typing a trigger character [such as the dot character [.] in JavaScript].

Mẹo: Các tiện ích đề xuất hỗ trợ lọc Camelcase, có nghĩa là bạn có thể nhập các chữ cái được đặt trên trong một tên phương thức để giới hạn các đề xuất. Ví dụ: "CRA" sẽ nhanh chóng đưa ra "createdApplication". The suggestions widget supports CamelCase filtering, meaning you can type the letters which are upper cased in a method name to limit the suggestions. For example, "cra" will quickly bring up "createApplication".

Nếu bạn thích, bạn có thể tắt Intellisense trong khi bạn gõ. Xem Tùy chỉnh IntelliSense bên dưới để tìm hiểu cách vô hiệu hóa hoặc tùy chỉnh các tính năng IntelliSense của Code.

Như được cung cấp bởi dịch vụ ngôn ngữ, bạn có thể thấy thông tin nhanh cho từng phương thức bằng cách nhấn ⌃space [Windows, Linux Ctrl+Space] hoặc nhấp vào biểu tượng thông tin. Các tài liệu đi kèm cho phương pháp bây giờ sẽ mở rộng sang một bên. Tài liệu mở rộng sẽ ở lại như vậy và sẽ cập nhật khi bạn điều hướng danh sách. Bạn có thể đóng cái này bằng cách nhấn một lần nữa [Windows, Linux Ctrl+Space] hoặc bằng cách nhấp vào biểu tượng đóng.quick info for each method by either pressing ⌃Space [Windows, Linux Ctrl+Space] or clicking the info icon. The accompanying documentation for the method will now expand to the side. The expanded documentation will stay so and will update as you navigate the list. You can close this by pressing ⌃Space [Windows, Linux Ctrl+Space] again or by clicking on the close icon.

Sau khi chọn một phương thức, bạn được cung cấp thông tin tham số.parameter info.

Khi áp dụng, một dịch vụ ngôn ngữ sẽ xuất hiện các loại cơ bản trong chữ ký thông tin và phương thức nhanh. Trong hình trên, bạn có thể thấy một số loại any. Bởi vì JavaScript là động và không cần hoặc thực thi các loại, any cho thấy rằng biến có thể thuộc bất kỳ loại nào.

Các loại hoàn thành

Mã JavaScript dưới đây minh họa sự hoàn thành IntelliSense. Intellisense đưa ra cả đề xuất suy luận và định danh toàn cầu của dự án. Các biểu tượng được suy ra được trình bày đầu tiên, tiếp theo là các định danh toàn cầu [hiển thị bằng biểu tượng từ].

VS Code Intellisense cung cấp các loại hoàn thành khác nhau, bao gồm các đề xuất máy chủ ngôn ngữ, đoạn trích và hoàn thành văn bản dựa trên từ đơn giản.

Biểu tượngTênLoại ký hiệu
Phương pháp và chức năngmethod, function, constructor
Biếnvariable
Lĩnh vực________số 8
Loại tham sốtypeParameter
Hằng số
[
  {
    "key": "ctrl+space",
    "command": "editor.action.triggerSuggest",
    "when": "editorHasCompletionItemProvider && editorTextFocus && !editorReadonly"
  },
  {
    "key": "ctrl+space",
    "command": "toggleSuggestionDetails",
    "when": "editorTextFocus && suggestWidgetVisible"
  },
  {
    "key": "ctrl+alt+space",
    "command": "toggleSuggestionFocus",
    "when": "editorTextFocus && suggestWidgetVisible"
  }
]
0
Các lớp học
[
  {
    "key": "ctrl+space",
    "command": "editor.action.triggerSuggest",
    "when": "editorHasCompletionItemProvider && editorTextFocus && !editorReadonly"
  },
  {
    "key": "ctrl+space",
    "command": "toggleSuggestionDetails",
    "when": "editorTextFocus && suggestWidgetVisible"
  },
  {
    "key": "ctrl+alt+space",
    "command": "toggleSuggestionFocus",
    "when": "editorTextFocus && suggestWidgetVisible"
  }
]
1
Giao diện
[
  {
    "key": "ctrl+space",
    "command": "editor.action.triggerSuggest",
    "when": "editorHasCompletionItemProvider && editorTextFocus && !editorReadonly"
  },
  {
    "key": "ctrl+space",
    "command": "toggleSuggestionDetails",
    "when": "editorTextFocus && suggestWidgetVisible"
  },
  {
    "key": "ctrl+alt+space",
    "command": "toggleSuggestionFocus",
    "when": "editorTextFocus && suggestWidgetVisible"
  }
]
2
cấu trúc
[
  {
    "key": "ctrl+space",
    "command": "editor.action.triggerSuggest",
    "when": "editorHasCompletionItemProvider && editorTextFocus && !editorReadonly"
  },
  {
    "key": "ctrl+space",
    "command": "toggleSuggestionDetails",
    "when": "editorTextFocus && suggestWidgetVisible"
  },
  {
    "key": "ctrl+alt+space",
    "command": "toggleSuggestionFocus",
    "when": "editorTextFocus && suggestWidgetVisible"
  }
]
3
Sự kiện
[
  {
    "key": "ctrl+space",
    "command": "editor.action.triggerSuggest",
    "when": "editorHasCompletionItemProvider && editorTextFocus && !editorReadonly"
  },
  {
    "key": "ctrl+space",
    "command": "toggleSuggestionDetails",
    "when": "editorTextFocus && suggestWidgetVisible"
  },
  {
    "key": "ctrl+alt+space",
    "command": "toggleSuggestionFocus",
    "when": "editorTextFocus && suggestWidgetVisible"
  }
]
4
Người vận hành
[
  {
    "key": "ctrl+space",
    "command": "editor.action.triggerSuggest",
    "when": "editorHasCompletionItemProvider && editorTextFocus && !editorReadonly"
  },
  {
    "key": "ctrl+space",
    "command": "toggleSuggestionDetails",
    "when": "editorTextFocus && suggestWidgetVisible"
  },
  {
    "key": "ctrl+alt+space",
    "command": "toggleSuggestionFocus",
    "when": "editorTextFocus && suggestWidgetVisible"
  }
]
5
Mô -đun
[
  {
    "key": "ctrl+space",
    "command": "editor.action.triggerSuggest",
    "when": "editorHasCompletionItemProvider && editorTextFocus && !editorReadonly"
  },
  {
    "key": "ctrl+space",
    "command": "toggleSuggestionDetails",
    "when": "editorTextFocus && suggestWidgetVisible"
  },
  {
    "key": "ctrl+alt+space",
    "command": "toggleSuggestionFocus",
    "when": "editorTextFocus && suggestWidgetVisible"
  }
]
6
Thuộc tính và thuộc tính
[
  {
    "key": "ctrl+space",
    "command": "editor.action.triggerSuggest",
    "when": "editorHasCompletionItemProvider && editorTextFocus && !editorReadonly"
  },
  {
    "key": "ctrl+space",
    "command": "toggleSuggestionDetails",
    "when": "editorTextFocus && suggestWidgetVisible"
  },
  {
    "key": "ctrl+alt+space",
    "command": "toggleSuggestionFocus",
    "when": "editorTextFocus && suggestWidgetVisible"
  }
]
7
Giá trị và liệt kê
[
  {
    "key": "ctrl+space",
    "command": "editor.action.triggerSuggest",
    "when": "editorHasCompletionItemProvider && editorTextFocus && !editorReadonly"
  },
  {
    "key": "ctrl+space",
    "command": "toggleSuggestionDetails",
    "when": "editorTextFocus && suggestWidgetVisible"
  },
  {
    "key": "ctrl+alt+space",
    "command": "toggleSuggestionFocus",
    "when": "editorTextFocus && suggestWidgetVisible"
  }
]
8,
[
  {
    "key": "ctrl+space",
    "command": "editor.action.triggerSuggest",
    "when": "editorHasCompletionItemProvider && editorTextFocus && !editorReadonly"
  },
  {
    "key": "ctrl+space",
    "command": "toggleSuggestionDetails",
    "when": "editorTextFocus && suggestWidgetVisible"
  },
  {
    "key": "ctrl+alt+space",
    "command": "toggleSuggestionFocus",
    "when": "editorTextFocus && suggestWidgetVisible"
  }
]
9
Người giới thiệuany0
Từ khóaany1
Các tập tinany2
Thư mụcany3
Màu sắcany4
Đơn vịany5
Tiền tố đoạn tríchany6
Từ ngữany7

Tùy chỉnh IntelliSense

Bạn có thể tùy chỉnh trải nghiệm IntelliSense của mình trong cài đặt và ràng buộc chính.

Cài đặt

Các cài đặt được hiển thị bên dưới là các cài đặt mặc định. Bạn có thể thay đổi các cài đặt này trong tệp any8 của mình như được mô tả trong cài đặt người dùng và không gian làm việc.

{
    // Controls if quick suggestions should show up while typing
    "editor.quickSuggestions": {
        "other": true,
        "comments": false,
        "strings": false
    },

     // Controls whether suggestions should be accepted on commit characters. For example, in JavaScript, the semi-colon [`;`] can be a commit character that accepts a suggestion and types that character.
    "editor.acceptSuggestionOnCommitCharacter": true,

    // Controls if suggestions should be accepted on 'Enter' - in addition to 'Tab'. Helps to avoid ambiguity between inserting new lines or accepting suggestions. The value 'smart' means only accept a suggestion with Enter when it makes a textual change
    "editor.acceptSuggestionOnEnter": "on",

    // Controls the delay in ms after which quick suggestions will show up.
    "editor.quickSuggestionsDelay": 10,

    // Controls if suggestions should automatically show up when typing trigger characters
    "editor.suggestOnTriggerCharacters": true,

    // Controls if pressing tab inserts the best suggestion and if tab cycles through other suggestions
    "editor.tabCompletion": "off",

    // Controls whether sorting favours words that appear close to the cursor
    "editor.suggest.localityBonus": true,

    // Controls how suggestions are pre-selected when showing the suggest list
    "editor.suggestSelection": "first",

    // Enable word based suggestions
    "editor.wordBasedSuggestions": true,

    // Enable parameter hints
    "editor.parameterHints.enabled": true,
}

Hoàn thành tab

Trình chỉnh sửa hỗ trợ "Hoàn thành tab" chèn hoàn thành phù hợp nhất khi nhấn Tab. Điều này hoạt động bất kể tiện ích đề xuất hiển thị hay không. Ngoài ra, nhấn Tab sau khi chèn một đề xuất sẽ chèn đề xuất tốt nhất tiếp theo.Tab. This works regardless of the suggest widget showing or not. Also, pressing Tab after inserting a suggestions will insert the next best suggestion.

Theo mặc định, hoàn thành tab bị vô hiệu hóa. Sử dụng cài đặt any9 để kích hoạt nó. Những giá trị này tồn tại:

  • any0 - [mặc định] Hoàn thành tab bị vô hiệu hóa.
  • any1 - Hoàn thành tab được bật cho tất cả các đề xuất và các yêu cầu lặp lại chèn đề xuất tốt nhất tiếp theo.
  • any2 - Hoàn thành tab chỉ chèn các đoạn tĩnh mà tiền tố khớp với tiền tố dòng hiện tại.

Tiền thưởng địa phương

Việc sắp xếp các đề xuất phụ thuộc vào thông tin mở rộng và vào mức độ chúng phù hợp với từ hiện tại bạn đang gõ. Ngoài ra, bạn có thể yêu cầu trình chỉnh sửa tăng các đề xuất xuất hiện gần vị trí con trỏ hơn, sử dụng cài đặt any3.

Trong các hình ảnh trên, bạn có thể thấy rằng any4, any5 và any6 được sắp xếp dựa trên phạm vi mà chúng xuất hiện [vòng lặp, chức năng, tệp].

Lựa chọn gợi ý

Theo mặc định, mã VS đã chọn trước đề xuất đầu tiên trong danh sách đề xuất. Ví dụ, nếu bạn thích hành vi khác nhau để luôn chọn mục được sử dụng gần đây nhất trong danh sách đề xuất, bạn có thể sử dụng cài đặt any7.

Các giá trị any7 có sẵn là:

  • any9 - [mặc định] Luôn chọn mục danh sách hàng đầu.
  • method0 - Mục đã sử dụng trước đó được chọn trừ khi tiền tố [nhập để chọn] chọn một mục khác.
  • method1 - Chọn các mục dựa trên các tiền tố trước đó đã hoàn thành các đề xuất đó.

Chọn mục được sử dụng gần đây nhất là rất hữu ích vì bạn có thể nhanh chóng chèn cùng một lần hoàn thành nhiều lần.

"Loại để chọn" có nghĩa là tiền tố hiện tại [gần bằng văn bản bên trái của con trỏ] được sử dụng để lọc và sắp xếp các đề xuất. Khi điều này xảy ra và khi kết quả của nó khác với kết quả của method0, nó sẽ được ưu tiên.

Khi sử dụng tùy chọn cuối cùng, method1, VS Code sẽ nhớ mục nào đã được chọn cho một tiền tố cụ thể [văn bản một phần]. Ví dụ: nếu bạn đã nhập method4 và sau đó chọn method5, lần sau bạn đã nhập method4, đề xuất method5 sẽ được chọn trước. Điều này cho phép bạn nhanh chóng ánh xạ các tiền tố khác nhau cho các đề xuất khác nhau, ví dụ method4 -> method5 và function0 -> function1.

Đoạn trích trong đề xuất

Theo mặc định, mã VS hiển thị các đoạn trích và các đề xuất hoàn thành trong một tiện ích. Bạn có thể kiểm soát hành vi với cài đặt function2. Để xóa các đoạn trích khỏi tiện ích đề xuất, hãy đặt giá trị thành function3. Nếu bạn muốn xem đoạn trích, bạn có thể chỉ định thứ tự liên quan đến các đề xuất; ở phía trên [function4], ở phía dưới [function5] hoặc nội tuyến được đặt hàng theo thứ tự bảng chữ cái [function6]. Mặc định là function6.

Tổ hợp phím

Các ràng buộc khóa được hiển thị dưới đây là các ràng buộc khóa mặc định. Bạn có thể thay đổi chúng trong tệp function8 của mình như được mô tả trong các ràng buộc chính.

Lưu ý: Có nhiều ràng buộc quan trọng hơn liên quan đến IntelliSense. Mở các phím tắt bàn phím mặc định [Tệp> Tùy chọn> phím tắt] và tìm kiếm "Đề xuất". There are many more key bindings relating to IntelliSense. Open the Default Keyboard Shortcuts [File > Preferences > Keyboard Shortcuts] and search for "suggest".

[
  {
    "key": "ctrl+space",
    "command": "editor.action.triggerSuggest",
    "when": "editorHasCompletionItemProvider && editorTextFocus && !editorReadonly"
  },
  {
    "key": "ctrl+space",
    "command": "toggleSuggestionDetails",
    "when": "editorTextFocus && suggestWidgetVisible"
  },
  {
    "key": "ctrl+alt+space",
    "command": "toggleSuggestionFocus",
    "when": "editorTextFocus && suggestWidgetVisible"
  }
]

Xử lý sự cố

Nếu bạn thấy Intellisense đã ngừng hoạt động, dịch vụ ngôn ngữ có thể không chạy. Hãy thử khởi động lại mã VS và điều này sẽ giải quyết vấn đề. Nếu bạn vẫn còn thiếu các tính năng IntelliSense sau khi cài đặt mở rộng ngôn ngữ, hãy mở một vấn đề trong kho lưu trữ của phần mở rộng ngôn ngữ.

Mẹo: Để định cấu hình và khắc phục sự cố JavaScript IntelliSense, hãy xem tài liệu JavaScript. For configuring and troubleshooting JavaScript IntelliSense, see the JavaScript documentation.

Một tiện ích mở rộng ngôn ngữ cụ thể có thể không hỗ trợ tất cả các tính năng IntelliSense của mã VS. Xem lại ReadMe của tiện ích mở rộng để tìm hiểu những gì được hỗ trợ. Nếu bạn nghĩ rằng có vấn đề với phần mở rộng ngôn ngữ, bạn thường có thể tìm thấy kho lưu trữ vấn đề cho một phần mở rộng thông qua thị trường mã VS. Điều hướng đến trang chi tiết của tiện ích mở rộng và chọn liên kết hỗ trợ.Support link.

Bước tiếp theo

Intellisense chỉ là một trong những tính năng mạnh mẽ của VS Code. Đọc để tìm hiểu thêm:

  • JavaScript - Tận dụng tối đa sự phát triển JavaScript của bạn, bao gồm cả cấu hình IntelliSense.
  • Node.js - Xem một ví dụ về IntelliSense trong hành động trong Walkthrough Node.js.
  • Gỡ lỗi - Tìm hiểu cách thiết lập gỡ lỗi cho ứng dụng của bạn.
  • Tạo tiện ích mở rộng ngôn ngữ - Tìm hiểu cách tạo các tiện ích mở rộng thêm IntelliSense cho các ngôn ngữ lập trình mới.

Câu hỏi thường gặp

Tại sao tôi không nhận được bất kỳ đề xuất nào?

Điều này có thể được gây ra bởi một loạt các lý do. Đầu tiên, hãy thử khởi động lại mã vs. Nếu vấn đề vẫn còn, hãy tham khảo tài liệu của phần mở rộng ngôn ngữ. Để khắc phục sự cố cụ thể của JavaScript, vui lòng xem chủ đề ngôn ngữ JavaScript.

Tại sao tôi không thấy phương pháp và đề xuất biến?

Vấn đề này được gây ra bởi các tệp khai báo loại [đánh máy] bị thiếu trong JavaScript. Bạn có thể kiểm tra xem gói tệp khai báo loại có khả dụng cho một thư viện cụ thể bằng cách sử dụng trang web của Kindearch không. Có thêm thông tin về vấn đề này trong chủ đề ngôn ngữ JavaScript. Đối với các ngôn ngữ khác, vui lòng tham khảo tài liệu của tiện ích mở rộng.

11/2/2022

Bài Viết Liên Quan

Chủ Đề