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


266

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

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


7
VS Code는 현재 Live Server Extention을 보유하고 있습니다. 내 대답을 참조하십시오 : stackoverflow.com/a/48721885/466066
Jose Cherian

3
라이브 서버 확장이 저에게 효과적이었습니다. 이 작업을 수행하기 위해 파일을 구성하고 싶지 않습니다.
AGDM

답변:


209

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를 눌러 웹 브라우저에서 페이지를 봅니다.

여기에 이미지 설명을 입력하십시오


16
HTML 파일이 둘 이상인 경우 변수를 사용할 수도 있습니다. "args": [ "{$ file}"] 현재 열린 파일을 전달할 수 있습니다. 참조 code.visualstudio.com/Docs/tasks#_variables-in-tasksjson
더크 BAUMER

7
Mac에서 어떻게합니까? exe 파일이 없습니다. Mac에서 Chrome으로 웹 페이지를 열고 싶습니다
InvisibleDev

3
"외부 프로그램 크롬 {$ file}을 (를) 시작하지 못했습니다. chrome ENOENT를 생성"
johny 왜

7
새 폴더에서 작업을 구성하려면 작업 : 작업 러너 구성 명령을 선택하면 작업 러너 템플릿 목록이 표시됩니다. 기타 를 선택 하여 외부 명령을 실행하는 작업을 만듭니다. . . . 이제 볼 수 작업 공간 .vscode 폴더에 tasks.json 파일에 다음 내용을 :. . . code.visualstudio.com/Docs/editor/tasks에
양 양 지앙

5
Configure Task Runner가 더 이상 VSC 1.24.0에 없습니다. Control-Shift-P는 해당 문자열에 대한 결과를 반환하지 않습니다.
lonstar

110

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

일부 기능 :

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

여기에 이미지 설명을 입력하십시오


8
이 확장에는 동적 추가 페이지에 자동 재로드 기능을 제공하는 웹 애드온도 있습니다.
M. Sundstrom

@ M.Sundstrom이 부가 기능의 이름 / 링크를 알려주시겠습니까?
Adil Saju

2
여전히 매우 유용하며 특히 구성이 완전하지 않습니다!
Jonas

2
복잡한 페이지에는 권장하지 않습니다. 새로운 코더에는 적합하지 않습니다
Yasser Jarouf

1
저장되지 않은 활성 파일을 미리 볼 수없는 것 같습니다. (실행 중, HTML을 미리
보지는 않지만

73

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

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

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


32

실시간으로 새로 고침하려면 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를 입력하여 작업을 실행할 수도 있습니다.


2
나는 실행을했다 npm install -g gulp, npm install -g gulp-webserver그리고 NODE_PATH 환경 변수가 포인트 제의 AppData \ NPM \ node_modules을 추가합니다. 그런 다음 웹 서버 작업을 실행할 수 있었지만 브라우저가 시작되면 404가 나타납니다. 내가 무엇을 놓치고 있는지 아십니까?
Kirill Osenkov

2
걱정하지 마세요. 예제에서 '앱'을 '.'로 변경해야했습니다. (따라서 현재 디렉토리에서 제공됩니다).
Kirill Osenkov

1
답변에 대한 한 가지 의견 : 변경 사항에 자동으로 다시로드되는 yor 브라우저에서 html 파일을 실행하려면 gulpfile.js가 '.' '앱'대신. 코드 = var gulp = require ( 'gulp'), webserver = require ( 'gulp-webserver'); gulp.task ( 'webserver', function () {gulp.src ( '.') .pipe (webserver ({fallback : 'index.html', livereload : true, open : true}));});
Friis1978

1
대단해. 이것을 귀중한 옵션으로 설명해 주셔서 감사합니다. 또한이 작업을 수행하기 위해 Krill과 Friis의 답변을 약간 적용했습니다. 그러나 그렇습니다!
klewis

줄을 구성하지 않고 gulpfile.js를 복사 gulp.src('app')하여 실제로 내 소스 ( /app'.' 가 아님)를 가리 키기 때문에 "GET / GET 할 수 없음" 이 표시되었습니다 . 완벽하게 작동합니다. 감사!

22

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

vscode 버전 : 1.10.2

여기에 이미지 설명을 입력하십시오


5
그 확장은 끔찍한 리뷰를 얻습니다.
Jon Crowell

이것은 자동으로 브라우저를 새로 고치지 않으며 이것은 OP가 찾고있는 것이 아닙니다
Jude Niroshan

18

키보드 단축키가있는 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


17

Linux에서는 다음 xdg-open명령을 사용 하여 기본 브라우저로 파일을 열 수 있습니다 .

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

6
감사! 나는 리눅스 사용자이고 길을 잃고 있었다. Ctrl + Shift + b브라우저에서 실행 하려면을 눌러야한다고 덧붙이고 싶습니다 . 나를 위해, 니모닉은 "b = browser"였습니다. :-)
ankush981

