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

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 VS Code và cũng hướng dẫn bạn lưu trữ các tệp html tĩnh của bạn trong localhostdebugJavascript 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
0

Tải xuống bài viết

Tải xuống bài viết

Visual Studio Code là một trình soạn thảo mã nguồn được thực hiện bởi Microsoft. Nó có sẵn cho Windows, MacOS và Linux. Nó cho phép bạn viết và chỉnh sửa mã bằng nhiều ngôn ngữ mã hóa, bao gồm cả HTML. Nhưng bạn sẽ làm gì khi bạn muốn chạy mã HTML của mình để xem nó trông như thế nào. May mắn thay, có một số tiện ích mở rộng cho mã Visual Studio cho phép bạn dễ dàng chạy mã HTML từ trong mã Visual Studio. Bạn cũng có thể sử dụng thiết bị đầu cuối để chạy tệp HTML. Bài viết Wikihow này dạy bạn cách chạy tệp HTML trong mã Visual Studio.

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

    1

    Mở mã Visual Studio. Visual Studio Code có một biểu tượng giống như một dải ruy băng màu xanh. Nhấp vào biểu tượng mã Visual Studio để khởi chạy Code Visual Studio. Bạn có thể tìm thấy nó trong menu Windows Start trên Windows, thư mục ứng dụng trên Mac hoặc menu ứng dụng trên Linux. Visual Studio Code has an icon that resembles a blue ribbon. Click the Visual Studio Code icon to launch Visual Studio Code. You can find it in the Windows Start menu on Windows, the Applications folder on Mac, or the Apps menu on Linux.

    • Nếu bạn chưa làm như vậy, bạn có thể tải xuống Visual Studio Code miễn phí từ https://code.visualstudio.com/. Chỉ cần nhấp vào nút Tải xuống trên trang web và mở tệp cài đặt từ trong trình duyệt web hoặc thư mục tải xuống của bạn. Thực hiện theo các hướng dẫn để hoàn tất việc cài đặt.Download button on the web page and open the installation file from within your web browser or Downloads folder. Follow the instructions to complete the installation.

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

    2

    Mở hoặc tạo tệp HTML mới. Sử dụng một trong các bước sau để mở hoặc tạo tệp mới: Use one of the following steps to open or create a new file:

    • Để tạo một tệp mới, nhấp vào tệp trong thanh menu ở đầu. Sau đó nhấp vào tệp mới. Bắt đầu nhập mã HTML của bạn.File in the menu bar at the top. Then click New File. Begin typing your HTML code.
    • Để mở một tệp hiện có, nhấp vào tệp trong thanh menu ở đầu. Sau đó nhấp vào Mở tệp. Điều hướng đến tệp HTML bạn muốn mở và nhấp vào nó để chọn nó. Sau đó nhấp vào mở.File in the menu bar at the top. Then click Open File. Navigate to the HTML file you want to open and click it to select it. Then click Open.

    Quảng cáo

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

    3

    Lưu tệp dưới dạng tệp HTML. Khi bạn đã sẵn sàng để chạy một tệp HTML trong mã Visual Studio, trước tiên bạn sẽ cần lưu tệp dưới dạng tệp HTML. Khi bạn lưu tệp HTML của mình, bạn có thể chạy nó trong bất kỳ trình duyệt nào bạn chọn. Sử dụng các bước sau để lưu tệp HTML của bạn trong mã Visual Studio: When you are ready to run an HTML file in Visual Studio Code, you'll first need to save the file as an HTML file. Once you save your HTML file, you can run it in any browser of your choice. Use the following steps to save your HTML file in Visual Studio Code:

    • Nhấp vào Tệp trong thanh menu ở đầu.File in the menu bar at the top.
    • Nhấp vào Lưu dưới dạng.Save as.
    • Nhập tên tệp bên cạnh "Tên tệp."
    • Sử dụng menu thả xuống bên cạnh "Lưu dưới dạng loại" để chọn "HTML".HTML".
    • Nhấp vào để lưu.Save.

  4. Quảng cáo

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

    1

    Mở mã Visual Studio. Visual Studio Code có một biểu tượng giống như một dải ruy băng màu xanh. Nhấp vào biểu tượng mã Visual Studio để khởi chạy Code Visual Studio. Bạn có thể tìm thấy nó trong menu Windows Start trên Windows, thư mục ứng dụng trên Mac hoặc menu ứng dụng trên Linux. Visual Studio Code has an icon that resembles a blue ribbon. Click the Visual Studio Code icon to launch Visual Studio Code. You can find it in the Windows Start menu on Windows, the Applications folder on Mac, or the Apps menu on Linux.

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

    2

    Nếu bạn chưa làm như vậy, bạn có thể tải xuống Visual Studio Code miễn phí từ https://code.visualstudio.com/. Chỉ cần nhấp vào nút Tải xuống trên trang web và mở tệp cài đặt từ trong trình duyệt web hoặc thư mục tải xuống của bạn. Thực hiện theo các hướng dẫn để hoàn tất việc cài đặt. If you haven't already done so, open an existing HTML file, or create a new HTML file and save it in the HTML format. If you already have an HTML file open, click the tab that contains your HTML file at the top of the screen to view it.

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

    3

    Mở hoặc tạo tệp HTML mới. Sử dụng một trong các bước sau để mở hoặc tạo tệp mới: To do so, click Terminal at the top of the screen. Then click New Terminal. The Terminal is the only way to run an HTML file in Visual Studio Code without using an extension. It is also the most complex way.

    • Để tạo một tệp mới, nhấp vào tệp trong thanh menu ở đầu. Sau đó nhấp vào tệp mới. Bắt đầu nhập mã HTML của bạn.View at the top, and then click Terminal.

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

    4

    Để mở một tệp hiện có, nhấp vào tệp trong thanh menu ở đầu. Sau đó nhấp vào Mở tệp. Điều hướng đến tệp HTML bạn muốn mở và nhấp vào nó để chọn nó. Sau đó nhấp vào mở. Enter. This navigates to the location of your HTML file. For example, if your HTML file is in an HTML file in your Documents folder, you would type cd \Users\username\Documents and press Enter.

    • Quảng cáoEnter.
    • Lưu tệp dưới dạng tệp HTML. Khi bạn đã sẵn sàng để chạy một tệp HTML trong mã Visual Studio, trước tiên bạn sẽ cần lưu tệp dưới dạng tệp HTML. Khi bạn lưu tệp HTML của mình, bạn có thể chạy nó trong bất kỳ trình duyệt nào bạn chọn. Sử dụng các bước sau để lưu tệp HTML của bạn trong mã Visual Studio:Copy Path. Type cd in the Terminal and then paste the path immediately after. Delete the file name at the end of the path and then press Enter.
    • Nhấp vào Tệp trong thanh menu ở đầu.

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

    5

    Nhấp vào Lưu dưới dạng. Enter. For example, if you wanted to run your index HTML file, you would type start index.html and press Enter. This launches the HTML file in a separate window allowing you to preview your HTML file.

    • Nhập tên tệp bên cạnh "Tên tệp."

  6. Quảng cáo

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

    1

    Mở mã Visual Studio. Visual Studio Code có một biểu tượng giống như một dải ruy băng màu xanh. Nhấp vào biểu tượng mã Visual Studio để khởi chạy Code Visual Studio. Bạn có thể tìm thấy nó trong menu Windows Start trên Windows, thư mục ứng dụng trên Mac hoặc menu ứng dụng trên Linux. Visual Studio Code has an icon that resembles a blue ribbon. Click the Visual Studio Code icon to launch Visual Studio Code. You can find it in the Windows Start menu on Windows, the Applications folder on Mac, or the Apps menu on Linux.

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

    2

    Nhấp vào nút Tiện ích mở rộng. Đó là biểu tượng giống với 4 hình vuông trong thanh menu bên trái. Điều này hiển thị menu tìm kiếm tiện ích mở rộng. It's the icon that resembles 4 squares in the menu bar on the left. This displays the Extensions search menu.

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

    3

    Nhập xem trước HTML trong thanh tìm kiếm. Thanh tìm kiếm nằm ở đầu menu mở rộng bên trái. Điều này hiển thị một danh sách các tiện ích mở rộng phù hợp với truy vấn tìm kiếm của bạn. "HTML Preview" là một tiện ích mở rộng cho Visual Studio Code cho phép bạn xem trước các tệp HTML từ trong mã Visual Studio bằng cách sử dụng màn hình chia hoặc ở chế độ cửa sổ đầy đủ. The search bar is at the top of the Extensions menu on the left. This displays a list of extensions that match your search query. "HTML Preview" is an extension for Visual Studio Code that allows you to preview HTML files from within Visual Studio Code using a split-screen or in full-window mode.

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

    4

    Nhấp vào tiện ích mở rộng "HTML Preview". Nó phải là phần mở rộng đầu tiên ở đầu danh sách các phần mở rộng. Nó được tạo ra bởi Thomas Haakon Townsend. Nó chứa một biểu tượng giống như một lá chắn màu cam với "5" ở giữa (logo HTML 5). It should be the first extension at the top of the list of extensions. It is created by Thomas Haakon Townsend. It contains an icon that resembles an orange shield with a "5" in the middle (the HTML 5 logo).

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

    5

    Nhấp vào Cài đặt. Nó nằm dưới tiêu đề "HTML Preview" trong trang thông tin nằm bên phải menu Phần mở rộng. Điều này cài đặt phần mở rộng. Cho phép một vài phút để nó hoàn thành cài đặt.Install. It's below the "HTML Preview" header in the information page that is to the right of the extensions menu. This installs the extension. Allow a couple of minutes for it to finish installing.

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

    6

    Mở hoặc tạo tệp HTML mới. Nếu bạn chưa hoàn thành, hãy mở tệp HTML hiện có hoặc tạo tệp HTML mới và lưu nó ở định dạng HTML. Nếu bạn đã mở tệp HTML, nhấp vào tab có chứa tệp HTML của bạn ở đầu màn hình để xem nó. If you haven't already done so, open an existing HTML file, or create a new HTML file and save it in the HTML format. If you already have an HTML file open, click the tab that contains your HTML file at the top of the screen to view it.

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

    7

    Nhấp vào nút xem trước màn hình chia. Đó là biểu tượng giống như một màn hình tách biệt với kính lúp ở phía bên trái. Nó ở góc trên bên phải cho màn hình. Điều này mở ra một bản xem trước của tệp HTML trong một màn hình chia bên trong mã Visual Studio. It's the icon that resembles a split-screen with a magnifying glass on the left side. It's in the upper-right corner fo the screen. This opens a preview of the HTML file in a split-screen inside Visual Studio Code.

    • Giữ Alt và nhấp vào nút Xem trước để xem bản xem trước toàn màn hình của mã HTML.Alt and click the preview button to see a full-screen preview of the HTML code.
    • Để đóng bản xem trước, chỉ cần nhấp vào biểu tượng "X" trong tab Xem trước ở đầu màn hình.

  8. Quảng cáo

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

    1

    Mở mã Visual Studio. Visual Studio Code có một biểu tượng giống như một dải ruy băng màu xanh. Nhấp vào biểu tượng mã Visual Studio để khởi chạy Code Visual Studio. Bạn có thể tìm thấy nó trong menu Windows Start trên Windows, thư mục ứng dụng trên Mac hoặc menu ứng dụng trên Linux. Visual Studio Code has an icon that resembles a blue ribbon. Click the Visual Studio Code icon to launch Visual Studio Code. You can find it in the Windows Start menu on Windows, the Applications folder on Mac, or the Apps menu on Linux.

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

    2

    Nhấp vào nút Tiện ích mở rộng. Đó là biểu tượng giống với 4 hình vuông trong thanh menu bên trái. Điều này hiển thị menu tìm kiếm tiện ích mở rộng. It's the icon that resembles 4 squares in the menu bar on the left. This displays the Extensions search menu.

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

    3

    Nhập mở trong trình duyệt trong thanh tìm kiếm. Thanh tìm kiếm nằm ở đầu menu mở rộng bên trái. Điều này hiển thị một danh sách các tiện ích mở rộng phù hợp với truy vấn tìm kiếm của bạn. "Mở trong trình duyệt" là một tiện ích mở rộng cho Visual Studio Code cho phép bạn mở tệp HTML bằng trình duyệt web mà bạn chọn từ bên trong Code Visual Studio. The search bar is at the top of the Extensions menu on the left. This displays a list of extensions that match your search query. "Open in browser" is an extension for Visual Studio Code that allows you to open an HTML file using a web browser of your choice from within Visual Studio Code.

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

    4

    Nhấp vào phần mở rộng "Mở trong trình duyệt". Nó phải là phần mở rộng đầu tiên ở đầu danh sách. Đó là một trong đó có tất cả các chữ cái viết thường và được tạo bởi Techer. Nhấp vào phần mở rộng để chọn nó. It should be the first extension at the top of the list. It's the one that has all lowercase letters and is created by TechER. Click the extension to select it.

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

    5

    Nhấp vào Cài đặt. Nó ở bên dưới tiêu đề "Mở trong trình duyệt" trong trang thông tin ở bên phải của menu Phần mở rộng. Điều này cài đặt phần mở rộng. Cho phép một vài phút để nó hoàn thành cài đặt.Install. It's below the "open in browser" header in the information page that is to the right of the extensions menu. This installs the extension. Allow a couple of minutes for it to finish installing.

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

    6

    Mở hoặc tạo tệp HTML mới. Nếu bạn chưa hoàn thành, hãy mở tệp HTML hiện có hoặc tạo tệp HTML mới và lưu nó ở định dạng HTML. Nếu bạn đã mở tệp HTML, nhấp vào tab có chứa tệp HTML của bạn ở đầu màn hình để xem nó. If you haven't already done so, open an existing HTML file, or create a new HTML file and save it in the HTML format. If you already have an HTML file open, click the tab that contains your HTML file at the top of the screen to view it.

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

    7

    Nhấp vào nút xem trước màn hình chia. Đó là biểu tượng giống như một màn hình tách biệt với kính lúp ở phía bên trái. Nó ở góc trên bên phải cho màn hình. Điều này mở ra một bản xem trước của tệp HTML trong một màn hình chia bên trong mã Visual Studio. This displays a context menu.

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

    8

    Giữ Alt và nhấp vào nút Xem trước để xem bản xem trước toàn màn hình của mã HTML.Open in Default Browser. This opens the HTML file in your default web browser. This allows you to view the HTML file.[2]

    • Để đóng bản xem trước, chỉ cần nhấp vào biểu tượng "X" trong tab Xem trước ở đầu màn hình.Open in Other Browser and double-click the web browser of your choice.
    • Quảng cáoOk.

  9. Quảng cáo

