Hướng dẫn how do you view an html file in the browser with visual studio code on mac? - Làm thế nào để bạn xem một tệp html trong trình duyệt với mã studio trực quan trên mac?

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 localhost và debug Mã Javascript 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

Nếu bạn sử dụng các tệp HTML, PHP hoặc JS, bạn có thể muốn mở chúng trong trình duyệt của mình từ Visual Studio Code. Tuy nhiên, không có tùy chọn tích hợp để làm như vậy. Điều này có thể gây khó chịu, đặc biệt nếu bạn muốn có một cái nhìn nhanh về kết quả mã hóa của bạn.

May mắn thay, bạn có thể bật chức năng mở trong trình duyệt của trình duyệt thông qua các phương thức khác. Bài viết này sẽ chỉ cho bạn cách làm điều đó.

Cách mở trong trình duyệt trong mã vs trên PC Windows

Cách dễ nhất để có được tùy chọn Mở trong trình duyệt cho Visual Studio Code trong Windows là sử dụng tiện ích mở rộng. Cài đặt các tiện ích mở rộng trong mã Visual Studio tương đối đơn giản, cũng như việc sử dụng chúng để mở các tệp trong trình duyệt.

1. Mở tệp HTML của bạn trong Trình chỉnh sửa mã Visual Studio.
   
   
2. Trên thanh công cụ thẳng đứng bên trái, nhấp vào phần mở rộng. Ngoài ra, bạn có thể sử dụng phím tắt bàn phím Ctrl + Shift + X, để khởi chạy các tiện ích mở rộng.
   
   
3. Nhấp vào thanh tìm kiếm để bật viết.
   
   
4. Đầu vào mở ra trong trình duyệt. Chọn một tiện ích mở rộng phù hợp với thuật ngữ tìm kiếm của bạn.
   
   
5. Nhấp vào nút Cài đặt cài đặt.
   
   
6. Tải lại chương trình.
7. Chọn trình thám hiểm từ thanh công cụ bên trái.
   
   
8. Tìm tệp HTML của bạn trong trình thám hiểm và nhấp chuột phải vào nó. Chọn Mở mở trong trình duyệt mặc định, hoặc mở trong các trình duyệt khác.
   
   
9. Nếu bạn chọn tùy chọn Trình duyệt mặc định của Trình duyệt mặc định, tệp HTML sẽ khởi chạy trong bất kỳ trình duyệt nào được đặt làm mặc định. Nếu bạn chọn Mở mở trong các trình duyệt khác, thì bạn sẽ cần chỉ định trình duyệt nào sẽ được sử dụng.

Bạn có thể tìm thấy nhiều phần mở rộng hữu ích trên thị trường Visual Studio. Hoặc bạn có thể mở các tiện ích mở rộng trình duyệt với các đánh giá tích cực nhất ở đây: Tiện ích mở rộng 1, Tiện ích mở rộng 2, Tiện ích mở rộng 3, Tiện ích mở rộng 4.

Visual Studio Code có thể được nâng cấp bằng các tiện ích mở rộng khác nhau để tăng chức năng của chương trình. Một loại tiện ích mở rộng có thể cho phép mở các tệp HTML, PHP hoặc JS trong một trình duyệt mặc định hoặc khác. Ở đây, làm thế nào để kích hoạt tùy chọn đó trên máy Mac.

1. Sử dụng Trình chỉnh sửa mã Visual Studio, mở tệp mong muốn.
   
   
2. Chuyển đến thanh công cụ ở bên trái và chọn các tiện ích mở rộng.
   
   
3. Nhấp vào thanh tìm kiếm trong bảng mở rộng và viết Mở mở trong trình duyệt.
   
   
4. Chọn một phần mở rộng và nhấp vào cài đặt.
   
   
5. Tải lại phần mềm.
6. Chuyển đến thanh công cụ bên trái và chọn Explorer.
   
   
7. Xác định vị trí tệp bạn muốn mở trong bảng Explorer và nhấp chuột phải vào nó. Chọn một trong hai lần mở trong trình duyệt mặc định, hoặc mở trong các trình duyệt khác.
   
   
8. Tùy chọn Mở trong Trình duyệt mặc định, sẽ khởi chạy tệp bằng trình duyệt được chọn trước. & NBSP; Mở mở trong các trình duyệt khác, sẽ đưa ra một lời nhắc nơi bạn có thể chọn một trong các trình duyệt được cài đặt trên máy của bạn.
   
   

Visual Studio Marketplace có rất nhiều tiện ích mở rộng có thể thêm các chức năng mới vào Code Visual Studio Code. Trang web này rất đáng để khám phá nếu bạn muốn điều chỉnh chương trình hơn nữa. Và nếu bạn quan tâm đến việc mở các tiện ích mở rộng trình duyệt, đây là một số gợi ý: Tiện ích mở rộng 1, Tiện ích mở rộng 2, Tiện ích mở rộng 3, Tiện ích mở rộng 4.

