VS 코드에서 브라우저에서 여는 방법

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

다행히 다른 방법으로 “브라우저에서 열기” 기능을 활성화할 수 있습니다. 이 기사에서는 방법을 보여줍니다.

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

Windows에서 Visual Studio Code에 대한 “브라우저에서 열기” 옵션을 가져오는 가장 쉬운 방법은 확장을 사용하는 것입니다. Visual Studio Code에서 확장을 설치하는 것은 브라우저에서 파일을 여는 데 사용하는 것처럼 비교적 쉽습니다.

• Visual Studio Code Editor 에서 HTML 파일을 엽니다 .

• 맨 왼쪽 세로 도구 모음에서 확장을 클릭합니다. 또는 키보드 단축키 “Ctrl + Shift + X”를 사용하여 확장 프로그램을 실행할 수 있습니다.

• 항목을 활성화하려면 검색 창을 클릭하십시오.

• “브라우저에서 열기”를 입력합니다. 검색어와 일치하는 확장 프로그램을 선택하세요.

• “설치” 버튼을 클릭합니다.

• 프로그램을 다시 로드합니다.
• 왼쪽 도구 모음에서 파일 탐색기를 선택합니다.

• 파일 탐색기에서 HTML 파일을 찾아 마우스 오른쪽 버튼으로 클릭합니다. “기본 브라우저에서 열기” 또는 “다른 브라우저에서 열기”를 선택하십시오.

• “기본 브라우저에서 열기” 옵션을 선택하면 HTML 파일이 모든 기본 브라우저에서 실행됩니다. “다른 브라우저에서 열기”를 선택한 경우 사용할 브라우저를 지정해야 합니다.

Visual Studio Marketplace 에서 많은 유용한 확장을 찾을 수 있습니다 . 또는 확장 프로그램 1 , 확장 2 , 확장 3 , 확장 4 에서 가장 긍정적인 사용자 리뷰가 있는 “브라우저에서 열기” 확장을 얻을 수 있습니다 .

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

Visual Studio Code는 프로그램의 기능을 향상시키는 다양한 확장으로 업데이트할 수 있습니다. 확장 유형 중 하나를 사용하면 기본 브라우저나 다른 브라우저에서 HTML, PHP 또는 JS 파일을 열 수 있습니다. Mac에서 이 옵션을 활성화하는 방법은 다음과 같습니다.

• Visual Studio Code Editor를 사용 하여 원하는 파일을 엽니다.

• 왼쪽의 도구 모음으로 이동하여 “확장”을 선택합니다.

• 확장 바에서 검색 바를 클릭하고 “브라우저에서 열기”를 작성하십시오.

• 확장을 선택하고 설치를 클릭합니다.

• 소프트웨어를 다시 로드합니다.
• 왼쪽 도구 모음으로 이동하여 파일 탐색기를 선택합니다.

• 탐색기 표시줄에서 열려는 파일을 찾아 마우스 오른쪽 버튼으로 클릭합니다. “기본 브라우저에서 열기” 또는 “다른 브라우저에서 열기”를 선택하십시오.

• “기본 브라우저에서 열기” 옵션은 미리 선택된 브라우저를 사용하여 파일을 엽니다. “다른 브라우저에서 열기”는 컴퓨터에 설치된 브라우저 중 하나를 선택할 수 있는 프롬프트를 표시합니다.

Visual Studio Marketplace 는 Visual Studio Code에 새로운 기능을 추가할 수 있는 다양한 확장을 제공합니다. 프로그램을 추가로 사용자 정의하려면 웹 사이트를 탐색할 가치가 있습니다. 브라우저에서 열기 확장에만 관심이 있는 경우 확장 1 , 확장 2 , 확장 3 , 확장 4 와 같은 몇 가지 제안 사항이 있습니다.

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

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

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

• 확장 1: Windows의 경우 “Ctrl + 1”, Mac의 경우 “Command + 1”.

• 확장 2: Windows의 경우 “Ctrl + Alt + O”, Mac의 경우 “Command + Option(Alt) + O”.

• 확장 3: Windows의 경우 “Ctrl + Shift + F9”, Mac의 경우 “Command + Shift + F9”.

• 확장 4: Windows의 경우 “Ctrl + Shift + P”, Mac의 경우 “Command + Shift + P”.

이 바로 가기는 이 문서에 링크된 해당 확장에서만 작동합니다. 다른 확장을 설치하도록 선택하면 해당 바로 가기가 해당 마켓플레이스 페이지에 나열될 가능성이 큽니다.

Visual Studio Code에서 HTML 실행

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

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

• Visual Studio Code를 열고 새 HTML 파일을 만듭니다.

• 파일로 이동한 다음 저장을 클릭합니다.

• HTML:5를 사용하여 HTML용 템플릿을 활성화합니다. 그런 다음 2단계에서 저장한 파일을 엽니다.