그것은 작동하지만 더 이상 사용되지 않는 것 같습니다, 업데이트 된 버전이 있다면 감사합니다
Bruno L.

14

1 단계:

  1. Visual Studio Code를 연 다음 확장으로 이동하십시오.
  2. "브라우저에서 열기"를 검색하십시오. 여기에 이미지 설명을 입력하십시오

    3. 설치하십시오.

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

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


9

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

이 설정에로 알려진 로컬 웹 서버 당신을 도울 것입니다 라이트 서버 와를 VS Code, 또한 당신이 당신의 정적 호스트에 안내 html에있는 파일 localhostdebug당신의 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


6

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

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



4

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

여기에 이미지 설명을 입력하십시오

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

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

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


3

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

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

여기에 이미지 설명을 입력하십시오

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

  2. tasks.json 파일에서 한 번. 표시된 스크립트를 삭제하고 다음으로 바꾸십시오.

{
    "version": "0.1.0",
    "command": "Chrome",
    "osx": {
        "command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
    },
    "args": ["${file}"]
}
  1. HTML 파일로 다시 전환하고 Command+ Shift+ b를 눌러 Chrome에서 페이지를 봅니다.

2

CTRL+SHIFT+P명령 팔레트가 나타납니다.
물론 무엇을 실행하고 있는지에 따라. ASP.net 앱의 예 :에 입력
>kestrel한 다음 웹 브라우저를 열고에 입력하십시오 localhost:(your port here).

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

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

출처 : 링크



2

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를 누르십시오.


2

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

{
    "version": "0.1.0",

    "command": "explorer",

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

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

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


2

다음은 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에 아무것도 입력하지 않았습니다.

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


tasks부분 만 복사하고 있었습니다. 는 "args":["/C"]이 작품을 만드는 것입니다. 호기심에서, 이것은 무엇을 하는가?
Ryan B

1

최근 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 :)


1
질문은 브라우저에서 보는 방법에 관한 것입니다.
user5389726598465

1

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

0

Ctrl + F1은 기본 브라우저를 엽니 다. 또는 Ctrl + shift + P를 눌러 명령 창을 열고 "브라우저에서보기"를 선택할 수 있습니다. html 코드는 파일로 저장해야합니다 (확장자없이 확장되지 않은 편집기에서 저장되지 않은 코드가 작동하지 않음)


1
어떤 버전의 Visual Studio Code를 사용하고 있습니까? 이 명령은 방금 업데이트 된 1.8.1에서 작동하지 않습니다. Ctrl + F1은 아무것도하지 않으며 명령 팔레트에 브라우저에서보기 옵션이 없습니다. tasks.json에 기본 설치 또는 추가 작업 이외의 것이 있습니까?
jla

나는 같은 버전을 가지고 있지만 확장을 설치했다는 것을 깨달았습니다. 그것은이다 : marketplace.visualstudio.com/...
PersyJack

0

아마 대부분은 위의 답변에서 해결책을 찾을 수 있지만 아무도 나를 위해 일한 방법으로 보지 vscode v1.34않을 것입니다. 적어도 한 사람이 도움이된다고 생각되면 낭비되는 게시물을 식 히지 마십시오 .


어쨌든 내 솔루션 ( windows)은 @noontz의 꼭대기에 지어졌습니다. 그의 구성은 이전 버전에는 충분 vscode하지만1.34 (적어도 작동하지 못했습니다 ..)

우리의 설정은 거의 동일하며 단일 속성을 저장합니다.group 합니다. 왜 그런지 잘 모르겠지만 이것이 없으면 내 작업이 명령 팔레트에도 나타나지 않습니다.

그래서. 다음 tasks.jsonwindows실행 하는 사용자를 위한 작업 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번거롭지 않게하십시오.


쉬운.


0

프롬프트에서 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}"
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.