VS Code에서 브라우저에서 여는 방법

HTML, PHP 또는 JS 파일을 사용하는 경우 Visual Studio Code의 브라우저에서 열 수 있습니다. 그러나 이를 위한 통합 옵션이 없습니다. 이는 특히 코딩 결과를 빠르게 확인하려는 경우 실망스러울 수 있습니다.

다행히 다른 방법을 통해 "브라우저에서 열기" 기능을 활성화할 수 있습니다. 이 기사에서는 그렇게 하는 방법을 보여줍니다.

Windows PC의 VS Code에서 브라우저에서 여는 방법

Windows에서 Visual Studio Code용 브라우저에서 열기 옵션을 얻는 가장 쉬운 방법은 확장을 사용하는 것입니다. Visual Studio Code에서 확장을 설치하는 것은 브라우저에서 파일을 여는 데 사용하므로 비교적 간단합니다.

1. Visual Studio Code Editor 에서 HTML 파일을 엽니다 .
   
2. 맨 왼쪽 세로 도구 모음에서 "확장 프로그램"을 클릭합니다. 또는 키보드 단축키 "Ctrl + Shift + X"를 사용하여 확장 프로그램을 시작할 수 있습니다.
   
3. 쓰기를 활성화하려면 검색 표시줄을 클릭합니다.
   
4. "브라우저에서 열기"를 입력합니다. 검색어와 일치하는 확장자를 선택하십시오.
   
5. "설치" 버튼을 클릭합니다.
   
6. 프로그램을 다시 로드하십시오.
7. 왼쪽 도구 모음에서 탐색기를 선택합니다.
   
8. 탐색기에서 HTML 파일을 찾아 마우스 오른쪽 버튼으로 클릭합니다. "기본 브라우저에서 열기" 또는 "다른 브라우저에서 열기"를 선택하십시오.
   
9. "기본 브라우저에서 열기" 옵션을 선택하면 HTML 파일은 기본으로 설정된 브라우저에서 실행됩니다. "다른 브라우저에서 열기"를 선택한 경우 사용할 브라우저를 지정해야 합니다.

Visual Studio Marketplace 에서 유용한 확장을 많이 찾을 수 있습니다 . 또는 여기에서 가장 긍정적인 사용자 리뷰가 있는 Open in Browser 확장 프로그램을 얻을 수 있습니다: Extension 1 , Extension 2 , Extension 3 , Extension 4 .

Mac의 VS Code에서 브라우저에서 여는 방법

프로그램의 기능을 향상시키는 다양한 확장을 사용하여 Visual Studio Code를 업그레이드할 수 있습니다. 한 가지 유형의 확장은 기본 또는 다른 브라우저에서 HTML, PHP 또는 JS 파일을 열 수 있도록 합니다. Mac에서 해당 옵션을 활성화하는 방법은 다음과 같습니다.

1. Visual Studio Code Editor 를 사용하여 원하는 파일을 엽니다.
   
2. 왼쪽의 도구 모음으로 이동하여 "확장 프로그램"을 선택합니다.
   
3. 확장 프로그램 패널에서 검색 표시줄을 클릭하고 "브라우저에서 열기"라고 입력합니다.
   
4. 확장 프로그램을 선택하고 "설치"를 클릭합니다.
   
5. 소프트웨어를 다시 로드합니다.
6. 왼쪽 도구 모음으로 이동하여 탐색기를 선택합니다.
   
7. 탐색기 패널에서 열려는 파일을 찾아 마우스 오른쪽 버튼으로 클릭합니다. "기본 브라우저에서 열기" 또는 "다른 브라우저에서 열기"를 선택합니다.
   
8. "기본 브라우저에서 열기" 옵션은 미리 선택된 브라우저를 사용하여 파일을 시작합니다. "다른 브라우저에서 열기"는 컴퓨터에 설치된 브라우저 중 하나를 선택할 수 있는 프롬프트를 표시합니다.
   

