Visual Studio Code ile tarayıcıda bir HTML dosyası nasıl görüntülenir

HTML kodumu yeni Microsoft Visual Studio Koduna sahip bir tarayıcıda nasıl görüntüleyebilirim?

Notepad ++ ile bir tarayıcıda çalıştırma seçeneğine sahipsiniz. Aynı şeyi Visual Studio Code ile nasıl yapabilirim?

Windows için - Varsayılan Tarayıcınızı açın - VS Code v 1.1.0 üzerinde test edilmiştir

Hem belirli bir dosyayı açmaya (ad sabit kodlu) VEYA başka bir dosyayı açmaya yanıt.

Adımlar:

1. Komut Paletini açmak için ctrl+ shift+ p(veya F1) tuşlarını kullanın .

2. Tasks: Configure TaskEski sürümleri yazın veya üzerine yazın Configure Task Runner. Bunu seçtiğinizde task.json dosyası açılır . Görüntülenen komut dosyasını silin ve aşağıdaki ile değiştirin:

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

   Task.json dosyasının "args" bölümünü dosyanızın adına değiştirmeyi unutmayın. F5 tuşuna bastığınızda bu dosya her zaman açılır.

   Bunu, ["${file}"]"args" değeri olarak o anda açık olan herhangi bir dosyayı açmak için de ayarlayabilirsiniz . Bunun $dışında gittiğini unutmayın {...}, bu yüzden ["{$file}"]yanlış.

3. Dosya 'yı kaydet.

4. Html dosyanıza geri dönün (bu örnekte "text.html") ve sayfanızı Web Tarayıcınızda görüntülemek için ctrl+ shift+ tuşlarına basın b.

VS Kodunda Canlı Sunucu Uzantısı var durum çubuğundan tek tıklamayla başlatılmasını destekleyen vardır.

Bazı özellikler:

• Durum Çubuğundan Tek Tıkla Başlatma
• Canlı Yeniden Yükleme
• Chrome Hata Ayıklama Eki Desteği

@InvisibleDev - bunu kullanarak bir mac üzerinde çalışmasını sağlamak için:

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

Chrome zaten açıksa, html dosyanızı yeni bir sekmede başlatır.

Canlı yeniden yükleme yapmak istiyorsanız, dosya değişikliklerinizi ve yeniden yükleme sayfanızı izleyecek olan gulp-webserver'i kullanabilirsiniz, böylece sayfanızda her seferinde F5 tuşuna basmanız gerekmez:

İşte nasıl yapılacağı:

• Komut istemini (cmd) açın ve yazın

  npm install - kaydetme-dev gulp-webserver

• VS Kodu'na Ctrl + Shift + P girin ve Görev Çalıştırıcısını Yapılandır yazın . Seçin ve enter tuşuna basın. Senin için görevleri.json dosyasını açacaktır. Sonundaki her şeyi kaldırın, sadece aşağıdaki kodu girin

tasks.json

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

• Projenizin kök dizinine gulpfile.js dosyasını ekleyin ve aşağıdaki kodu girin:

gulpfile.js

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

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

• Şimdi VS Kodunda Ctrl + Shift + P girin ve "Görevi Çalıştır" yazın, girdiğinizde "web sunucusu" görevinizi seçili görürsünüz ve enter tuşuna basın.

Web sunucunuz artık sayfanızı varsayılan tarayıcınızda açacak. Artık HTML veya CSS sayfalarınızda yapacağınız değişiklikler otomatik olarak yeniden yüklenecek.

Aşağıda, örneğin bağlantı noktası 'gulp-webserver' in nasıl yapılandırılacağı ve hangi sayfanın yükleneceği hakkında bilgi ...

Ayrıca Ctrl + P girip görev web sunucusu yazarak görevinizi de çalıştırabilirsiniz

Artık bir uzantı yükleyebilirsiniz View In Browser . Kromlu pencerelerde test ettim ve çalışıyor.

vscode sürümü: 1.10.2

Klavye kısayoluyla Chrome'daki geçerli belge için 2.0.0 sürümü:

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

Bir web sunucusunda çalıştırmak için:

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

Linux'ta, xdg-opendosyayı varsayılan tarayıcıyla açmak için komutu kullanabilirsiniz :

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

Aşama 1:

1. Visual Studio Code'u açın ve uzantılara gidin.

2. "Tarayıcıda aç" ı arayın.

   3. takın.

   4. html dosyanıza sağ tıklayın, "Tarayıcıda Aç" seçeneğini bulacaksınız.

   Bu kadar................................................ ......

Blog'dan kullandığım adımları tekrar gönderiyorum msdn. Topluma yardımcı olabilir.

Bu kurulum için bilinen bir yerel web sunucusu size yardımcı olacaktır lite-sunucuya sahip VS Codeve aynı zamanda size statik barındırmak için rehberlik htmldosyaları localhostve debugsizin Javascriptkodunuzu.

