วิธีดูไฟล์ HTML ในเบราว์เซอร์ด้วย Visual Studio Code

ฉันจะดูรหัส HTML ในเบราว์เซอร์ด้วยรหัส Microsoft Visual Studio ใหม่ได้อย่างไร

ด้วย Notepad ++ คุณมีตัวเลือกให้เรียกใช้ในเบราว์เซอร์ ฉันจะทำสิ่งเดียวกันด้วยรหัส Visual Studio ได้อย่างไร

สำหรับ Windows - เปิดเบราว์เซอร์เริ่มต้นของคุณ - ทดสอบกับ VS Code v 1.1.0

คำตอบสำหรับทั้งการเปิดไฟล์เฉพาะ (ชื่อคือฮาร์ดโค้ด) หรือการเปิดไฟล์อื่น ๆ

ขั้นตอน:

1. ใช้ctrl+ shift+ p(หรือF1) เพื่อเปิด Command Palette

2. พิมพ์หรือในรุ่นเก่าTasks: Configure Task Configure Task Runnerการเลือกมันจะเปิดไฟล์task.json ลบสคริปต์ที่แสดงและแทนที่ด้วยสิ่งต่อไปนี้:

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

   อย่าลืมเปลี่ยนส่วน "args" ของไฟล์ task.json เป็นชื่อไฟล์ของคุณ นี่จะเปิดไฟล์เฉพาะนั้นเสมอเมื่อคุณกด F5

   คุณอาจตั้งค่านี้ให้เปิดไฟล์ใดก็ได้ที่คุณเปิดในเวลานั้นโดยใช้["${file}"]เป็นค่าสำหรับ "args" โปรดทราบว่าการ$ออกไปข้างนอก{...}ดังนั้นจึง["{$file}"]ไม่ถูกต้อง

3. บันทึกไฟล์

4. สลับกลับไปที่ไฟล์ html ของคุณ (ในตัวอย่างนี้คือ "text.html") และกดctrl+ shift+ bเพื่อดูหน้าเว็บของคุณในเว็บเบราว์เซอร์ของคุณ

รหัส VS มีส่วนขยายเซิร์ฟเวอร์สดที่รองรับการเปิดใช้งานเพียงคลิกเดียวจากแถบสถานะ

คุณสมบัติบางอย่าง:

• คลิกเดียวเปิดตัวจากแถบสถานะ
• โหลดสดใหม่
• รองรับ Chrome Debugging Attachment

@InvisibleDev - เพื่อให้การทำงานกับ mac ลองใช้สิ่งนี้:

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

หากคุณเปิด Chrome อยู่แล้วมันจะเปิดไฟล์ html ของคุณในแท็บใหม่

หากคุณต้องการโหลดแบบสดใหม่คุณสามารถใช้ gulp-webserver ซึ่งจะคอยดูการเปลี่ยนแปลงของไฟล์และหน้าโหลดใหม่ด้วยวิธีนี้คุณไม่ต้องกด F5 ทุกครั้งบนหน้าของคุณ:

นี่คือวิธีที่จะทำ:

• เปิด command prompt (cmd) และพิมพ์

  การติดตั้ง npm --save-dev gulp-webserver

• ใส่Ctrl + Shift + Pใน VS รหัสและพิมพ์กำหนดค่างานวิ่ง เลือกและกด Enter มันจะเปิดไฟล์ task.json ให้คุณ ลบทุกอย่างออกจากนั้นใส่รหัสต่อไปนี้

tasks.json

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

• ในไดเรกทอรีรากของโครงการของคุณเพิ่ม gulpfile.js และป้อนรหัสต่อไปนี้:

gulpfile.js

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

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

• ตอนนี้ในรหัส VS ใส่Ctrl + Shift + Pและพิมพ์ "Run Task" เมื่อคุณป้อนคุณจะเห็นงาน "webserver" ที่คุณเลือกและกด Enter