Visual Studio Marketplace에는 Visual Studio Code에 새 기능을 추가할 수 있는 다양한 확장이 있습니다. 프로그램을 더 조정하고 싶다면 웹사이트를 살펴볼 가치가 있습니다. Open in Browser 확장에만 관심이 있는 경우 Extension 1 , Extension 2 , Extension 3 , Extension 4 와 같은 몇 가지 제안 사항이 있습니다 .

브라우저 바로가기에서 열기

거의 모든 Visual Studio Code용 브라우저에서 열기 확장에는 바로 가기 키가 활성화되어 있습니다. 그러나 바로 가기는 균일하지 않습니다. 대신 각 확장 프로그램에는 브라우저에서 파일 열기를 활성화하는 특정 키 조합이 있습니다.

다음은 이 문서에서 제안하는 확장에 대한 키보드 단축키입니다.

1. 확장자 1: Windows에서는 “Ctrl + 1”, Mac에서는 “Command + 1”.
   
   
2. 확장자 2: Windows에서는 “Ctrl + Alt + O”, Mac에서는 “Command + Option(Alt) + O”.
   
3. 확장 3: Windows의 경우 "Ctrl + Shift + F9", Mac의 경우 "Command + Shift + F9".
   
   
4. 확장자 4: Windows에서는 “Ctrl + Shift + P”, Mac에서는 “Command + Shift + P”.
   
   

이러한 바로 가기는 이 문서에 링크된 각 확장 프로그램에서만 작동합니다. 다른 확장 프로그램을 설치하기로 선택한 경우 해당 바로 가기가 Marketplace 페이지에 나열될 수 있습니다.

Visual Studio Code에서 HTML 실행

Visual Studio Code에서 HTML 작업에 관심이 있는 경우 다음은 프로그램 내에서 HTML 코드를 실행하는 몇 가지 방법입니다.

첫 번째 방법은 실행하려는 파일을 수동으로 로드하는 것입니다.

1. Visual Studio Code를 열고 새 HTML 파일을 만듭니다.
   
2. "파일"로 이동한 다음 "저장"을 클릭합니다.
   
3. HTML:5를 사용하여 HTML용 템플릿을 활성화합니다. 그런 다음 2단계에서 저장한 파일을 엽니다.
   
4. 이전에 설치한 브라우저에서 열기 확장 프로그램을 사용하여 브라우저에서 파일을 실행하십시오.
5. 브라우저를 연 상태로 두고 Visual Studio Code로 돌아가 HTML 파일을 편집하여 변경 내용을 저장합니다.
   
6. 브라우저로 돌아가서 새로 고침을 클릭합니다. 편집 내용에 따라 페이지가 변경되는 것을 볼 수 있습니다.
   
7. 5단계와 6단계를 반복하여 HTML 파일 편집을 계속하면서 진행 상황을 확인합니다.

수동 방법은 작업을 추적하는 데 도움이 될 수 있습니다. 그러나 더 나은 솔루션이 있습니다. 바로 자동 로딩입니다. 이 옵션을 사용하려면 다른 확장 프로그램을 설치해야 하지만 그만한 가치가 있습니다.

1. Visual Studio Code에서 왼쪽 도구 모음의 아래쪽에 있는 확장으로 이동합니다.
   
2. 확장 검색 창에 "라이브 서버"를 입력합니다.
   
3. Live Server 확장 옆에 있는 "설치" 버튼을 클릭합니다.
   
4. 새 HTML 파일을 만들고 저장합니다.
   
   
5. Visual Studio Code 탐색기에서 새 파일을 마우스 오른쪽 단추로 클릭합니다. "라이브 서버 열기"를 선택합니다.
   
6. HTML 파일이 브라우저에서 열립니다. 표시되면 HTML 코드를 편집해 보십시오. 진행 상황을 저장하십시오.
   
   
7. 코드를 변경하고 저장하는 즉시 브라우저가 새로고침되어 새 콘텐츠가 표시됩니다. 페이지를 수동으로 새로 고칠 필요가 없으며 대신 실시간으로 변경 사항을 시각적으로 확인할 수 있습니다.
   

