Visual Studio Code를 사용하여 브라우저에서 HTML 코드를 보는 방법은 무엇입니까?
새로운 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 이 있습니다.
일부 기능 :
- 상태 표시 줄에서 한 번의 클릭으로 실행
- 라이브 리로드
- 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를 입력하여 작업을 실행할 수도 있습니다.
이제 확장 프로그램 View In Browser를 설치할 수 있습니다 . 크롬이있는 창문에서 테스트했으며 작동 중입니다.
vscode 버전 : 1.10.2
Linux에서는 다음 xdg-open
명령을 사용 하여 기본 브라우저로 파일을 열 수 있습니다 .
{
"version": "0.1.0",
"linux": {
"command": "xdg-open"
},
"isShellCommand": true,
"showOutput": "never",
"args": ["${file}"]
}
키보드 단축키가있는 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
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 마켓 플레이스에서 브라우저에서 확장 프로그램을 설치하기 만하면 됩니다.
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에 아무것도 입력하지 않았습니다.
편집 : 또한 당신은 시크릿이나 개인 창을 필요로하지 않습니다 ... 단지 개인 창에서보고 싶습니다.
Mac의 경우-Chrome에서 열림-VS Code v 1.9.0에서 테스트 됨
- 사용 Command+ shift+는 p명령 팔레트를 엽니 다.
이 작업을 처음 수행 할 때 작업 실행기 구성을 입력하면 VS 코드에서 "기타"를 선택하면 스크롤 다운 메뉴가 표시됩니다. 이전에이 작업을 수행 한 경우 VS Code는 tasks.json으로 직접 전송합니다.
tasks.json 파일에서 한 번. 표시된 스크립트를 삭제하고 다음으로 바꾸십시오.
{ "version": "0.1.0", "command": "Chrome", "osx": { "command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" }, "args": ["${file}"] }
- HTML 파일로 다시 전환하고 Command+ Shift+ b를 눌러 Chrome에서 페이지를 봅니다.
최근 www.lynda.com 의 Visual Studio 코드 자습서 중 하나에서이 기능을 발견했습니다.
Ctrl + K를 누른 다음 M을 누르면 "언어 모드 선택"이 열리고 (또는 오른쪽 하단 모서리에 HTML이 스마일이라고 표시됨 클릭) markdown을 입력하고 Enter 키를 누릅니다.
이제 Ctrl + K를 누른 다음 V를 누르면 니어 바이 탭에서 HTML이 열립니다.
타다 아 !!!
이제 emmet 명령이 내 HTML 파일 의이 모드에서 작동하지 않았으므로 원래 상태로 돌아갔습니다 (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
번거롭지 않게하십시오.
쉬운.
1 단계:
- Visual Studio Code를 연 다음 확장으로 이동하십시오.
-
3. 설치하십시오.
4. html 파일을 마우스 오른쪽 버튼으로 클릭하면 "브라우저에서 열기"옵션이 나타납니다.
그게 다야................................................ ......
프롬프트에서 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 chrome 프로필 디렉토리로 바꾸"C:/My/Data/chrome/profile"
십시오.- 원하는 경우 위와 같은 변수를 유지할 수 있습니다. 이렇게하려면
settings.json
-user 또는 workspace- 에 다음 항목을 추가하고 필요에 따라 경로를 조정하십시오.
"chrome.executable": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
"chrome.profileDir": "C:/My/Data/chrome/profile"
launch.json
디버깅 목적으로 이러한 변수를 재사용 할 수 있습니다 ."runtimeExecutable": "${config:chrome.executable}"
'Programing' 카테고리의 다른 글
파이썬에서 빈 목록 만들기 (0) | 2020.04.19 |
---|---|
테이블을 디자인하면서 일대일, 일대 다 및 다 대다 관계를 구현하는 방법은 무엇입니까? (0) | 2020.04.19 |
문자열과 ArrayBuffer 사이의 변환 (0) | 2020.04.19 |
IntelliJ IDEA에서 맞춤법 검사를 사용하지 않도록 설정 (0) | 2020.04.18 |
Android는 현재 타임 스탬프를 가져 옵니까? (0) | 2020.04.18 |