Visual Studio Code를 사용하여 브라우저에서 HTML 파일을 보는 방법

새로운 Microsoft Visual Studio Code를 사용하여 브라우저에서 HTML 코드를 보려면 어떻게해야합니까?

Notepad ++를 사용하면 브라우저에서 실행할 수 있습니다. Visual Studio Code로 동일한 작업을 수행하려면 어떻게해야합니까?

Windows의 경우-기본 브라우저 열기-VS Code v 1.1.0에서 테스트

특정 파일을 열거 나 (이름이 하드 코딩되어 있음) 다른 파일을 열거 나 둘 다에 답하십시오.

단계 :

1. 사용 ctrl+ shift+ p(또는 F1) 명령 팔레트를 엽니 다.

2. 입력 Tasks: Configure Task또는 이전 버전에 Configure Task Runner. 선택하면 tasks.json 파일 이 열립니다 . 표시된 스크립트를 삭제하고 다음으로 바꾸십시오.

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

   tasks.json 파일의 "args"섹션을 파일 이름으로 변경하십시오. F5를 눌렀을 때 항상 특정 파일이 열립니다.

   ["${file}"]"args"의 값 으로 사용하여 당시에 열었던 파일을 열도록 이것을 설정할 수도 있습니다 . (가) 있습니다 $외부 간다 {...}그래서이 ["{$file}"]올바르지 않습니다.

3. 파일을 저장하십시오.

4. html 파일 (이 예제에서는 "text.html")로 다시 전환하고 ctrl+ shift+ b를 눌러 웹 브라우저에서 페이지를 봅니다.

VS Code에는 상태 표시 줄에서 한 번의 클릭으로 실행을 지원 하는 Live Server Extention 이 있습니다.

일부 기능 :

• 상태 표시 줄에서 한 번의 클릭으로 실행
• 라이브 리로드
• Chrome 디버깅 첨부 파일 지원

@InvisibleDev-이것을 사용하여 Mac에서 작동하게하려면 :

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

크롬이 이미 열려 있으면 새 탭에서 HTML 파일이 시작됩니다.

실시간으로 새로 고침하려면 gulp-webserver를 사용하여 파일 변경 사항을 확인하고 페이지를 새로 고침하면 페이지에서 매번 F5를 누를 필요가 없습니다.

방법은 다음과 같습니다.

• 명령 프롬프트 (cmd)를 열고 다음을 입력하십시오.

  npm 설치 --save-dev gulp-webserver

• 입력 Ctrl 키 + Shift + P를 VS 코드와 입력 구성 작업 러너 . 그것을 선택하고 Enter를 누르십시오. tasks.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 를 입력하고 입력 할 때 "작업 실행"을 입력하면 작업 "웹 서버"가 선택되고 Enter 키를 누릅니다.

웹 서버가 기본 브라우저에서 페이지를 엽니 다. 이제 HTML 또는 CSS 페이지에 대한 변경 사항이 자동으로 다시로드됩니다.

다음은 인스턴스 포트에 대해 'gulp-webserver' 를 구성하는 방법 과로드 할 페이지 에 대한 정보입니다 .

Ctrl + P 를 입력하고 task webserver를 입력하여 작업을 실행할 수도 있습니다.

이제 확장 프로그램을 설치할 수 있습니다 . 브라우저에서보기 . 크롬이있는 창문에서 테스트했으며 작동 중입니다.

vscode 버전 : 1.10.2

키보드 단축키가있는 Chrome의 현재 문서에 대한 2.0.0 버전은 다음과 같습니다.

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 Code를 연 다음 확장으로 이동하십시오.

2. "브라우저에서 열기"를 검색하십시오.

   3. 설치하십시오.

   4. html 파일을 마우스 오른쪽 버튼으로 클릭하면 "브라우저에서 열기"옵션이 나타납니다.

   그게 다야................................................ ......

msdn블로그 에서 사용한 단계를 다시 게시하고 있습니다. 지역 사회에 도움이 될 수 있습니다.

이 설정에로 알려진 로컬 웹 서버 당신을 도울 것입니다 라이트 서버 와를 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

그러면 기본 브라우저에 index.html을로드하고 응용 프로그램 파일이 변경 될 때 자동으로 새로 고치는 정적 서버 인 lite-server (package.json에 정의)가 설치됩니다.

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

... 확장자가 ".html"이라고 가정하면 Safari에서 현재 파일을 열어야합니다.

tasks.json위에서 설명한대로 생성 하고 ⌘+ shift+로 호출하십시오.b .

Chrome에서 열려면 다음을 수행하십시오.

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

앱이 이미 열려있는 경우 새 탭에서 열 때와 같이 원하는 작업을 수행합니다.

