Cách xem tệp HTML trong trình duyệt bằng Visual Studio Code

Làm cách nào tôi có thể xem mã HTML của mình trong trình duyệt với Microsoft Visual Studio Code mới?

Với Notepad ++, bạn có tùy chọn Chạy trên trình duyệt. Làm cách nào tôi có thể làm điều tương tự với Visual Studio Code?

Đối với Windows - Mở Trình duyệt mặc định của bạn - Đã thử nghiệm trên Mã VS v 1.1.0

Trả lời cho cả việc mở một tệp cụ thể (tên được mã hóa cứng) HOẶC mở BẤT K file tệp nào khác.

Các bước:

1. Sử dụng ctrl+ shift+ p(hoặc F1) để mở Bảng lệnh.

2. Nhập Tasks: Configure Taskhoặc trên các phiên bản cũ hơn Configure Task Runner. Chọn nó sẽ mở tệp task.json . Xóa tập lệnh được hiển thị và thay thế nó bằng cách sau:

   {
       "version": "0.1.0",
       "command": "explorer",    
       "windows": {
           "command": "explorer.exe"
       },
       "args": ["test.html"]
   }

   Hãy nhớ thay đổi phần "args" của tệp task.json thành tên tệp của bạn. Điều này sẽ luôn mở tệp cụ thể đó khi bạn nhấn F5.

   Bạn cũng có thể đặt cài đặt này để mở bất kỳ tệp nào bạn mở tại thời điểm đó bằng cách sử dụng ["${file}"]làm giá trị cho "args". Lưu ý rằng $đi ra ngoài {...}, vì vậy ["{$file}"]là không chính xác.

3. Lưu các tập tin.

4. Quay trở lại tệp html của bạn (trong ví dụ này là "text.html") và nhấn ctrl+ shift+ bđể xem trang của bạn trong Trình duyệt web.

Mã VS có Gia hạn Máy chủ Trực tiếp hỗ trợ khởi chạy một lần nhấp từ thanh trạng thái.

Một số tính năng:

• Khởi chạy một lần nhấp từ Thanh trạng thái
• Tải lại trực tiếp
• Hỗ trợ tệp đính kèm gỡ lỗi Chrome

@InvisibleDev - để làm việc này trên máy Mac đang thử bằng cách này:

{
    "version": "0.1.0",
    "command": "Chrome",
    "osx": {
        "command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
    },
    "args": [
        "${file}"
    ]
}

Nếu bạn đã mở chrome, nó sẽ khởi chạy tệp html của bạn trong một tab mới.

Nếu bạn muốn tải lại trực tiếp, bạn có thể sử dụng gulp-webserver, ứng dụng này sẽ theo dõi các thay đổi tệp của bạn và tải lại trang, theo cách này bạn không phải nhấn F5 mỗi lần trên trang của mình:

Đây là cách làm:

• Mở dấu nhắc lệnh (cmd) và gõ

  cài đặt npm --save-dev gulp-webserver

• Nhập Ctrl + Shift + P trong Mã VS và nhập Cấu hình Trình chạy tác vụ . Chọn nó và nhấn enter. Nó sẽ mở tệp task.json cho bạn. Xóa mọi thứ khỏi nó, chỉ nhập mã sau

task.json

{
    "version": "0.1.0",
    "command": "gulp",
    "isShellCommand": true,
    "args": [
        "--no-color"
    ],
    "tasks": [
        {
            "taskName": "webserver",
            "isBuildCommand": true,
            "showOutput": "always"
        }
    ]
}

• Trong thư mục gốc của dự án của bạn thêm gulpfile.js và nhập mã sau đây:

gulpfile.js

var gulp = require('gulp'),
    webserver = require('gulp-webserver');

gulp.task('webserver', function () {
    gulp.src('app')
        .pipe(webserver({
            livereload: true,
            open: true
        }));
});

• Bây giờ trong Mã VS, nhập Ctrl + Shift + P và nhập "Chạy tác vụ" khi bạn nhập nó, bạn sẽ thấy tác vụ "máy chủ web" của mình được chọn và nhấn enter.

Máy chủ web của bạn bây giờ sẽ mở trang của bạn trong trình duyệt mặc định của bạn. Bây giờ mọi thay đổi bạn sẽ làm đối với các trang HTML hoặc CSS của bạn sẽ được tự động tải lại.

