Tôi đang sử dụng mã Visual Studio trên máy Mac để hoạt động trên các ứng dụng WordPress.
Có cách nào để làm cho Visual Studio Code nhận ra HTML và sử dụng các tính năng của nó [chủ yếu là tự động hoàn thành] bên trong các tệp PHP không?
Tôi đã tìm kiếm câu trả lời này trước đây nhưng chỉ cần được yêu cầu truy cập Cài đặt mã Visual Studio: File >> Preferences >> User Settings
// Place your settings in this file to overwrite the default settings
{
// Configure file associations to languages [e.g. "*.extension": "html"]. These have precedence over the default associations of the languages installed.
"files.associations": {"*.php": "html"}
}
Nhưng làm điều này làm cho bạn mất tất cả hỗ trợ PHP và tự động hoàn thành.
Tôi ước Microsoft sẽ nhận ra rằng các nhà phát triển PHP thường sử dụng PHP và HTML cùng nhau khi tạo các ứng dụng/trang web. Tôi rất thích sử dụng mã VS thay vì cơn bão PHP tuyệt vời nhưng đắt tiền nếu có thể.
Gama11
29,7K9 Huy hiệu vàng71 Huy hiệu bạc95 Huy hiệu Đồng9 gold badges71 silver badges95 bronze badges
Khi được hỏi ngày 29 tháng 8 năm 2017 lúc 20:39Aug 29, 2017 at 20:39
21
Bạn có thể cài đặt plugin này: Php Intelephense
Đã trả lời ngày 5 tháng 2 năm 2021 lúc 11:58Feb 5, 2021 at 11:58
Saket89Saket89Saket89
1913 Huy hiệu bạc11 Huy hiệu đồng3 silver badges11 bronze badges
0
Theo như tôi có thể nói, nó làm. Hãy xem tệp php này tôi đã tạo trong mã VS [không có tiện ích mở rộng], với HTML bên trong tệp có cú pháp làm nổi bật cho cả hai ngôn ngữ.
Có một nút [nên nói từ PHP] ở góc dưới bên phải của màn hình cho phép bạn chuyển đổi cú pháp làm nổi bật và tự động hoàn thành sang ngôn ngữ khác và trong khi điều này tạm thời tắt cú pháp PHP, nó sẽ cho phép bạn mã hóa mã Trong HTML dễ dàng hơn rất nhiều.
Đã trả lời ngày 14 tháng 3 năm 2019 lúc 16:34Mar 14, 2019 at 16:34
JodastjodastJodast
1.2732 huy hiệu vàng17 Huy hiệu bạc32 Huy hiệu đồng2 gold badges17 silver badges32 bronze badges
Bạn có thể bật hỗ trợ HTML trong bất kỳ ngôn ngữ nào bằng cách thêm các mục sau vào tệp
"emmet.includeLanguages": {
"your-language": "html",
"rust": "html",
"php": "html",
"javascript": "html",
}
"emmet.includeLanguages": {
"your-language": "html",
"rust": "html",
"php": "html",
"javascript": "html",
}
Đã trả lời ngày 20 tháng 12 năm 2020 lúc 22:53Dec 20, 2020 at 22:53
2
Tôi cũng phải đối mặt với mối quan tâm thực sự này trong khi học PHP và giải pháp duy nhất tôi đưa ra vào lúc này là nhấp vào nút PHP ở góc dưới bên phải của màn hình mã vs. Tôi đang đính kèm ảnh chụp màn hình bên dưới với nút PHP được tô sáng để bạn có thể xác định vị trí dễ dàng. Sau khi nhấp vào, nó sẽ yêu cầu một ngôn ngữ bạn muốn tự động hoàn thành hoạt động, chọn HTML và nó sẽ bắt đầu tự động hoàn thành HTML, nhấp lại để bật AutoComplete PHP. Tôi cũng tình cờ bắt gặp Github Pilot Extension, bạn cần phải là sinh viên để tận dụng dịch vụ này miễn phí nếu không bạn phải mua thành viên, nó là một công cụ tốt để tự động hoàn thành mặc dù đó không phải là ý chính của nó, nó là một cái gì đó được phát minh tuyệt vời cho người học và các lập trình viên chuyên nghiệp.
Đã trả lời ngày 24 tháng 9 lúc 8:18Sep 24 at 8:18
Visual Studio Code cung cấp hỗ trợ cơ bản cho lập trình HTML ra khỏi hộp. Có cú pháp làm nổi bật, hoàn thành thông minh với IntelliSense và định dạng có thể tùy chỉnh. Mã VS cũng bao gồm hỗ trợ Emmet tuyệt vời.
IntelliSense
Khi bạn nhập HTML, chúng tôi cung cấp các đề xuất thông qua HTML IntelliSense. Trong hình ảnh dưới đây, bạn có thể thấy việc đóng phần tử HTML được đề xuất
"emmet.includeLanguages": {
"your-language": "html",
"rust": "html",
"php": "html",
"javascript": "html",
}
Các biểu tượng tài liệu cũng có sẵn cho HTML, cho phép bạn nhanh chóng điều hướng đến các nút dom bằng ID và tên lớp.
Bạn cũng có thể làm việc với CSS nhúng và JavaScript. Tuy nhiên, lưu ý rằng tập lệnh và kiểu bao gồm từ các tệp khác không được tuân theo, hỗ trợ ngôn ngữ chỉ xem xét nội dung của tệp HTML.
Bạn có thể kích hoạt các đề xuất bất cứ lúc nào bằng cách nhấn ⌃space [Windows, Linux Ctrl+Space].⌃Space [Windows, Linux Ctrl+Space].
Bạn cũng có thể kiểm soát nhà cung cấp hoàn thành mã tích hợp nào đang hoạt động. Ghi đè những điều này trong cài đặt người dùng hoặc không gian làm việc của bạn nếu bạn không muốn xem các đề xuất tương ứng.
// Configures if the built-in HTML language suggests HTML5 tags, properties and values.
"html.suggest.html5": true
Các phần tử thẻ được tự động đóng khi
"emmet.includeLanguages": {
"your-language": "html",
"rust": "html",
"php": "html",
"javascript": "html",
}
Thẻ đóng khớp được chèn khi
"emmet.includeLanguages": {
"your-language": "html",
"rust": "html",
"php": "html",
"javascript": "html",
}
Bạn có thể tắt thẻ tự động với cài đặt sau:
"html.autoClosingTags": false
Khi sửa đổi thẻ, tính năng chỉnh sửa được liên kết tự động cập nhật thẻ đóng khớp. Tính năng này là tùy chọn và có thể được bật bằng cách cài đặt:
"editor.linkedEditing": true
Người chọn màu
Giao diện người chọn Code Code Picker hiện có sẵn trong các phần kiểu HTML.
Nó hỗ trợ cấu hình của màu sắc, độ bão hòa và độ mờ cho màu được chọn từ trình soạn thảo. Nó cũng cung cấp khả năng kích hoạt giữa các chế độ màu khác nhau bằng cách nhấp vào chuỗi màu ở đầu bộ chọn. Người chọn xuất hiện trên một chiếc di chuột khi bạn ở trên một định nghĩa màu.
Bay lượn
Di chuyển chuột qua các thẻ HTML hoặc các kiểu nhúng và JavaScript để có thêm thông tin về biểu tượng dưới con trỏ.
Thẩm định
Hỗ trợ ngôn ngữ HTML thực hiện xác thực trên tất cả các JavaScript và CSS được nhúng.
Bạn có thể tắt xác thực đó bằng các cài đặt sau:
// Configures if the built-in HTML language support validates embedded scripts.
"html.validate.scripts": true,
// Configures if the built-in HTML language support validates embedded styles.
"html.validate.styles": true
Gấp
Bạn có thể gấp các vùng mã nguồn bằng các biểu tượng gấp trên máng xối giữa các số dòng và bắt đầu dòng. Các vùng gấp có sẵn cho tất cả các phần tử HTML cho các nhận xét đa dòng trong mã nguồn.
Ngoài ra, bạn có thể sử dụng các điểm đánh dấu vùng sau để xác định vùng gấp:
"emmet.includeLanguages": {
"your-language": "html",
"rust": "html",
"php": "html",
"javascript": "html",
}
"emmet.includeLanguages": {
"your-language": "html",
"rust": "html",
"php": "html",
"javascript": "html",
}
Nếu bạn thích chuyển sang gấp dựa trên thụt vào để sử dụng HTML:
"[html]": {
"editor.foldingStrategy": "indentation"
},
Định dạng
Để cải thiện định dạng mã nguồn HTML của bạn, bạn có thể sử dụng lệnh tài liệu định dạng ⇧⌥F [Windows Shift+Alt+F, Linux Ctrl+Shift+I] để định dạng toàn bộ tệp hoặc định dạng chọn Linux ctrl+k ctrl+f] để chỉ định dạng văn bản đã chọn.Format Document command ⇧⌥F [Windows Shift+Alt+F, Linux Ctrl+Shift+I] to format the entire file or Format Selection ⌘K ⌘F [Windows, Linux Ctrl+K Ctrl+F] to just format the selected text.
Các định dạng HTML dựa trên JS-Beautify. Các tùy chọn định dạng được cung cấp bởi thư viện đó được xuất hiện trong cài đặt mã VS:
6: Số lượng ký tự tối đa trên mỗi dòng."emmet.includeLanguages": { "your-language": "html", "rust": "html", "php": "html", "javascript": "html", }
7: Danh sách các thẻ không nên được định dạng lại."emmet.includeLanguages": { "your-language": "html", "rust": "html", "php": "html", "javascript": "html", }
8: Danh sách các thẻ, dấu phẩy được phân tách, nơi nội dung không nên được định dạng lại."emmet.includeLanguages": { "your-language": "html", "rust": "html", "php": "html", "javascript": "html", }
9: Danh sách các thẻ nên có thêm một dòng mới trước chúng."emmet.includeLanguages": { "your-language": "html", "rust": "html", "php": "html", "javascript": "html", }
0: Liệu dòng hiện tại có bị phá vỡ trước khi các yếu tố nên được bảo tồn hay không.// Configures if the built-in HTML language suggests HTML5 tags, properties and values. "html.suggest.html5": true
1: Số lượng ngắt dòng tối đa được bảo tồn trong một khối.// Configures if the built-in HTML language suggests HTML5 tags, properties and values. "html.suggest.html5": true
2: Các phần// Configures if the built-in HTML language suggests HTML5 tags, properties and values. "html.suggest.html5": true
3 và// Configures if the built-in HTML language suggests HTML5 tags, properties and values. "html.suggest.html5": true
4.// Configures if the built-in HTML language suggests HTML5 tags, properties and values. "html.suggest.html5": true
5: Chiến lược gói cho các thuộc tính:// Configures if the built-in HTML language suggests HTML5 tags, properties and values. "html.suggest.html5": true
6: Bọc khi vượt quá độ dài dòng// Configures if the built-in HTML language suggests HTML5 tags, properties and values. "html.suggest.html5": true
7: Bọc tất cả các thuộc tính, ngoại trừ đầu tiên// Configures if the built-in HTML language suggests HTML5 tags, properties and values. "html.suggest.html5": true
8: Bao bọc tất cả các thuộc tính, ngoại trừ trước và căn chỉnh các thuộc tính// Configures if the built-in HTML language suggests HTML5 tags, properties and values. "html.suggest.html5": true
9: Bao bọc tất cả các thuộc tính// Configures if the built-in HTML language suggests HTML5 tags, properties and values. "html.suggest.html5": true
0: Vượt quá độ dài dòng, các thuộc tính căn chỉnh theo chiều dọc"html.autoClosingTags": false
1: Bảo tồn gói các thuộc tính"html.autoClosingTags": false
2: Bảo tồn gói các thuộc tính nhưng căn chỉnh"html.autoClosingTags": false
3: Kích thước căn chỉnh khi sử dụng"html.autoClosingTags": false
4 và"html.autoClosingTags": false
5 trong"html.autoClosingTags": false
5 hoặc// Configures if the built-in HTML language suggests HTML5 tags, properties and values. "html.suggest.html5": true
7 để sử dụng kích thước thụt mặc định."html.autoClosingTags": false
8: Django, ERB, tay lái và thẻ ngôn ngữ khuôn mẫu PHP."html.autoClosingTags": false
9: Giữ nội dung văn bản cùng nhau giữa chuỗi này."html.autoClosingTags": false
Mẹo: The Formatter không định dạng các thẻ được liệt kê trong cài đặt
7 và"emmet.includeLanguages": { "your-language": "html", "rust": "html", "php": "html", "javascript": "html", }8. JavaScript nhúng được định dạng trừ khi các thẻ 'tập lệnh' được loại trừ. The formatter doesn't format the tags listed in the"emmet.includeLanguages": { "your-language": "html", "rust": "html", "php": "html", "javascript": "html", }7 and"emmet.includeLanguages": { "your-language": "html", "rust": "html", "php": "html", "javascript": "html", }8 settings. Embedded JavaScript is formatted unless 'script' tags are excluded."emmet.includeLanguages": { "your-language": "html", "rust": "html", "php": "html", "javascript": "html", }
Thị trường có một số định dạng thay thế để lựa chọn. Nếu bạn muốn sử dụng một định dạng khác nhau, hãy xác định
"editor.linkedEditing": true
Đoạn trích Emmet
Mã VS hỗ trợ mở rộng đoạn trích Emmet. Các chữ viết tắt Emmet được liệt kê cùng với các đề xuất và đoạn trích khác trong danh sách hoàn thành tự động của biên tập viên.
Mẹo: Xem phần HTML của bảng cheat Emmet để viết tắt hợp lệ. See the HTML section of the Emmet cheat sheet for valid abbreviations.
Nếu bạn muốn sử dụng các chữ viết tắt HTML Emmet với các ngôn ngữ khác, bạn có thể liên kết một trong các chế độ Emmet [chẳng hạn như
"editor.linkedEditing": true
"editor.linkedEditing": true
"editor.linkedEditing": true
Ví dụ: để sử dụng các chữ viết tắt Emmet HTML bên trong JavaScript:
{
"emmet.includeLanguages": {
"javascript": "html"
}
}
Chúng tôi cũng hỗ trợ các đoạn trích do người dùng xác định.
Dữ liệu tùy chỉnh HTML
Bạn có thể mở rộng hỗ trợ HTML của mã vs thông qua định dạng dữ liệu tùy chỉnh khai báo. Bằng cách đặt
"editor.linkedEditing": true
Bạn có thể đọc thêm về việc sử dụng dữ liệu tùy chỉnh trong kho lưu trữ dữ liệu VSCode-Custom.
Phần mở rộng HTML
Cài đặt một tiện ích mở rộng để thêm nhiều chức năng hơn. Chuyển đến chế độ xem phần mở rộng [⇧⌘x [Windows, Linux Ctrl+Shift+x]] và nhập 'HTML' để xem danh sách các tiện ích mở rộng có liên quan để giúp tạo và chỉnh sửa HTML.Extensions view [⇧⌘X [Windows, Linux Ctrl+Shift+X]] and type 'html' to see a list of relevant extensions to help with creating and editing HTML.
Mẹo: Nhấp vào một ô mở rộng ở trên để đọc mô tả và đánh giá để quyết định phần mở rộng nào là tốt nhất cho bạn. Xem thêm trên thị trường.
Bước tiếp theo
Đọc để tìm hiểu về:
- CSS, SCSS và mã ít hơn - VS có hỗ trợ lớp đầu tiên cho CSS bao gồm ít hơn và SCSS.
- Emmet - Tìm hiểu về hỗ trợ Emmet tích hợp mạnh mẽ của VS Code.
- Tài liệu chính thức của Emmet - Emmet, bộ công cụ thiết yếu cho các nhà phát triển web.
Câu hỏi thường gặp
Mã vs có xem trước HTML không?
Không, mã VS không có hỗ trợ tích hợp cho xem trước HTML nhưng có các tiện ích mở rộng có sẵn trên thị trường mã vs.Mở chế độ xem phần mở rộng [⇧⌘x [Windows, Linux Ctrl+Shift+X]] và tìm kiếm trên 'Xem trước trực tiếp' hoặc 'Xem trước HTML' để xem danh sách các tiện ích mở rộng HTML có sẵn.Extensions view [⇧⌘X [Windows, Linux Ctrl+Shift+X]] and search on 'live preview' or 'html preview' to see a list of available HTML preview extensions.
11/2/2022