한 번의 클릭 솔루션으로 Visual Studio 마켓 플레이스에서 브라우저에서 확장 프로그램을 설치하기 만하면 됩니다.

2020 년 4 월 18 일에 업데이트 된 답변

이 왼쪽 아래 관리 아이콘을 클릭하십시오 . 확장 프로그램 또는 바로 가기 클릭Ctrl+Shift+X

그런 다음이 키 문장으로 확장 프로그램에서 검색 기본 브라우저에서 열기를 클릭하십시오 . 당신은 이것을 찾을 것입니다 확장 있습니다. 나에게 낫다.

이제 html파일을 마우스 오른쪽 버튼으로 클릭 하면 브라우저Ctrl+1 에서 html파일 을 볼 수있는 기본 브라우저에서 열기 또는 바로 가기가 표시 됩니다.

Mac의 경우-Chrome에서 열림-VS Code v 1.9.0에서 테스트 됨

1. 사용 Command+ shift+는 p명령 팔레트를 엽니 다.

2. 이 작업을 처음 수행 할 때 Configure Task Runner를 입력하면 VS Code가 "Other"를 선택하면 스크롤 다운 메뉴를 표시합니다. 이전에이 작업을 수행 한 경우 VS Code는 tasks.json으로 직접 전송합니다.

3. tasks.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).

입력 >하면 show 및 run 명령 이 표시됩니다.

또는 HTML을 사용하는 경우 F5명령 팔레트를 연 후에 디버거를 열어야 한다고 생각 합니다.

출처 : 링크

Opera 브라우저에서 파일 열기 (Windows 64 비트). 이 줄을 추가하십시오.

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

경로 형식에주의하십시오 "command": 행. "C : \ path_to_exe \ runme.exe"형식을 사용하지 마십시오.

이 태스크를 실행하려면 보려는 html 파일을 열고 F1을 누르고 task opera 를 입력 한 후 Enter를 누르십시오.

내 러너 스크립트는 다음과 같습니다.

{
    "version": "0.1.0",

    "command": "explorer",

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

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

index.html 파일에서 ctrl shift b를 누르면 탐색기가 열립니다.

다음은 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는 기본 브라우저이므로 파일 이름을 지정했기 때문에 edge에 대해 args에 아무것도 입력하지 않았습니다.

편집 : 또한 당신은 시크릿이나 개인 창을 필요로하지 않습니다 ... 단지 개인 창에서보고 싶습니다.

최근 www.lynda.com 의 Visual Studio 코드 자습서 중 하나에서이 기능을 발견했습니다.

Ctrl + K를 누른 다음 M을 누르면 "언어 모드 선택"이 열리고 (또는 오른쪽 하단 모서리에 HTML이 스마일이라고 표시됨 클릭) markdown을 입력하고 Enter 키를 누릅니다.

이제 Ctrl + K를 누른 다음 V를 누르면 니어 바이 탭에서 HTML이 열립니다.

타다 아 !!!

이제 emmet 명령이 html 파일 의이 모드에서 작동하지 않았으므로 원래 상태로 돌아갔습니다 (note-html 태그 tellisense가 완벽하게 작동했습니다)

원래 상태로 이동하려면 Ctrl + K를 누른 다음 M을 누르고 자동 감지를 선택하십시오. emmet 명령이 작동하기 시작했습니다. HTML 전용 뷰어에 만족하면 원래 상태로 돌아올 필요가 없습니다.

마크 다운 모드에서 html 파일을 표시 할 수있을 때 vscode에 기본적으로 html 뷰어 옵션이없는 이유가 궁금합니다.

어쨌든 멋지다. 행복한 vscoding :)

Mac OSx 용 버전 2.0.0은 다음과 같습니다.

{
  // 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않을 것입니다. 적어도 한 사람이 도움이된다고 생각되면 낭비되는 게시물을 식 히지 마십시오 .

어쨌든 내 솔루션 ( 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번거롭지 않게하십시오.

쉬운.

프롬프트에서 URL로 맞춤 Chrome을 엽니 다.

{
  "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다른 OS로 속성을 교체하십시오.
• ${config:chrome.executable}예를 들어 맞춤 크롬 위치로 교체"C:/Program Files (x86)/Google/Chrome/Application/chrome.exe"
• ${config:chrome.profileDir}예를 들어 custome 크롬 프로필 디렉토리로 교체 하십시오. "C:/My/Data/chrome/profile" 십시오.
• 원하는 경우 위와 같은 변수를 유지할 수 있습니다. 이렇게하려면 settings.json사용자 또는 작업 공간- 에 다음 항목을 추가하고 필요에 따라 경로를 조정하십시오.

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

• launch.json디버깅 목적으로 이러한 변수를 재사용 할 수 있습니다 ."runtimeExecutable": "${config:chrome.executable}"