Dưới đây là thông tin về cách định cấu hình 'gulp-webserver' cho cổng ví dụ và trang nào để tải, ...

Bạn cũng có thể chạy tác vụ của mình chỉ bằng cách nhập Ctrl + P và nhập máy chủ web tác vụ

Bây giờ bạn có thể cài đặt tiện ích mở rộng Xem trong Trình duyệt . Tôi đã thử nghiệm nó trên windows với chrome và nó đang hoạt động.

phiên bản vscode: 1.10.2

Đây là phiên bản 2.0.0 cho tài liệu hiện tại trong phím tắt Chrome w / keyboard:

tasks.json

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Chrome",
            "type": "process",
            "command": "chrome.exe",
            "windows": {
                "command": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"
            },
            "args": [
                "${file}"
            ],
            "problemMatcher": []
        }
    ]
}

keybindings.json :

{
    "key": "ctrl+g",
    "command": "workbench.action.tasks.runTask",
    "args": "Chrome"
}

Để chạy trên máy chủ web:

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Trong linux, bạn có thể sử dụng xdg-openlệnh để mở tệp bằng trình duyệt mặc định:

{
    "version": "0.1.0",
    "linux": {
        "command": "xdg-open"
    },
    "isShellCommand": true,
    "showOutput": "never",
    "args": ["${file}"]
}

Bước 1:

1. Mở Visual Studio Code, sau đó vào phần mở rộng.

2. Tìm kiếm "mở trong trình duyệt".

   3. Cài đặt nó.

   4. Nhấp chuột phải vào tệp html của bạn, bạn sẽ tìm thấy tùy chọn "Mở trong Trình duyệt".

   Đó là tất cả................................................ ......

Tôi chỉ đăng lại các bước tôi đã sử dụng từ msdn blog. 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 địa phương gọi là Lite-server với VS Code, và cũng có thể hướng dẫn bạn để lưu trữ tĩnh của bạn htmltập tin trong localhostvà debugbạnJavascript mã.

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ý 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 pack.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": "^1.3.1"
   }
}

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

