Emiteți deschiderea codului HTML prin browser folosind Visual Studio Code

Folosesc Ubuntu cu WSL.

În Ubuntu, am:

• Am creat un director pentru codul meu și CDi-ai
• Executat cod . pentru a începe lucrul la un proiect HTML în VSCode

Cu toate acestea, când pun codul în șablonul HTML5 și încerc să-l rulez, nu se deschide în browserul meu. Primesc următorul mesaj de eroare:

Fișierul nu a fost găsit. Este posibil să fi fost mutat, editat sau șters.

Când copiez calea din fișierul HTML în VSCode și încerc să o lipesc în browser, tot nu funcționează.

Cu toate acestea, atunci când fac clic dreapta pe fișierul HTML și îl deschid prin Dezvăluie în Explorer și apoi copiați și lipiți URL-ul de acolo în browser, funcționează.

Are titlul WSL în cale.

De ce nu pot să-l deschid în VSC? Nu îl găsește în browser în acest fel. Dar când este așa:

file://wsl%24/Ubuntu/home/pypy/books/paper.html

... apoi o găsește.

Sunt confuz de ce se întâmplă acest lucru și de consecințele pe termen lung ale acestui lucru.Va afecta acest lucru site-ul meu web în viitor? Va cauza probleme de gazduire? Cum pot remedia asta?

În mod normal, HTML, JS, CSS etc. sunt transmise browserului prin intermediul unui server web. Prin urmare, este o practică bună să utilizați unul în timp ce vă dezvoltați pagina sau aplicația.

Din fericire, există o extensie pentru VSC numită Live Server asta ușurează lucrurile. Deoarece fișierele dvs. se află în WSL, extensia ar trebui să fie instalată în instanța WSL (la distanță). Iată un scurt videoclip despre cum poate fi instalat și cum se utilizează.

În timp ce Live Server rulează, fila browser-ului relevant va fi reîncărcată automat când salvați orice modificare în cadrul proiectului.

Pot reproduce acest lucru și sincer sunt (puțin) surprins de el. Aș avea aceeași presupunere ca și tine că asta ar „funcționa”. Mă așteptam ca, deoarece folosim extensia „Remote - WSL” în acest caz, extensia s-ar fi ocupat de traducerea căii. Din păcate, acesta nu pare să fie cazul.

Este posibil să nu fie o opțiune pentru extensiile VSCode să modifice calea fișierelor când alte acțiunile (non-extensie) acţionează asupra fișierului.

Deci, ceea ce se întâmplă cu adevărat este că calea care este transmisă browserului tău Windows este file://home/pypy/books/paper.html, iar un browser Windows nu va găsi un fișier având în vedere acea cale. După cum ați descoperit, pentru un browser Windows, ar trebui să arate astfel:

file://wsl$/ubuntu/home/pypy/books/paper.html
# sau
file://wsl.local/ubuntu/home/pypy/books/paper.html
# Partea „ubuntu” poate varia în funcție de numele dvs. exact de distribuție

Notă laterală: The %24 pe care o vedeți este doar forma codificată în URL-ul $.

Există mai multe soluții:

• În primul rând, o soluție simplă este utilizarea Remote-WSL: Redeschideți în dosar în Windows acțiune:

  • În VSCode, apăsați Ctrl+Schimb+P pentru a deschide paleta de comenzi
  • Începe să tastezi "redeschide" și selectați opțiunea Remote-WSL: Redeschideți în dosar în Windows
  • Rulați din nou proiectul HTML prin F5

  Browserul ar trebui să se deschidă corect folosind Windows (mai degrabă decât WSL/Linux).

• O a doua opțiune, și cea pe care o veți folosi de obicei pe măsură ce vă avansați în dezvoltarea HTML, este să rulați un server web local. Acest lucru vă va permite să vă dezvoltați într-un mediu mai „real”, așa cum va trebui să faceți pentru ca multe caracteristici să funcționeze (de exemplu, Node și diferitele sale cadre web, cum ar fi Svelte, React etc. etc. etc.).

Va afecta acest lucru site-ul meu web în viitor? Va cauza probleme de gazduire?

Ei bine, sincer, asta ar putea, dar nu și dacă faci lucrurile „în modul corect”. Asta pentru a vă asigura că căile din HTML sunt relativ în directorul fișierului. De exemplu, tu ar putea faceți referire la un fișier imagine dintr-un subdirector al celui al fișierului HTML specificând:

<img src="file://wsl.local/ubuntu/home/pypy/books/images/logo.png" />

Și asta ar funcționa atunci când vizualizați fișierul local pe computer. Desigur, ar eșua atunci când îl găzduiești pe un server web real.

În schimb, utilizați o cale relativă:

<img src="images/logo.png" />

... care va funcționa atât în ​​VSCode la vizualizarea locală (cel puțin după ce ați ales Redeschideți în dosar în Windows) și la găzduire pe web.