Hướng dẫn how to run html code in visual studio code - cách chạy mã html trong mã studio trực quan

Tôi chỉ đang đăng lại các bước tôi đã sử dụng từ blog msdn. Nó có thể giúp cộng đồng.

Điều này sẽ giúp bạn thiết lập một máy chủ web cục bộ được gọi là Lite-Server với

npm install

0 và cũng hướng dẫn bạn lưu trữ các tệp

npm install

1 tĩnh của bạn trong

npm install

2 và

npm install

3 Mã

npm install

4 của bạn.

1. Cài đặt Node.js

Nếu chưa được cài đặt, hãy lấy nó ở đây

Nó đi kèm với NPM (Trình quản lý gói để có được và quản lý các thư viện phát triển của bạn)

2. Tạo một thư mục mới cho dự án của bạn

Ở đâu đó trong ổ đĩa của bạn, hãy tạo một thư mục mới cho ứng dụng web của bạn.

3. Thêm tệp gói.json vào thư mục dự án

Sau đó sao chép/dán văn bản sau:

{
   "name": "Demo",
   "version": "1.0.0",
   "description": "demo project.",
   "scripts": {
     "lite": "lite-server --port 10001",
     "start": "npm run lite"
   },
   "author": "",
   "license": "ISC",
   "devDependencies": {
     "lite-server": "^2.5.4"
   }
}

4. Cài đặt máy chủ web

Trong cửa sổ đầu cuối (dấu nhắc lệnh trong Windows) đã mở trên thư mục dự án của bạn, hãy chạy lệnh này:

npm install

Điều này sẽ cài đặt lite-server (được xác định trong pack.json), một máy chủ tĩnh tải index.html trong trình duyệt mặc định của bạn và tự động làm mới nó khi các tệp ứng dụng thay đổi.

5. Bắt đầu máy chủ web cục bộ!

(Giả sử bạn có tệp index.html trong thư mục dự án của bạn).

Trong cùng một cửa sổ đầu cuối (dấu nhắc lệnh trong Windows) Chạy lệnh này:

npm start

Chờ thứ hai và index.html được tải và hiển thị trong trình duyệt mặc định của bạn được phục vụ bởi máy chủ web cục bộ của bạn!

Lite-Server đang xem các tệp của bạn và làm mới trang ngay khi bạn thay đổi bất kỳ tệp HTML, JS hoặc CSS nào.

Và nếu bạn có mã vs được cấu hình để tự động lưu (tệp menu / lưu tự động), bạn sẽ thấy các thay đổi trong trình duyệt khi bạn nhập!

Notes:

• Không đóng dấu nhắc dòng lệnh cho đến khi bạn đã hoàn thành mã hóa trong ứng dụng của mình trong ngày
• Nó mở trên http: // localhost: 10001 nhưng bạn có thể thay đổi cổng bằng cách chỉnh sửa tệp pack.json.

Đó là nó. Bây giờ trước khi bất kỳ phiên mã hóa nào chỉ cần nhập NPM bắt đầu và bạn rất tốt để đi!

Ban đầu được đăng ở đây trong blog msdn. Tín dụng thuộc về tác giả:

npm install

6

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

npm install

7 cũng như một danh sách cụ thể của các phần tử được đề xuất.

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

npm install

8 của thẻ mở được gõ.

Thẻ đóng khớp được chèn khi

npm install

9 của thẻ đóng được nhập.

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:

npm start

0 và

npm start

1

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:

• npm start
  

  2: Số lượng ký tự tối đa trên mỗi dòng.

• npm start
  

  3: Danh sách các thẻ không nên được định dạng lại.

• npm start
  

  4: 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.

• npm start
  

  5: Danh sách các thẻ nên có thêm một dòng mới trước chúng.

• npm start
  

  6: 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.

• npm start
  

  7: Số lượng ngắt dòng tối đa được bảo tồn trong một khối.

• npm start
  

  8: Các phần

  npm start
  

  9 và

  // Configures if the built-in HTML language suggests HTML5 tags, properties and values.
  "html.suggest.html5": true
  

  0.

• // Configures if the built-in HTML language suggests HTML5 tags, properties and values.
  "html.suggest.html5": true
  

  1: 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
    

    2: 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
    

    3: 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
    

    4: Bao bọc tất cả các thuộc tính, ngoại trừ đầu tiên 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
    

    5: 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
    

    6: Vượt quá chiều dài dòng, căn chỉnh các thuộc tính theo chiều dọc

  • // Configures if the built-in HTML language suggests HTML5 tags, properties and values.
    "html.suggest.html5": true
    

    7: Bảo tồn gói các thuộc tính

  • // Configures if the built-in HTML language suggests HTML5 tags, properties and values.
    "html.suggest.html5": true
    

    8: Bảo tồn gói các thuộc tính nhưng căn chỉnh

• // Configures if the built-in HTML language suggests HTML5 tags, properties and values.
  "html.suggest.html5": true
  

  9: Kích thước căn chỉnh khi sử dụng

  "html.autoClosingTags": false
  

  0 và

  "html.autoClosingTags": false
  

  1 trong

  // Configures if the built-in HTML language suggests HTML5 tags, properties and values.
  "html.suggest.html5": true
  

  1 hoặc

  "html.autoClosingTags": false
  

  3 để sử dụng kích thước thụt mặc định.

• "html.autoClosingTags": false
  

  4: Django, ERB, tay lái và thẻ ngôn ngữ khuôn mẫu PHP.

• "html.autoClosingTags": false
  

  5: Giữ nội dung văn bản cùng nhau giữa chuỗi này.

Mẹo: The Formatter không định dạng các thẻ được liệt kê trong cài đặt

npm start

3 và

npm start

4. 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

npm start

3 and

npm start

4 settings. Embedded JavaScript is formatted unless 'script' tags are excluded.

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

"html.autoClosingTags": false

8 trong cài đặt của mình để tắt định dạng tích hợp.

Đ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ư

"html.autoClosingTags": false

9,

npm install

1) với các ngôn ngữ khác với cài đặt

"editor.linkedEditing": true

1. Cài đặt lấy một định danh ngôn ngữ và liên kết nó với ID ngôn ngữ của chế độ được hỗ trợ EMMET.

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

2 thành danh sách các tệp JSON theo định dạng dữ liệu tùy chỉnh, bạn có thể nâng cao sự hiểu biết của mã về các thẻ HTML, thuộc tính và giá trị thuộc tính mới. Mã VS sau đó sẽ cung cấp hỗ trợ ngôn ngữ như thông tin hoàn thành & di chuột cho các thẻ, thuộc tính và giá trị thuộc tính được cung cấp.

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.

10/6/2022

Làm cách nào để chạy mã HTML trong mã Visual Studio LocalHost?

Làm cách nào để chạy tệp HTML?

Làm thế nào tệp HTML mở trong trình duyệt từ Visual Studio Code?