1. Node.js dosyasını yükleyin

Henüz yüklenmediyse buraya getirin

Npm ile birlikte gelir (geliştirme kitaplıklarınızı almak ve yönetmek için paket yöneticisi)

2. Projeniz için yeni bir klasör oluşturun

Sürücünüzün herhangi bir yerinde, web uygulamanız için yeni bir klasör oluşturun.

3. Proje klasörüne bir package.json dosyası ekleyin

Ardından aşağıdaki metni kopyalayın / yapıştırın:

{
   "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. Web sunucusunu kurun

Proje klasörünüzde açılan bir terminal penceresinde (Windows'ta komut istemi) şu komutu çalıştırın:

npm install

Bu işlem, varsayılan tarayıcınıza index.html yükleyen ve uygulama dosyaları değiştiğinde otomatik olarak yenilenen statik bir sunucu olan lite-server'ı (package.json içinde tanımlanır) yükler.

5. Yerel web sunucusunu başlatın!

(Proje klasörünüzde bir index.html dosyanız olduğunu varsayarsak).

Aynı terminal penceresinde (Windows'ta komut istemi) şu komutu çalıştırın:

npm start

Bir saniye bekleyin ve index.html yüklenir ve yerel web sunucunuz tarafından sunulan varsayılan tarayıcınızda görüntülenir!

lite-server dosyalarınızı izler ve herhangi bir html, js veya css dosyasında değişiklik yapar yapmaz sayfayı yeniler.

Otomatik kaydetme için yapılandırılmış VS Kodunuz varsa (Dosya / Otomatik Kaydet menüsü), yazarken tarayıcıda değişiklikler görürsünüz!

Notlar:

• Gün boyunca uygulamanızda kod yazmayı bitirene kadar komut satırı istemini kapatmayın
• Http: // localhost: 10001'de açılır, ancak package.json dosyasını düzenleyerek bağlantı noktasını değiştirebilirsiniz.

Bu kadar. Şimdi herhangi bir kodlama oturumundan önce sadece npm start yazın ve gitmeye hazırsınız!

Başlangıçta yayınlanan Burada yer msdnbloga. Krediler Yazara gider:@Laurent Duveau

Yalnızca Mac'te bu tasks.jsondosyadaysanız:

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

... uzantısının ".html" olduğu varsayılarak mevcut dosyayı Safari'de açmak için ihtiyacınız olan tek şey budur.

tasks.jsonYukarıda açıklandığı gibi oluşturun ve ⌘+ shift+ ile çağırın b.

Chrome'da açılmasını istiyorsanız:

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

Bu, uygulama zaten açıksa yeni bir sekmede açıldığı gibi istediğinizi yapar.

Tek tıklamayla çözüm , Visual Studio pazarından tarayıcıda açık uzantıları yüklemeniz yeterlidir .

18 Nisan 2020'de Güncellenmiş Yanıt

Bu Sol Altta Yönet Simgesini tıklayın. Tıklama Uzantıları veya KısayolCtrl+Shift+X

Sonra bu anahtar cümle ile Uzantıda Ara Varsayılan Tarayıcıda Aç . Bu Uzantıyı bulacaksınız . Benim için daha iyi.

Şimdi htmldosyayı sağ tıklayın ve dosyayı tarayıcıda görmek için Varsayılan Tarayıcıda Aç veya Kısayol Ctrl+1göreceksiniz html.

Mac için - Chrome'da açılır - VS Kodu v 1.9.0'da test edilmiştir

1. Komut Paletini açmak için Command+ + shifttuşlarını kullanın p.

2. Yapılandırma Görev Koşucusu'nu ilk kez yazdığınızda, VS Kodu "Diğer" i seçerse aşağı kaydırma menüsünü verecektir. Bunu daha önce yaptıysanız, VS Code sizi doğrudan görevlere gönderir. Json.

3. Görevler.json dosyasına bir kez. Görüntülenen komut dosyasını silin ve aşağıdaki ile değiştirin:

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

4. Html dosyanıza geri dönün ve sayfanızı Chrome'da görüntülemek için Command+ Shift+ tuşlarına basın b.

CTRL+SHIFT+Pkomut paletini getirecektir.
Ne koştuğunuza bağlı olarak elbette. Bir ASP.net uygulamasında örnek: yazabilir
>kestrelve ardından web tarayıcınızı açabilir ve yazabilirsiniz localhost:(your port here).

Eğer yazarsanız >size göster ve çalıştır komutlarını gösterir

Veya HTML ile ilgili durumda F5, komut paletini açtıktan sonra hata ayıklayıcıyı açması gerektiğini düşünüyorum .

Kaynak: bağlantı

Opera tarayıcısında dosya açma (Windows 64 bitlerde). Şu satırları ekleyin:

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

"Komut": satırındaki yol biçimine dikkat edin . "C: \ path_to_exe \ runme.exe" biçimini kullanmayın.

Bu görevi çalıştırmak için, görüntülemek istediğiniz html dosyasını açın, F1 tuşuna basın, task opera yazın ve enter tuşuna basın

benim koşucu komut dosyası şöyle:

{
    "version": "0.1.0",

    "command": "explorer",

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

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

index.html dosyamda ctrl shift b tuşuna bastığımda kaşifimi açıyorum

Windows için birden fazla tarayıcıda nasıl çalıştırabileceğiniz aşağıda açıklanmıştır

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

Kenar için argümanlara hiçbir şey yazmadığımı fark ettim çünkü Edge benim varsayılan tarayıcım sadece dosyanın adını verdi.

EDIT: ayrıca -incognito veya -private-window gerek yok ... sadece ben özel bir pencerede görüntülemek istiyorum

Son zamanlarda bu özellik www.lynda.com'daki görsel stüdyo kod öğreticilerinden birinde geldi

Ctrl + K'ye ve ardından M'ye basın, "Dil Modunu Seç" i açar (veya bu gülen yüzden önce HTML yazan sağ alt köşeye tıklar), markdown yazın ve enter tuşuna basın

Şimdi Ctrl + K'ye ve ardından V'ye basın, html'nizi yakın bir sekmede açar.

Tadaaa !!!

Şimdi emmet komutları html dosyamda bu modda çalışmıyor, bu yüzden orijinal duruma geri döndüm (not - html tag tellisense mükemmel çalışıyor)

Orijinal duruma gitmek için - Ctrl + K'ye ve ardından M'ye basın, otomatik algıla'yı seçin. emmet komutları çalışmaya başladı. Html only viewer'dan memnunsanız, orijinal duruma geri dönmenize gerek yoktur.

İşaretleme modunda html dosyasını dağıtabildiğinde, vscode'un neden varsayılan olarak html görüntüleyici seçeneğine sahip olmadığını merak edin.

Her neyse, havalı. Mutlu vscoding :)

İşte Mac OSx için 2.0.0 sürümü:

{
  // 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 varsayılan tarayıcıyı açar. alternatif olarak komut penceresini açmak için Ctrl + üst karakter + P tuşlarına basabilir ve "Tarayıcıda Görüntüle" yi seçebilirsiniz. Html kodu bir dosyaya kaydedilmelidir (düzenleyicideki kaydedilmemiş kod - uzantı olmadan çalışmaz)

muhtemelen çoğu yukarıdaki cevaplardan bir çözüm bulmak mümkün olacak ama hiçbiri benim için nasıl çalıştı ( vscode v1.34) olarak deneyimlerimi paylaşmak düşündüm. en az bir kişi yararlı bulursa, boşa harcanan bir mesaj değil, amiirte ?

Her neyse, benim çözümüm ( windows) @ noontz'un en tepesinde oluşturulmuştur. yapılandırması eski sürümleri için yeterli olabilir vscodeancak1.34 (en azından, çalışamadım ..).

bizim yapılandırmalar hemen hemen aynı tek bir özellik kaydetmek - bu özellik,group . neden olduğundan emin değilim ama bu olmadan, görevim komut paletinde bile görünmezdi.

yani. çalışan kullanıcılar tasks.jsoniçin bir çalışma :windowsvscode 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": []
        }
    ]
}

dikkat problemMatchermülkiyet çalışmalarına bunun için gerekli değildir ama onsuz ekstra manuel adım size empoze edilir. Bu özelliği dokümanlar okumaya çalıştı ama anlamak için çok kalın. umarım birisi gelip beni okulacaktır ama evet, bunun için şimdiden teşekkürler. tüm bildiğim - bu özelliği dahil ve ctrl+shift+bmevcut htmldosyayı chromesorunsuz yeni bir sekmede açar .

kolay.

İstemden URL ile özel Chrome'u aç

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

Etkin dosyayı içeren özel Chrome'u aç

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

notlar

• gerekirse windowsözelliği başka bir işletim sistemi ile değiştirin
• ${config:chrome.executable}özel krom konumunuzla değiştirin , ör."C:/Program Files (x86)/Google/Chrome/Application/chrome.exe"
• yerine ${config:chrome.profileDir}mesela senin custome krom profil dizini ile "C:/My/Data/chrome/profile" veya dışarıda bırakın
• İsterseniz yukarıdaki gibi değişkenleri saklayabilirsiniz. Bunu yapmak için, settings.jsonkullanıcı veya çalışma alanında aşağıdaki girişleri ekleyin , yolları ihtiyaçlarınıza göre ayarlayın:

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

• Bu değişkenleri, örneğin launch.jsonhata ayıklama amacıyla yeniden kullanabilirsiniz :"runtimeExecutable": "${config:chrome.executable}"