새로운 Microsoft Visual Studio Code를 사용하여 브라우저에서 HTML 코드를 보려면 어떻게해야합니까?
Notepad ++를 사용하면 브라우저에서 실행할 수 있습니다. Visual Studio Code로 동일한 작업을 수행하려면 어떻게해야합니까?
새로운 Microsoft Visual Studio Code를 사용하여 브라우저에서 HTML 코드를 보려면 어떻게해야합니까?
Notepad ++를 사용하면 브라우저에서 실행할 수 있습니다. Visual Studio Code로 동일한 작업을 수행하려면 어떻게해야합니까?
답변:
Windows의 경우-기본 브라우저 열기-VS Code v 1.1.0에서 테스트
특정 파일을 열거 나 (이름이 하드 코딩되어 있음) 다른 파일을 열거 나 둘 다에 답하십시오.
단계 :
사용 ctrl+ shift+ p(또는 F1) 명령 팔레트를 엽니 다.
입력 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}"]
올바르지 않습니다.
파일을 저장하십시오.
html 파일 (이 예제에서는 "text.html")로 다시 전환하고 ctrl+ shift+ b를 눌러 웹 브라우저에서 페이지를 봅니다.
VS Code에는 상태 표시 줄에서 한 번의 클릭으로 실행을 지원 하는 Live Server Extention 이 있습니다.
일부 기능 :
실시간으로 새로 고침하려면 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
var gulp = require('gulp'),
webserver = require('gulp-webserver');
gulp.task('webserver', function () {
gulp.src('app')
.pipe(webserver({
livereload: true,
open: true
}));
});
웹 서버가 기본 브라우저에서 페이지를 엽니 다. 이제 HTML 또는 CSS 페이지에 대한 변경 사항이 자동으로 다시로드됩니다.
다음은 인스턴스 포트에 대해 'gulp-webserver' 를 구성하는 방법 과로드 할 페이지 에 대한 정보입니다 .
Ctrl + P 를 입력하고 task webserver를 입력하여 작업을 실행할 수도 있습니다.
npm install -g gulp
, npm install -g gulp-webserver
그리고 NODE_PATH 환경 변수가 포인트 제의 AppData \ NPM \ node_modules을 추가합니다. 그런 다음 웹 서버 작업을 실행할 수 있었지만 브라우저가 시작되면 404가 나타납니다. 내가 무엇을 놓치고 있는지 아십니까?
키보드 단축키가있는 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}"]
}
Ctrl + Shift + b
브라우저에서 실행 하려면을 눌러야한다고 덧붙이고 싶습니다 . 나를 위해, 니모닉은 "b = browser"였습니다. :-)
1 단계:
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 코드가 자동 저장 (메뉴 파일 / 자동 저장)으로 구성되어 있으면 입력 할 때 브라우저에 변경 사항이 표시됩니다!
노트:
그게 다야. 이제 코딩 세션 전에 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}"],
}
앱이 이미 열려있는 경우 새 탭에서 열 때와 같이 원하는 작업을 수행합니다.
Mac의 경우-Chrome에서 열림-VS Code v 1.9.0에서 테스트 됨
이 작업을 처음 수행 할 때 Configure Task Runner를 입력하면 VS Code가 "Other"를 선택하면 스크롤 다운 메뉴를 표시합니다. 이전에이 작업을 수행 한 경우 VS Code는 tasks.json으로 직접 전송합니다.
tasks.json 파일에서 한 번. 표시된 스크립트를 삭제하고 다음으로 바꾸십시오.
{ "version": "0.1.0", "command": "Chrome", "osx": { "command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" }, "args": ["${file}"] }
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를 누르십시오.
다음은 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"]
이 작품을 만드는 것입니다. 호기심에서, 이것은 무엇을 하는가?
최근 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
번거롭지 않게하십시오.
쉬운.
{
"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"
}
]
}
{
"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}"