Mở trong phím tắt trình duyệt

Gần như mọi tiện ích mở rộng trình duyệt mở cho Visual Studio Code đều có các phím tắt được bật. Tuy nhiên, các phím tắt aren đồng phục. Thay vào đó, mỗi tiện ích mở rộng có một kết hợp các khóa cụ thể sẽ kích hoạt việc mở tệp trong trình duyệt của bạn.

Dưới đây là các phím tắt cho các tiện ích mở rộng được đề xuất trong bài viết này.

1. Tiện ích mở rộng 1: CTRL + 1 1 trên Windows, lệnh + 1 1 trên Mac.
   
   
   
   
   
2. Phần mở rộng 2: Ctrl Ctrl + Alt + O, trên Windows, Lệnh + Tùy chọn (Alt) + O, trên Mac.
   
   
   
   
3. Tiện ích mở rộng 3: CTRL + Shift + F9, trên Windows, Lệnh + Shift + F9, trên Mac.
   
   
   
   
   
4. Tiện ích mở rộng 4: CTRL + Shift + P, trên Windows, Lệnh + Shift + P, trên Mac.
   
   
   
   
   

Lưu ý rằng các phím tắt này sẽ chỉ hoạt động trên các phần mở rộng tương ứng của chúng được liên kết trong bài viết này. Nếu bạn chọn cài đặt một tiện ích mở rộng khác, các phím tắt có liên quan có thể sẽ được liệt kê trên trang Marketplace của nó.

Chạy HTML trong mã Visual Studio

Nếu bạn quan tâm đến việc làm việc với HTML trong Visual Studio Code, đây là một số phương pháp chạy mã HTML trong chương trình.

Phương pháp đầu tiên bao gồm tải thủ công tệp bạn muốn chạy.

1. Mở mã Visual Studio và tạo tệp HTML mới.
   
   
2. Truy cập vào tập tin, thì sau đó nhấp vào Lưu.
   
   
3. Sử dụng HTML: 5, kích hoạt mẫu cho HTML. Sau đó, mở tệp bạn đã lưu trong bước 2.
   
   
4. Sử dụng tiện ích mở rộng mở trong trình duyệt mà bạn đã cài đặt trước đây để khởi chạy tệp trong trình duyệt của bạn.
5. Để lại trình duyệt mở, quay lại mã Visual Studio và chỉnh sửa tệp HTML, lưu các thay đổi của bạn.
   
   
6. Quay trở lại trình duyệt và nhấp vào làm mới. Bạn sẽ thấy thay đổi trang dựa trên chỉnh sửa của bạn.
   
   
7. Lặp lại các bước 5 và 6 để kiểm tra tiến trình của bạn khi bạn tiếp tục chỉnh sửa tệp HTML.

Phương pháp thủ công có thể giúp theo dõi công việc của bạn. Tuy nhiên, có một giải pháp thậm chí còn tốt hơn: tự động tải. Tùy chọn này sẽ yêu cầu bạn cài đặt một tiện ích mở rộng khác, nhưng nên có giá trị thời gian.

1. Trong Visual Studio Code, đi đến các phần mở rộng, nằm ở dưới cùng của thanh công cụ bên trái.
   
   
2. Trong thanh tìm kiếm tiện ích mở rộng, nhập vào máy chủ trực tiếp.
   
   
3. Nhấp vào nút Cài đặt trên mạng bên cạnh tiện ích mở rộng máy chủ trực tiếp.
   
   
4. Tạo và lưu một tệp HTML mới.
   
   
   
   
   
5. Trong Visual Studio Code Explorer, nhấp chuột phải vào tệp mới của bạn. Chọn “Mở máy chủ trực tiếp.”
   
   
6. Tệp HTML sẽ mở trong trình duyệt. Khi nó làm, hãy thử chỉnh sửa mã HTML. Lưu tiến trình của bạn.
   
   
   
   
   
7. Ngay khi bạn tạo một thay đổi trong mã và lưu nó, trình duyệt của bạn sẽ làm mới, hiển thị nội dung mới. Bạn đã thắng cần phải làm mới trang theo cách thủ công và thay vào đó sẽ có thể xác nhận trực quan về những thay đổi trong thời gian thực.
   
   

Các phần mở rộng HTML của Visual Studio Code HTML hữu ích khác

Như đã đề cập, thị trường Visual Studio có đầy đủ các công cụ tuyệt vời, nhiều trong số đó hướng đến HTML. Dưới đây là mười tiện ích mở rộng hữu ích và tốt nhất cho HTML.