เว็บเซิร์ฟเวอร์ของคุณจะเปิดหน้าเว็บในเบราว์เซอร์เริ่มต้นของคุณ ตอนนี้การเปลี่ยนแปลงใด ๆ ที่คุณจะทำกับหน้า HTML หรือ CSS ของคุณจะถูกโหลดใหม่โดยอัตโนมัติ

นี่คือข้อมูลเกี่ยวกับวิธีกำหนดค่า'gulp-webserver'สำหรับพอร์ตอินสแตนซ์และหน้าใดที่จะโหลด ...

คุณยังสามารถรันงานของคุณเพียงแค่ป้อนCtrl + Pและพิมพ์เว็บเซิร์ฟเวอร์งาน

ตอนนี้คุณสามารถติดตั้งส่วนขยายดูในเบราว์เซอร์ดูในเบราว์เซอร์ฉันทดสอบมันบน windows ด้วย chrome และมันใช้งานได้

รุ่น vscode: 1.10.2

นี่คือเวอร์ชัน 2.0.0 สำหรับเอกสารปัจจุบันใน Chrome ที่มีแป้นพิมพ์ลัด:

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"
}

สำหรับการใช้งานบนเว็บเซิร์ฟเวอร์:

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

ใน linux คุณสามารถใช้xdg-openคำสั่งเพื่อเปิดไฟล์ด้วยเบราว์เซอร์เริ่มต้น:

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

ขั้นตอนที่ 1:

1. เปิดรหัส Visual Studio จากนั้นไปที่ส่วนขยาย

2. ค้นหา "open in browser"

   3. ติดตั้งมัน

   4. คลิกขวาที่ไฟล์ html ของคุณคุณจะพบตัวเลือก "เปิดในเบราว์เซอร์"

   นั่นคือทั้งหมด ................................................ ......

ฉันเพิ่งโพสต์ขั้นตอนที่ฉันใช้จากmsdnบล็อกอีกครั้ง มันอาจช่วยชุมชน

สิ่งนี้จะช่วยคุณในการตั้งค่าเว็บเซิร์ฟเวอร์ภายในที่รู้จักกันในชื่อlite-serverด้วยVS Codeและยังแนะนำให้คุณโฮสต์htmlไฟล์คงที่ในlocalhostและรหัสdebugของคุณJavascript

1. ติดตั้ง Node.js

หากยังไม่ได้ติดตั้งให้ไปที่นี่

มันมาพร้อมกับ npm (ผู้จัดการแพ็คเกจสำหรับการรับและการจัดการห้องสมุดการพัฒนาของคุณ)

2. สร้างโฟลเดอร์ใหม่สำหรับโครงการของคุณ

ที่ใดที่หนึ่งในไดรฟ์ของคุณให้สร้างโฟลเดอร์ใหม่สำหรับเว็บแอปของคุณ

3. เพิ่มไฟล์ package.json ไปยังโฟลเดอร์โครงการ

จากนั้นคัดลอก / วางข้อความต่อไปนี้:

{
   "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. ติดตั้งเว็บเซิร์ฟเวอร์

ในหน้าต่างเทอร์มินัล (พรอมต์คำสั่งใน Windows) ที่เปิดในโฟลเดอร์โครงการของคุณให้เรียกใช้คำสั่งนี้:

npm install

สิ่งนี้จะติดตั้ง lite-server (กำหนดไว้ใน package.json) เซิร์ฟเวอร์คงที่ที่โหลด index.html ในเบราว์เซอร์เริ่มต้นของคุณและรีเฟรชอัตโนมัติเมื่อมีการเปลี่ยนแปลงไฟล์แอปพลิเคชัน

5. เริ่มต้นเว็บเซิร์ฟเวอร์ในท้องถิ่น!

(สมมติว่าคุณมีไฟล์ index.html ในโฟลเดอร์โครงการของคุณ)

ในหน้าต่างเทอร์มินัลเดียวกัน (พรอมต์คำสั่งใน Windows) ให้เรียกใช้คำสั่งนี้:

npm start

รอสักครู่และ index.html จะถูกโหลดและแสดงในเบราว์เซอร์เริ่มต้นของคุณที่ให้บริการโดยเว็บเซิร์ฟเวอร์ในท้องถิ่นของคุณ!

lite-server กำลังดูไฟล์ของคุณและรีเฟรชหน้าเว็บทันทีที่คุณทำการเปลี่ยนแปลงไฟล์ html, js หรือ css

และหากคุณมีรหัส VS กำหนดค่าให้บันทึกอัตโนมัติ (เมนูไฟล์ / บันทึกอัตโนมัติ) คุณจะเห็นการเปลี่ยนแปลงในเบราว์เซอร์ขณะที่คุณพิมพ์!

หมายเหตุ:

• อย่าปิดพรอมต์บรรทัดคำสั่งจนกว่าคุณจะเขียนโค้ดในแอปของคุณในแต่ละวัน
• มันเปิดบนhttp: // localhost: 10001แต่คุณสามารถเปลี่ยนพอร์ตได้โดยแก้ไขไฟล์ package.json

แค่นั้นแหละ. ตอนนี้ก่อนเซสชั่นการเข้ารหัสใด ๆ เพียงแค่พิมพ์ npm start แล้วคุณก็พร้อมที่จะไป!

โพสต์ครั้งแรกที่นี่ในmsdnบล็อก เครดิตไปที่ผู้แต่ง:@Laurent Duveau

หากคุณเป็นเพียง Mac tasks.jsonไฟล์นี้:

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

... คือทั้งหมดที่คุณต้องเปิดไฟล์ปัจจุบันใน Safari โดยสมมติว่าส่วนขยายของมันคือ ".html"

สร้างtasks.jsonตามที่อธิบายไว้ข้างต้นและเรียกใช้ด้วย⌘+ shift+b +

หากคุณต้องการให้เปิดใน Chrome แล้ว:

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

สิ่งนี้จะทำสิ่งที่คุณต้องการเช่นเดียวกับที่เปิดในแท็บใหม่หากแอปเปิดอยู่แล้ว

โซลูชันแบบคลิกเดียวเพียงติดตั้งส่วนขยายแบบเปิดในเบราว์เซอร์จากตลาด Visual Studio

อัปเดตคำตอบในวันที่ 18 เมษายน 2020

คลิกที่ไอคอนจัดการด้านล่างซ้าย คลิกส่วนขยายหรือทางลัดCtrl+Shift+X

แล้วการค้นหาในส่วนต่อขยายกับเรื่องนี้ประโยคที่สำคัญเปิดในเบราว์เซอร์เริ่มต้น คุณจะพบสิ่งนี้ขยาย มันจะดีกว่าสำหรับฉัน

ตอนนี้คลิกขวาที่htmlไฟล์และคุณจะเห็นเปิดในเบราว์เซอร์เริ่มต้นหรือทางลัดCtrl+1เพื่อดูhtmlไฟล์ในเบราว์เซอร์

สำหรับ Mac - เปิดใน Chrome ทดสอบบน VS Code v 1.9.0

1. ใช้Command+ shift+ pเพื่อเปิด Command Palette

2. พิมพ์ Configure Task Runner ในครั้งแรกที่คุณทำเช่นนี้ VS Code จะให้เมนูเลื่อนลงหากคุณเลือก "อื่น ๆ " หากคุณเคยทำสิ่งนี้มาก่อนรหัส VS จะส่งคุณโดยตรงไปที่ task.json

3. เมื่ออยู่ในไฟล์ task.json ลบสคริปต์ที่แสดงและแทนที่ด้วยสิ่งต่อไปนี้:

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

4. สลับกลับไปเป็นไฟล์ html ของคุณแล้วกดCommand+ Shift+ bเพื่อดูหน้าของคุณใน Chrome

CTRL+SHIFT+Pจะทำให้จานคำสั่งขึ้นมา
ขึ้นอยู่กับสิ่งที่คุณกำลังทำงานแน่นอน ตัวอย่างในแอป ASP.net คุณสามารถพิมพ์:
>kestrelจากนั้นเปิดเว็บเบราว์เซอร์และพิมพ์localhost:(your port here)และจากนั้นเปิดเว็บเบราว์เซอร์ของคุณและพิมพ์ใน

หากคุณพิมพ์ลงไป>มันจะแสดงให้คุณเห็นคำสั่งแสดงและเรียกใช้

หรือในกรณีของคุณด้วย HTML ฉันคิดว่า F5หลังจากเปิดชุดคำสั่งควรเปิดตัวดีบั๊ก

แหล่งที่มา: ลิงค์

การเปิดไฟล์ในเบราว์เซอร์ Opera (บน Windows 64 บิต) เพียงเพิ่มบรรทัดนี้:

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

ให้ความสนใจกับรูปแบบพา ธ ที่"command": line อย่าใช้รูปแบบ "C: \ path_to_exe \ runme.exe"

ในการรันภารกิจนี้ให้เปิดไฟล์ html ที่คุณต้องการดูกด F1 พิมพ์งานโอเปร่าและกด Enter

สคริปต์นักวิ่งของฉันดูเหมือนว่า:

{
    "version": "0.1.0",

    "command": "explorer",

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

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

และเป็นเพียงการเปิด explorer ของฉันเมื่อฉันกด ctrl shift b ในไฟล์ index.html ของฉัน

นี่คือวิธีที่คุณสามารถเรียกใช้ได้ในหลายเบราว์เซอร์สำหรับ 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}"]
     }   
    ]
}