• 이전에 설치한 “브라우저에서 열기” 확장을 사용하여 브라우저에서 파일을 실행합니다.
• 브라우저를 연 상태에서 Visual Studio Code로 돌아가 HTML 파일을 편집하여 변경 사항을 저장합니다.

• 브라우저로 돌아가서 새로 고침을 클릭합니다. 편집 내용에 따라 페이지가 변경되는 것을 확인해야 합니다.

• HTML 파일 편집을 계속하면서 진행 상황을 확인하려면 5단계와 6단계를 반복합니다.

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

• Visual Studio Code에서 왼쪽 도구 모음 하단에 있는 “확장” 섹션으로 이동합니다.

• 확장 검색 창에 “라이브 서버”를 입력하십시오.

• Live Server 확장 옆에 있는 “설치” 버튼을 클릭합니다.

• 새 HTML 파일을 만들고 저장합니다.

• Visual Studio Code Explorer에서 새 파일을 마우스 오른쪽 버튼으로 클릭합니다. “라이브 서버 열기”를 선택하십시오.

• HTML 파일이 브라우저에서 열립니다. 이 문제가 발생하면 HTML 코드를 편집해 보십시오. 진행 상황을 저장합니다.

• 코드를 변경하고 저장하는 즉시 브라우저가 새로 고쳐져 새 콘텐츠가 표시되어야 합니다. 페이지를 수동으로 새로 고칠 필요가 없습니다. 대신 실시간으로 변경 사항을 시각적으로 확인할 수 있습니다.

기타 유용한 Visual Studio Code HTML 확장

언급한 대로 Visual Studio Marketplace는 HTML 지향적인 훌륭한 도구로 가득 차 있습니다. 다음은 가장 유용하고 높은 평가를 받은 HTML 확장 10가지입니다.

• lit-plugin : 구문 강조를 제공하고, 입력의 유효성을 확인하고, 오류 없이 코드를 완성하는 데 도움이 되는 도구입니다. 이 확장에는 맞춤 규칙이 있습니다.
• SCSS Everywhere : HTML, SCSS, Elixir, SASS, PHP, CSS 및 기타 여러 파일 유형에 대한 클래스 정의를 위한 자동 완성 확장입니다.
• Angular 스니펫 : HTML 및 TypeScript에서 쉽게 사용할 수 있도록 Angular 스니펫을 추가합니다. 확장은 부분적으로 인쇄된 후 조각을 확장하여 작동합니다.
• ES6 문자열 HTML : 구문 강조 표시를 위한 es6 문자열 코드 지원을 활성화합니다. HTML, CSS, XML, GLSL 등과 함께 작동합니다.
• 스트립 HTML 속성 : 이 확장은 HTML 속성과 Angular, Vue 및 React 소품 및 지시문을 제거합니다. 여는 태그와 자체 닫는 태그는 물론 다중 선택에도 사용할 수 있습니다.
• Djaneiro – Django Snippets : django HTML 템플릿에 대한 광범위한 스니펫 모음입니다. 이 확장 프로그램을 사용하면 입력에 소요되는 시간을 크게 줄일 수 있습니다.
• 라이브 미리 보기 : Microsoft의 라이브 미리 보기 확장을 사용하면 로컬 서버를 호스팅할 수 있습니다. Angular, React 또는 기타 서버 측 도구를 사용하지 않는 프로젝트가 있는 경우 이 확장을 사용하면 실시간 페이지 새로 고침으로 일반 및 인라인 HTML 미리 보기를 수행할 수 있습니다.
• Oracle JET Core : Oracle Corporation에서 만든 이 확장은 사용자 지정 Oracle JET HTML 데이터를 완벽하게 지원합니다. 포함된 스니펫은 모든 JET 속성 및 태그를 자동으로 채웁니다.
• CSS 탐색 : CSS의 HTML, Less의 HTML, Sass의 HTML에 대한 정의로 이동할 수 있습니다. Peek Definition 명령도 포함되어 있습니다.
• Accented HTML Character Converter : 특수 문자를 해당 HTML 엔티티로 부드럽게 대체합니다. 이 확장은 특정 상황에서 유용하지만 지역화 가능한 문자열을 다룰 때 필요합니다.

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

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

이 버전은 데스크톱용 Visual Studio Code보다 훨씬 가볍습니다. 그러나 저장소와 파일을 쉽게 탐색하고 코드를 약간 변경하기 위한 간단한 솔루션이 될 수 있습니다.

브라우저 기반 버전의 Visual Studio Code를 사용해 보려면 여기를 클릭하여 바로 시작할 수 있습니다 .

HTML 파일 준비 및 실행

Visual Studio Code용 사용자 지정 확장을 사용하면 브라우저에서 HTML 파일을 더 쉽게 열 수 있습니다. 이 코딩 도구에 대한 광범위한 확장 기능을 탐색하기로 선택한 경우 “브라우저에서 열기” 기능은 여정의 시작일 뿐입니다.

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