기타 유용한 Visual Studio Code HTML 확장

언급한 바와 같이 Visual Studio Marketplace는 뛰어난 도구로 가득 차 있으며 그 중 많은 도구가 HTML에 맞춰져 있습니다. 다음은 HTML에 대해 가장 유용하고 최고의 등급을 받은 10가지 확장 기능입니다.

• lit-plugin : 구문을 강조 표시하고 입력을 확인하며 오류 없이 코드를 완성할 수 있도록 도와주는 도구입니다. 이 확장에는 사용자 정의 가능한 규칙이 있습니다.
• SCSS Everywhere : HTML, SCSS, Elixir, SASS, PHP, CSS 및 기타 여러 파일 유형에 대한 클래스 정의를 위한 자동 완성 확장입니다.
• Angular Snippets : HTML 및 TypeScript에서 쉽게 사용할 수 있도록 Angular 스니펫을 추가합니다. 확장 기능은 부분적으로 입력된 스니펫을 펼치는 방식으로 작동합니다.
• ES6 문자열 HTML : 구문 강조 표시를 위해 es6 문자열 코드 지원을 활성화합니다. HTML, CSS, XML, GLSL 및 기타 형식과 함께 작동합니다.
• Split HTML Attributes : 이 확장은 Angular, Vue 및 React 소품 및 지시문뿐만 아니라 HTML 속성을 분할합니다. 여는 태그와 자동 닫는 태그, 여러 선택 항목에 사용할 수 있습니다.
• Djaneiro – Django Snippets : django HTML 템플릿에 대한 광범위한 스니펫 모음입니다. 이 확장 프로그램을 사용하면 입력하는 데 소요되는 시간이 크게 단축됩니다.
• 실시간 미리보기 : Microsoft의 실시간 미리보기 확장은 로컬 서버 호스팅을 허용합니다. Angular, React 또는 기타 서버 도구를 사용하지 않는 프로젝트가 있는 경우 이 확장 프로그램을 사용하면 실시간으로 페이지 새로고침과 함께 일반 및 포함된 HTML 미리보기를 사용할 수 있습니다.
• Oracle JET Core : Oracle Corporation에서 만든 이 확장은 Oracle JET 사용자 지정 HTML 데이터를 완벽하게 지원합니다. 포함된 스니펫은 모든 JET 속성 및 태그를 자동 완성합니다.
• CSS 탐색 : HTML에서 CSS로, HTML에서 Less로, HTML에서 Sass로의 정의로 이동을 활성화합니다. Peek Definition 명령도 활성화됩니다.
• HTML 액센트 문자 변환기 : 특수 문자를 적절한 HTML 엔터티로 원활하게 대체합니다. 이 확장은 상황에 따라 유용하지만 현지화 가능한 문자열을 처리할 때 필수적입니다.

브라우저에서 Visual Studio Code를 실행할 수 있습니다.

브라우저에서 HTML 파일을 실행하는 것 외에도 전체 Visual Studio Code를 온라인으로 사용할 수도 있습니다. 이를 위해서는 브라우저용으로 개발된 프로그램의 특정 버전을 실행해야 합니다.

이 버전은 데스크톱 Visual Studio Code에 비해 훨씬 가볍습니다. 그러나 쉬운 리포지토리 및 파일 탐색과 약간의 코드 변경을 위한 간단한 솔루션이 될 수 있습니다.

Visual Studio Code 브라우저 변형을 사용해 보려면 여기 를 클릭하여 즉시 시작할 수 있습니다 .

HTML 파일 시작 및 실행

Visual Studio Code 전용 확장을 사용하면 브라우저에서 HTML 파일을 쉽게 열 수 있습니다. 이 코딩 도구에 대한 방대한 확장 기능을 탐색하기로 결정했다면 브라우저에서 열기 기능은 여정의 시작일 뿐입니다.

선택한 브라우저에서 HTML 파일을 열 수 있었습니까? 어떤 확장 프로그램을 사용하셨나요? 아래 의견란에 알려주십시오.