สังเกตุว่าฉันไม่ได้พิมพ์อะไรเพื่อขอบเพราะ Edge เป็นเบราว์เซอร์เริ่มต้นของฉันเพิ่งให้ชื่อไฟล์

แก้ไข: คุณไม่จำเป็นต้องใช้ -incognito หรือ -private-window ... ฉันแค่ต้องการดูมันในหน้าต่างส่วนตัว

เมื่อเร็ว ๆ นี้พบกับฟีเจอร์นี้ในหนึ่งในบทช่วยสอนเกี่ยวกับ visual Studio code ที่www.lynda.com

กด Ctrl + K แล้วตามด้วย M มันจะเปิด "เลือกโหมดภาษา" (หรือคลิกที่มุมล่างขวามือที่ระบุว่า HTML ก่อนหน้ายิ้ม) พิมพ์เครื่องหมายลงแล้วกด Enter

ตอนนี้กด Ctrl + K ตามด้วย V มันจะเปิด html ของคุณในแท็บใกล้โดย

Tadaaa !!!

ตอนนี้คำสั่ง emmet ไม่ทำงานในโหมดนี้ในไฟล์ html ของฉันดังนั้นฉันกลับไปที่สถานะเดิม (note - tellisense ของแท็ก html ทำงานได้อย่างสมบูรณ์)

หากต้องการไปยังสถานะดั้งเดิม - กด Ctrl + K แล้วตามด้วย M เลือกตรวจจับอัตโนมัติ คำสั่ง emmet เริ่มทำงาน หากคุณมีความสุขกับผู้ดู html เท่านั้นคุณไม่จำเป็นต้องกลับไปสู่สถานะเดิม

สงสัยว่าทำไม vscode ไม่มีตัวเลือก html viewer โดยค่าเริ่มต้นเมื่อมันสามารถแจกจ่ายไฟล์ html ในโหมด markdown

อย่างไรก็ตามมันก็เจ๋ง Happy vscoding :)