• Lit-Plugin: Một công cụ làm nổi bật cú pháp, kiểm tra gõ và giúp bạn hoàn thành mã mà không có lỗi. Tiện ích mở rộng này có các quy tắc tùy chỉnh.
• SCSS ở mọi nơi: Một tiện ích mở rộng tự động hoàn thành cho các định nghĩa lớp cho HTML, SCSS, Elixir, SASS, PHP, CSS và nhiều loại tệp khác.
• Đoạn ghép góc: Thêm đoạn trích góc để dễ dàng sử dụng trong HTML và TypeScript. Phần mở rộng hoạt động bằng cách mở một đoạn trích sau khi nó được gõ một phần.
• Chuỗi ES6 HTML: Cho phép hỗ trợ mã chuỗi ES6 để làm nổi bật cú pháp. Hoạt động với HTML, CSS, XML, GLSL và các định dạng khác.
• Tách các thuộc tính HTML: Phần mở rộng này sẽ phân chia các thuộc tính HTML, cũng như Angular, Vue và React Props and Chỉ thị. Bạn có thể sử dụng nó trên các thẻ mở và tự đóng, cũng như trên nhiều lựa chọn.
• Djaneiro - Đoạn trích Django: Một bộ sưu tập đoạn trích rộng lớn cho các mẫu Django HTML. Sử dụng tiện ích mở rộng này sẽ rút ngắn đáng kể thời gian gõ.
• Xem trước trực tiếp: Tiện ích mở rộng trực tiếp từ Microsoft cho phép lưu trữ máy chủ cục bộ. Nếu bạn có một dự án không sử dụng Angular, React hoặc các công cụ máy chủ khác, tiện ích mở rộng này sẽ cho phép xem trước HTML thường xuyên và nhúng với việc làm mới trang trong thời gian thực.
• Oracle Jet Core: Phần mở rộng này được tạo bởi Oracle Corporation cung cấp hỗ trợ đầy đủ cho dữ liệu HTML tùy chỉnh của Oracle Jet. Các đoạn trích đi kèm sẽ tự động hoàn thành bất kỳ thuộc tính và thẻ phản lực nào.
• Điều hướng CSS: Cho phép đi đến Định nghĩa cho HTML đến CSS, HTML đến ít hơn và HTML đến SASS. Lệnh Peek Định nghĩa cũng được bật.
• Bộ chuyển đổi ký tự có dấu HTML: Thay thế liền mạch các ký tự đặc biệt bằng các thực thể HTML thích hợp. Phần mở rộng này là hữu ích theo tình huống, nhưng cần thiết khi xử lý các chuỗi có thể nội địa.

Bạn có thể chạy mã Visual Studio từ trình duyệt của mình

Ngoài việc chạy các tệp HTML trong trình duyệt, nó cũng có thể sử dụng toàn bộ mã Visual Studio Online. Điều này yêu cầu bạn khởi chạy một phiên bản cụ thể của chương trình được phát triển để sử dụng trình duyệt.

Nó đáng chú ý rằng phiên bản này nhẹ hơn nhiều so với mã Visual Studio Desktop. Tuy nhiên, nó có thể là một giải pháp đơn giản cho kho lưu trữ và điều hướng tệp dễ dàng, cũng như các thay đổi mã nhỏ.

Nếu bạn muốn thử biến thể trình duyệt mã Visual Studio, bạn có thể bắt đầu ngay lập tức bằng cách nhấp vào đây.

Nhận các tệp HTML của bạn lên và chạy

Mở các tệp HTML trong trình duyệt của bạn được thực hiện dễ dàng với phần mở rộng chuyên dụng cho Visual Studio Code. Nếu bạn quyết định khám phá các dịch vụ mở rộng rộng lớn cho công cụ mã hóa này, chức năng mở trong trình duyệt sẽ chỉ là khởi đầu cho hành trình của bạn.

Bạn đã quản lý để mở tệp HTML của mình trong trình duyệt mà bạn chọn chưa? Bạn đã sử dụng tiện ích mở rộng nào? Cho chúng tôi biết trong phần ý kiến ​​dưới đây.

Tuyên bố miễn trừ trách nhiệm: Một số trang trên trang web này có thể bao gồm một liên kết liên kết. Điều này không ảnh hưởng đến biên tập của chúng tôi theo bất kỳ cách nào.

Gửi cho ai đó

Thiết bị mất tích

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

Làm cách nào để xem mã HTML của tôi trong trình duyệt bằng Code Visual Studio?

Làm cách nào để xem trước VSCode trong trình duyệt?

Làm cách nào để chạy mã HTML trong chrome trên máy Mac?