Trong cửa sổ terminal (dấu nhắc lệnh trong Windows) được 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 máy chủ lite (được xác định trong gói.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 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

Đợi một chút 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ấu hình Mã VS để tự động lưu (menu Tệp / Tự động lưu), bạn sẽ thấy các thay đổi trong trình duyệt khi bạn nhập!

Ghi chú:

• 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 gõ npm bắt đầu và bạn đã sẵn sàng để đi!

Ban đầu được đăng ở đây trong msdnblog. Tín dụng đi đến Tác giả:@Laurent Duveau

Nếu bạn chỉ trên Mac tasks.jsontệp này :

{
    "version": "0.1.0",
    "command": "open",
    "args": ["${file}"],
}

... là tất cả những gì bạn cần để mở tệp hiện tại trong Safari, giả sử phần mở rộng của nó là ".html".

Tạo tasks.jsonnhư mô tả ở trên và gọi nó bằng ⌘+ shift+ b.

Nếu bạn muốn nó mở trong Chrome thì:

{
    "version": "0.1.0",
    "command": "open",
    "args": ["-a", "Chrome.app", "${file}"],
}

Điều này sẽ làm những gì bạn muốn, như khi mở trong một tab mới nếu ứng dụng đã mở.

Giải pháp một cú nhấp chuột chỉ cần cài đặt Tiện ích mở rộng trong trình duyệt từ thị trường Visual Studio.

Cập nhật câu trả lời vào ngày 18 tháng 4 năm 2020

Nhấp vào biểu tượng quản lý dưới cùng bên trái này . Nhấp vào Tiện ích mở rộng hoặc Cắt ngắnCtrl+Shift+X

Sau đó Tìm kiếm trong phần mở rộng với câu quan trọng này Mở trong Trình duyệt mặc định . Bạn sẽ tìm thấy điều này mở rộng . Nó là tốt hơn với tôi.

Bây giờ, nhấp chuột phải vào htmltệp và bạn sẽ thấy Mở trong Trình duyệt mặc định hoặc Cắt ngắn Ctrl+1để xem htmltệp trong trình duyệt.

Dành cho Mac - Mở trong Chrome - Đã thử nghiệm trên Mã VS v 1.9.0

1. Sử dụng Command+ shift+ pđể mở Bảng lệnh.

2. Nhập vào Cấu hình Trình chạy tác vụ, lần đầu tiên bạn thực hiện việc này, Mã VS sẽ cung cấp cho bạn menu cuộn xuống, nếu nó chọn "Khác". Nếu bạn đã làm điều này trước đây, Mã VS sẽ chỉ gửi bạn trực tiếp đến task.json.

3. Một lần trong tệp task.json. Xóa tập lệnh được hiển thị và thay thế nó bằng cách sau:

{
    "version": "0.1.0",
    "command": "Chrome",
    "osx": {
        "command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
    },
    "args": ["${file}"]
}

4. Quay trở lại tệp html của bạn và nhấn Command+ Shift+ bđể xem trang của bạn trong Chrome.

CTRL+SHIFT+Psẽ đưa lên bảng lệnh.
Tất nhiên tùy thuộc vào những gì bạn đang chạy tất nhiên. Ví dụ trong ứng dụng ASP.net, bạn có thể nhập:
>kestrelsau đó mở trình duyệt web của mình và nhậplocalhost:(your port here) .

Nếu bạn gõ vào >nó sẽ hiển thị cho bạn các lệnh hiển thị và chạy

Hoặc trong trường hợp của bạn với HTML, tôi nghĩ F5sau khi mở bảng lệnh nên mở trình gỡ lỗi.

Nguồn: liên kết

Mở tệp trong trình duyệt Opera (trên Windows 64 bit). Chỉ cần thêm dòng này:

{
"version": "0.1.0",
"command": "opera",
"windows": {
    "command": "///Program Files (x86)/Opera/launcher.exe"
},
"args": ["${file}"] }

Hãy chú ý đến định dạng đường dẫn trên "lệnh": line. Không sử dụng định dạng "C: \ path_to_exe \ runme.exe".

Để chạy tác vụ này, hãy mở tệp html bạn muốn xem, nhấn F1, nhập tác vụ opera và nhấn enter

kịch bản chạy của tôi trông giống như:

{
    "version": "0.1.0",

    "command": "explorer",

    "windows": {
        "command": "explorer.exe"
    },

    "args": ["{$file}"]
}

và nó chỉ mở trình thám hiểm của tôi khi tôi nhấn ctrl shift b trong tệp index.html của mình

Đây là cách bạn có thể chạy nó trong nhiều trình duyệt cho windows

{
 "version": "0.1.0",
 "command": "cmd",
 "args": ["/C"],
 "isShellCommand": true,
 "showOutput": "always",
 "suppressTaskName": true,
 "tasks": [
     {   
         "taskName": "Chrome",
         "args": ["start chrome -incognito \"${file}\""]
     },
     {   
         "taskName": "Firefox",
         "args": ["start firefox -private-window \"${file}\""]
     },
     {   
         "taskName": "Edge",
         "args": ["${file}"]
     }   
    ]
}

lưu ý rằng tôi đã không gõ bất cứ điều gì trong đối số cạnh vì Edge là trình duyệt mặc định của tôi chỉ đặt cho nó tên của tệp.

EDIT: bạn cũng không cần -incognito hay -private-window ... chỉ là tôi muốn xem nó trong một cửa sổ riêng

Gần đây đã bắt gặp tính năng này trong một trong những hướng dẫn về mã phòng thu trực quan tại www.lynda.com

Nhấn Ctrl + K theo sau là M, nó sẽ mở "Chọn chế độ ngôn ngữ" (hoặc nhấp vào góc dưới cùng bên phải có chữ HTML trước mặt cười đó), nhập đánh dấu và nhấn enter

Bây giờ Nhấn Ctrl + K theo sau là V, nó sẽ mở html của bạn trong một tab gần.

Tadaaa !!!

Bây giờ các lệnh emmet không hoạt động ở chế độ này trong tệp html của tôi, vì vậy tôi đã quay lại trạng thái ban đầu (lưu ý - thẻ html Tellisense đã hoạt động hoàn hảo)

Để chuyển đến trạng thái ban đầu - Nhấn Ctrl + K theo sau là M, chọn tự động phát hiện. lệnh emmet bắt đầu làm việc. Nếu bạn hài lòng với trình xem chỉ html, thì bạn không cần phải quay lại trạng thái ban đầu.

Tự hỏi tại sao vscode không có tùy chọn trình xem html theo mặc định, khi nó có thể phân tán tệp html ở chế độ đánh dấu.

Dù sao nó là mát mẻ. Chúc mừng vscoding :)