Mở mã Visual Studio. Visual Studio Code có một biểu tượng giống như một dải ruy băng màu xanh. Nhấp vào biểu tượng mã Visual Studio để khởi chạy Code Visual Studio. Bạn có thể tìm thấy nó trong menu Windows Start trên Windows, thư mục ứng dụng trên Mac hoặc menu ứng dụng trên Linux.

Nhập mở trong trình duyệt trong thanh tìm kiếm. Thanh tìm kiếm nằm ở đầu menu mở rộng bên trái. Điều này hiển thị một danh sách các tiện ích mở rộng phù hợp với truy vấn tìm kiếm của bạn. "Mở trong trình duyệt" là một tiện ích mở rộng cho Visual Studio Code cho phép bạn mở tệp HTML bằng trình duyệt web mà bạn chọn từ bên trong Code Visual Studio.

Nhấp vào phần mở rộng "Mở trong trình duyệt". Nó phải là phần mở rộng đầu tiên ở đầu danh sách. Đó là một trong đó có tất cả các chữ cái viết thường và được tạo bởi Techer. Nhấp vào phần mở rộng để chọn nó.

Nhấp vào Cài đặt. Nó ở bên dưới tiêu đề "Mở trong trình duyệt" trong trang thông tin ở bên phải của menu Phần mở rộng. Điều này cài đặt phần mở rộng. Cho phép một vài phút để nó hoàn thành cài đặt.