นี่คือเวอร์ชั่น 2.0.0 สำหรับ 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 จะเปิดเบราว์เซอร์เริ่มต้น หรือคุณสามารถกด Ctrl + shift + P เพื่อเปิดหน้าต่างคำสั่งแล้วเลือก "ดูในเบราว์เซอร์" จะต้องบันทึกรหัส html ในไฟล์ (รหัสที่ไม่ได้บันทึกบนตัวแก้ไข - ไม่มีส่วนขยายไม่ทำงาน)

อาจเป็นไปได้มากที่สุดที่จะสามารถหาคำตอบจากคำตอบข้างต้น แต่เห็นว่าไม่มีใครทำงานให้ฉัน ( vscode v1.34) ฉันคิดว่าฉันจะแบ่งปันประสบการณ์ของฉัน ถ้าอย่างน้อยหนึ่งคนพบว่าเป็นประโยชน์แล้วเย็นไม่ได้โพสต์เสีย, amiirte ?

ต่อไปโซลูชันของฉัน ( windows) ถูกสร้างขึ้นบนสุดของ @ noontz การกำหนดค่าของเขาอาจเพียงพอสำหรับรุ่นที่เก่ากว่าvscodeแต่ไม่ใช่1.34(อย่างน้อยฉันก็ไม่สามารถทำงานได้ .. )

การกำหนดค่าของเราเกือบจะเหมือนกันบันทึกสถานที่ให้บริการเดียว - ทรัพย์สินที่เป็นgroupทรัพย์สิน ฉันไม่แน่ใจว่าทำไม แต่หากไม่มีสิ่งนี้งานของฉันจะไม่ปรากฏในชุดคำสั่ง

ดังนั้น. ที่ทำงานtasks.jsonสำหรับwindowsผู้ใช้ที่ทำงาน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": []
        }
    ]
}

โปรดทราบว่าproblemMatcherคุณสมบัตินี้ไม่จำเป็นสำหรับการทำงาน แต่ไม่จำเป็นต้องมีขั้นตอนพิเศษเพิ่มเติมในตัวคุณ พยายามอ่านเอกสารเกี่ยวกับอสังหาริมทรัพย์นี้ แต่ฉันหนาเกินกว่าจะเข้าใจได้ หวังว่าใครบางคนจะมาและเรียนฉัน แต่ใช่ขอบคุณล่วงหน้าสำหรับเรื่องนั้น สิ่งที่ฉันรู้คือ - รวมคุณสมบัตินี้และctrl+shift+bเปิดhtmlไฟล์ปัจจุบันในchromeแท็บใหม่โดยไม่ยุ่งยาก

ง่าย.

เปิด Chrome ที่กำหนดเองพร้อม URL จากพรอมต์

{
  "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"
    }
  ]
}

เปิด Chrome ที่กำหนดเองพร้อมไฟล์ที่ใช้งานอยู่

{
  "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": []
},

หมายเหตุ

• หากจำเป็นให้เปลี่ยน windowsคุณสมบัติด้วยระบบปฏิบัติการอื่น
• แทนที่ ${config:chrome.executable}ด้วยตำแหน่ง Chrome ที่กำหนดเองของคุณเช่น"C:/Program Files (x86)/Google/Chrome/Application/chrome.exe"
• แทนที่${config:chrome.profileDir}ด้วยไดเรกทอรีโปรไฟล์ chrome ของคุณเช่น "C:/My/Data/chrome/profile"หรือทิ้งไว้
• คุณสามารถเก็บตัวแปรไว้ด้านบนได้ถ้าต้องการ โดยเพิ่มรายการต่อไปนี้ในsettings.json- user หรือ workspace -, ปรับ path ตามความต้องการของคุณ:

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

• คุณสามารถใช้ตัวแปรเหล่านี้ได้อีกครั้งเช่นlaunch.jsonเพื่อการดีบัก"runtimeExecutable": "${config:chrome.executable}"