Đây là phiên bản 2.0.0 cho Mac OSx:

{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "label": "echo",
      "type": "shell",
      "command": "echo Hello"
    },
    {
      "label":"chrome",
      "type":"process",
      "command":"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
      "args": [
        "${file}"
      ]
    }
  ]
}

Ctrl + F1 sẽ mở trình duyệt mặc định. Ngoài ra, bạn có thể nhấn Ctrl + shift + P để mở cửa sổ lệnh và chọn "Xem trong Trình duyệt". Mã html phải được lưu trong một tệp (mã chưa được lưu trên trình chỉnh sửa - không có phần mở rộng, không hoạt động)

có lẽ hầu hết sẽ có thể tìm ra giải pháp từ các câu trả lời ở trên nhưng khi thấy cách mà không ai làm việc cho tôi ( vscode v1.34) tôi nghĩ tôi sẽ chia sẻ kinh nghiệm của mình. Nếu ít nhất một người thấy nó hữu ích sau đó, mát mẻ không phải là một bài viết lãng phí, amiirte ?

dù sao, giải pháp của tôi ( windows) được xây dựng trên đỉnh của @ noontz. cấu hình của anh ta có thể đủ cho các phiên bản cũ hơn vscodenhưng không phải với1.34 (ít nhất, tôi không thể làm cho nó hoạt động được ..).

cấu hình của chúng tôi gần như giống hệt nhau lưu một thuộc tính - thuộc tính đó, thuộc grouptính. Tôi không chắc tại sao nhưng nếu không có điều này, nhiệm vụ của tôi thậm chí sẽ không xuất hiện trong bảng lệnh.

vì thế. một công việc tasks.jsoncho windowsngười dùng đang chạy vscode 1.34:

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Chrome",
            "type": "process",
            "command": "chrome.exe",
            "windows": {
                "command": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"
            },
            "args": [
                "${file}"
            ],
            "group": "build",
            "problemMatcher": []
        }
    ]
}

lưu ý rằng problemMatchertài sản không bắt buộc để làm việc này nhưng không có nó thì một bước thủ công thêm được áp đặt cho bạn. đã cố đọc tài liệu về tài sản này nhưng tôi quá dày để hiểu. hy vọng ai đó sẽ đến và học tôi nhưng vâng, cảm ơn trước vì điều đó. tất cả những gì tôi biết là - bao gồm thuộc tính này và ctrl+shift+bmở htmltệp hiện tại trong một chrometab mới , không gặp rắc rối.

dễ dàng.

Mở Chrome tùy chỉnh bằng URL từ dấu nhắc

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Open Chrome",
      "type": "process",
      "windows": {
        "command": "${config:chrome.executable}"
      },
      "args": ["--user-data-dir=${config:chrome.profileDir}", "${input:url}"],
      "problemMatcher": []
    }
  ],
  "inputs": [
    {
      "id": "url",
      "description": "Which URL?",
      "default": "http://localhost:8080",
      "type": "promptString"
    }
  ]
}

Mở Chrome tùy chỉnh với tệp hoạt động

{
  "label": "Open active file in Chrome",
  "type": "process",
  "command": "chrome.exe",
  "windows": {
    "command": "${config:chrome.executable}"
  },
  "args": ["--user-data-dir=${config:chrome.profileDir}", "${file}"],
  "problemMatcher": []
},

Ghi chú

• nếu cần thiết, thay thế windowstài sản bằng hệ điều hành khác
• thay thế ${config:chrome.executable}bằng vị trí chrome tùy chỉnh của bạn, ví dụ:"C:/Program Files (x86)/Google/Chrome/Application/chrome.exe"
• thay thế ${config:chrome.profileDir}bằng thư mục hồ sơ chrome yêu cầu của bạn, ví dụ "C:/My/Data/chrome/profile" hoặc để nó ra
• Bạn có thể giữ các biến như trên nếu bạn muốn. Để làm như vậy, hãy thêm các mục sau vào settings.json- người dùng hoặc không gian làm việc -, điều chỉnh đường dẫn theo nhu cầu của bạn:

"chrome.executable": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
"chrome.profileDir": "C:/My/Data/chrome/profile"

• Bạn có thể sử dụng lại các biến này, ví dụ như trong launch.jsonmục đích gỡ lỗi:"runtimeExecutable": "${config:chrome.executable}"