Quảng cáo

Mở mã Visual Studio. Visual Studio Code có một biểu tượng giống như một dải ruy băng màu xanh. Nhấp vào biểu tượng mã Visual Studio để khởi chạy Code Visual Studio. Bạn có thể tìm thấy nó trong menu Windows Start trên Windows, thư mục ứng dụng trên Mac hoặc menu ứng dụng trên Linux.

Nhập mở trong trình duyệt trong thanh tìm kiếm. Thanh tìm kiếm nằm ở đầu menu mở rộng bên trái. Điều này hiển thị một danh sách các tiện ích mở rộng phù hợp với truy vấn tìm kiếm của bạn. "Mở trong trình duyệt" là một tiện ích mở rộng cho Visual Studio Code cho phép bạn mở tệp HTML bằng trình duyệt web mà bạn chọn từ bên trong Code Visual Studio.

Nhấp vào phần mở rộng "Mở trong trình duyệt". Nó phải là phần mở rộng đầu tiên ở đầu danh sách. Đó là một trong đó có tất cả các chữ cái viết thường và được tạo bởi Techer. Nhấp vào phần mở rộng để chọn nó.X

Nhấp vào Cài đặt. Nó ở bên dưới tiêu đề "Mở trong trình duyệt" trong trang thông tin ở bên phải của menu Phần mở rộng. Điều này cài đặt phần mở rộng. Cho phép một vài phút để nó hoàn thành cài đặt.
2. Click the Extensions button on the left side.
3. Search for "HTML Preview" and install it.
4. Click the tab for your HTML file at the top.
5. Click the icon that resembles a split-screen with a magnifying glass at the top.

Nhấp chuột phải vào bất cứ nơi nào trong HTML.Code. Điều này hiển thị một menu ngữ cảnh.

Nhấp vào Mở trong trình duyệt mặc định. Điều này mở tệp HTML trong trình duyệt web mặc định của bạn. Điều này cho phép bạn xem tệp HTML. [2]

Bài viết này có được cập nhật không?