개발 효율성을 향상시키는 23개의 프런트엔드 VSCode 플러그인(오셔서 수집하세요)

이 기사에서는 개발 효율성을 향상하고 절반의 노력으로 두 배의 결과를 얻는 데 도움이 되는 23개의 프런트 엔드 VSCode 플러그인을 공유합니다.

VSCode는 프론트엔드 개발을 위한 강력한 IDE이므로 개발 효율성을 높이기 위해 사용하기 쉬운 플러그인을 선택하고 남은 시간을 낚시에 활용하는 것이 필요합니다. [추천 학습: "vscode 입문 튜토리얼"]

중국어(간체)

vscode 영어를 잘 못하는 학생들을 위해 가장 먼저 해야 할 것은 마이크로소프트의 오픈 소스 소프트웨어라는 사실입니다. 중국어 현지화를 사용하는 것이므로 저자는 중국어 플러그인을 권장합니다.

Visual Studio Code용 중국어(간체) 언어 팩: 이 중국어(간체) 언어 팩은 VS Code용 지역화된 인터페이스를 제공합니다.

• 플러그인 이름: Visual Studio Code용 중국어(간체)(중국어 간체) 언어 팩
• 공식 주소: marketplace.visualstudio.com/items?itemN…
• 사용법: 작성자 "표시 언어 구성" 명령은 기본 UI 언어를 대체할 수 있는 VS Code 표시 언어를 명시적으로 설정합니다. Ctrl+Shift+P를 눌러 명령 패널을 표시한 다음 display를 입력하여 표시 언어 구성 명령을 필터링하고 표시합니다. "Enter"를 누르면 현재 언어 설정이 강조 표시된 상태로 로케일별로 설치된 언어 목록이 표시됩니다. UI 언어를 전환하려면 다른 "언어"를 선택하세요. 자세한 내용은 설명서를 참조하세요.

Polacode-2020

Polacode-2020: 선택한 스니펫에 아름다운 시각 효과를 쉽게 부여할 수 있는 방법을 원하는 경우.

• 플러그인 이름: Polacode-2020
• 공식 주소: marketplace.visualstudio.com/items?itemN…
• 기능:

• • 원하는 범위를 선택하세요 코드 블록의 스크린샷 생성
  • 원하는 그림자와 배경색을 설정할 수 있습니다

• 사용법: command+shift+p, fn+F1(Mac) / ctrl+shift+ p(Window), Polacode를 선택한 다음 스크린샷을 찍고 싶은 범위를 선택하세요

CodeSnap

CodeSnap: VS Code에서 아름다운 코드 스크린샷을 찍어보세요!

• 플러그인 이름: CodeSnap
• 공식 주소: marketplace.visualstudio.com/items?itemN…
• 기능:

• • 빠르게 코드 저장
  스크린샷
  • 스크린샷을 클립보드에 복사
  • 줄 번호 표시
  • 기타 다양한 구성 옵션

• 사용법: 가로챌 필요가 있는 코드 블록을 선택한 다음 CodeSnap을 마우스 오른쪽 버튼으로 클릭하여

이미지 미리보기

이미지 미리보기 : 이미지 위에 마우스를 올리거나 편집기 틈새에서 이미지를 미리 볼 수 있습니다.

• 플러그인 이름: 이미지 미리보기
• 공식 주소: marketplace.visualstudio.com/items?itemN…
• 특징: HTML 태그나 스타일에 소개된 이미지 편집 가능 틈틈히 미리보기 편집기에서 마우스를 올렸을 때
• 사용법: 편집기 틈에서 이미지를 미리보기하고 마우스를 이미지 링크 위에 올렸을 때

Image Sprites

특정 페이지를 개발할 때 항상 작은 이미지가 많이 필요하게 됩니다. 이때 Sprite 이미지를 사용하면 서버 요청 수를 줄이고 대역폭을 절약할 수 있으므로 이 플러그인을 선택하는 것이 좋습니다. .

이미지 스프라이트: 이미지 스프라이트는 단일 이미지에 배치된 이미지 모음입니다. 많은 이미지가 포함된 웹 페이지는 여러 서버 요청을 로드하고 생성하는 데 오랜 시간이 걸릴 수 있습니다. 이미지 스프라이트를 사용하면 서버 요청 수가 줄어들고 대역폭이 절약됩니다.

• 플러그인 이름: Image Sprites
• 공식 주소: marketplace.visualstudio.com/items?itemN…
• 기능:

• • 손쉬운 이미지 스프라이트 생성 및 업데이트
  • png, jpg 및 bmp 이미지 지원
  • 수직 또는 수평 스프라이트 레이아웃 구성
  • 스프라이트 이미지 위치를 사용하여 LESS, Sass 또는 CSS 파일 생성
  • 다양한 설정 옵션으로 모든 스프라이트를 관리할 수 있습니다

• 사용법:

• • 폴더의 모든 이미지를 Sprite합니다.
  • 이미지가 포함된 폴더를 마우스 오른쪽 버튼으로 클릭하고 Create Image Sprite를 선택합니다.

• • Sprite some Images
  • 이미지를 선택하고 마우스 오른쪽 버튼을 클릭한 후 Create Image Sprite

• • 이 두 가지 방법으로 설정 .sprite 파일과 생성된 기본 파일이 생성됩니다. image file.css

Svg Preview

적절한 svg 이미지를 찾았지만 색상, 모양 등으로 인해 적합하지 않은 경우 이 플러그인을 사용하여 수정할 수 있습니다. 그것.

Svg 미리보기: VSCode용 SVG 미리보기.

• 플러그인 이름: Svg Preview
• 공식 주소: marketplace.visualstudio.com/items?itemN…
• 기능:

• • svg 파일 및 내부 svg 파일의 이동 및 확대/축소
  • (최대 32767%)

file-size

file-size : 간단한 확장입니다. 상태 표시줄에 현재 텍스트 파일 크기를 표시합니다. 파일을 저장하거나 활성 탭을 변경하면 상태가 업데이트됩니다. 르 플러그인 이름: file-size

• 공식 주소: Marketplace.visualstudio.com/items? Itemn...

Live Server

라이브 서버: 정적 및 동적 페이지에 대한 라이브 다시 로드 기능을 사용하여 로컬 개발 서버를 시작합니다.

• 플러그인 이름: Live Server
• 공식 주소:marketplace.visualstudio.com/items?itemN…
• 기능:

• • 실시간 브라우저 다시 - 빠른 로딩 실시간 서버를 개발합니다.
  • 상태 표시줄에서 한 번의 클릭으로 서버를 시작하거나 중지할 수 있습니다.
  • 탐색기 메뉴에서 브라우저로 HTML 파일을 엽니다. [빠른 GIF 데모].
  • 변경 감지를 위한 파일 제외를 지원합니다.
  • 핫키 제어.
  • 사용자 정의 가능한 포트 번호, 서버 루트 디렉터리 및 기본 브라우저.
  • 고급 명령줄을 사용하여 모든 브라우저 (예: Firefox Nightly)를 지원합니다.
  • Chrome 디버깅 추가 기능을 지원합니다(자세한 정보). [빠른 GIF 데모].
  • WLAN을 통해 원격으로 연결(예: 모바일 장치를 사용하여 연결) [도움이 필요하신가요? FAQ 섹션 참조]
  • 기본 호스트 이름 사용 *(localhost 또는 127.0.0.1) *.
  • Live Reload 기능을 위한 사용자 정의 가능한 지원 태그입니다. (기본값은 Body 또는 head입니다.)
  • SVG 지원
  • https 지원.
  • 지원 상담원.
  • CORS 활성화
  • 다중 루트 작업 공간을 지원합니다.
  • Live Server Web Extension을 통해 모든 파일은 물론 동적 페이지까지 지원합니다.

프로필 전환기

프로필 전환기: 이 확장 프로그램을 사용하면 여러 설정 프로필을 정의할 수 있으며 프로필 간에 쉽게 전환할 수 있습니다. 이 확장에 대한 원래 아이디어는 VS Code를 렌더링을 더 잘 최적화하는 설정(테마 변경, 글꼴 크기 증가 등)으로 전환할 수 있는 쉬운 방법이 있기를 바라는 것에서 나왔습니다.

• 플러그인 이름: Profile Switcher
• 공식 주소: marketplace.visualstudio.com/items?itemN…
• 특징: 이 확장 프로그램은 명령 패널에서 사용할 수 있는 4가지 새로운 명령을 소개합니다. . 모든 명령은 Profile Switcher로 시작됩니다

Project Manager

vscode에서 다양한 성격의 많은 프로젝트를 열어야 할 때 Project Manager는 좋은 프로젝트 관리 플러그인입니다.

프로젝트 관리자:

프로젝트

가 어디에 있든 쉽게 액세스할 수 있도록 도와줍니다.

더 이상 중요한 아이템을 놓치지 마세요

. 자신만의 Projects(즐겨찾기라고도 함)를 정의하거나 Git, Mercurial 또는 SVN 저장소, VSCode폴더 또는 any기타 폴더를 자동으로 감지하도록 선택할 수 있습니다.

• 플러그인 이름: Project Manager
• 공식 주소: marketplace.visualstudio.com/items?itemN…
• 특징: 사용 가능한 명령:

• • 프로젝트 관리자: 저장 프로젝트는 현재 폴더/작업 공간을 새 프로젝트로 저장합니다.
  • 프로젝트 관리자: 프로젝트 편집 프로젝트를 수동으로 편집합니다(projects.json)
  • 프로젝트 관리자: 열려는 프로젝트 나열 저장/감지된 모든 프로젝트를 나열하고 하나를 선택합니다.
  • 프로젝트 관리자: 새 창에서 열 프로젝트 나열 저장/감지된 모든 프로젝트를 나열하고 하나를 선택하여 새 창에서 엽니다
  • 프로젝트 관리자: 선택한 태그로 태그별로 프로젝트 필터링 즐겨찾는 프로젝트 필터링

• 사용법:

• • 프로젝트 관리자 확장에는 작업 효율성을 높이기 위한 다양한 명령이 포함된 자체 사이드 바가 있습니다.
  • 사용자 정의 태그(설정을 통해)를 정의하고 각 프로젝트에 대해 여러 태그를 정의할 수 있습니다. projectManager.tags 태그에 태그된 프로젝트 필터링

Settings Sync

Settings Sync가 도움이 될 수 있습니다. 컴퓨터를 변경하거나, 시스템을 다시 설치하거나, ​​여러 컴퓨터 간에 VSCode의 설정을 동기화합니다. .

설정 동기화: Visual Studio Code에 대한 설정 동기화입니다.

• 플러그인 이름: 설정 동기화
• 공식 주소: marketplace.visualstudio.com/items?itemN…

npm

npm: 확장자는 정의된 실행 파일을 지원합니다. npm 스크립트에서.

• 플러그인 이름: npm
• 공식 주소: marketplace.visualstudio.com/items?itemN…
• 기능:

• • npm이 보고됨 경고 실행 제안 빠른 수정.

• • 스크립트를 실행하는 데 사용되는 명령은 이 npm 카테고리에서 사용할 수 있습니다.

브라우저에서 열기

브라우저에서 열기: 이 확장 프로그램을 사용하면 HTML 파일이 브라우저에서 열립니다.

• 플러그인 이름: 브라우저에서 열기
• 공식 주소: marketplace.visualstudio.com/items?itemN…
• Usage

• • 기본 브라우저Alt에서 바로가기 사용 + B 현재 html Shift + Alt + B 파일을 열거나 브라우저를 선택합니다. 그림과 같이 마우스 오른쪽 버튼을 클릭할 수도 있습니다.

• • 다른 브라우저에서 oepn을 선택하면 브라우저 목록이 표시되며 브라우저 중 하나를 선택하여 현재 파일을 열 수 있습니다.

• • 기본 브라우저에서 열기를 선택하면 기본값은 시스템 기본 브라우저 입니다. 기본 브라우저를 구성하려면 다음과 같이 재정의할 수 있습니다.

GitLens - Git 강화

GitLens - Git 강화: GitLens는 VSCode에서 Git을 강화하고 모든 저장소에서 미개발된 지식을 잠금 해제합니다. Git 비교 주석 및 CodeLens를 사용하여 코드 저작자를 직관적으로 시각화하고, Git 리포지토리를 원활하게 탐색 및 탐색하고, 풍부한 시각화 및 강력한 비교 명령 을 통해 귀중한 통찰력 을 얻을 수 있습니다.

• 플러그인 이름: GitLens - Git supercharged
• 공식 주소: marketplace.visualstudio.com/items?itemN…

Git 내역

Git 역사 : git 로그, 파일 기록, 병합 브랜치 또는 커밋을 봅니다.

• 플러그인 이름: Git History
• 공식 주소: marketplace.visualstudio.com/items?itemN…

SVN

SVN: 플러그인은 시스템 SVN 설치에 따라 다릅니다. , 따라서 먼저 TortoiseSVN을 설치해야 합니다.

• 플러그인 이름: SVN
• 공식 주소: marketplace.visualstudio.com/items?itemN…
• 기능: 보기:

• • 소스코드 관리 보기
  • 여백의 빠른 비교
  • 상태 표시줄
  • 변경 목록 만들기
  • 파일 추가
  • 편집 내용 되돌리기
  • 파일 삭제
  • 브랜치 만들기
  • 브랜치 전환
  • 패치 만들기
  • 차이 변경
  • 변경 사항/변경 목록 커밋
  • 커밋 메시지 보기

우편번호

우편번호 : 우편번호를 사용하여 생성하고 테스트할 수 있습니다. 간단하고 복잡한 HTTP/s 요청을 수행하고 응답을 확인하세요.

• 플러그인 이름: 우편번호
• 공식 주소: marketplace.visualstudio.com/items?itemN…

REST 클라이언트

REST 클라이언트 : REST 클라이언트 HTTP 요청을 보내고 Visual Studio Code에서 직접 응답을 볼 수 있습니다.

• 플러그인 이름: TEST Client
• 공식 주소: marketplace.visualstudio.com/items?itemN…

요청하기

cURL 요청

실시간 공유

Live Share: Live Share를 사용하면 사용하는 프로그래밍 언어나 구축 중인 애플리케이션 유형에 관계없이 실시간 편집 및 디버깅에 대해 다른 사람들과 공동 작업할 수 있습니다. 이를 통해 현재 프로젝트를 즉시(안전하게) 공유한 다음 필요에 따라 디버깅 세션, 터미널 인스턴스, 로컬 호스트 웹 애플리케이션, 음성 통화 등을 공유할 수 있습니다! 세션에 참여하는 개발자는 환경에서 모든 편집기 컨텍스트(예: 언어 서비스, 디버깅)를 수신하므로 리포지토리를 복제하거나 SDK를 설치할 필요 없이 즉시 생산적인 협업을 시작할 수 있습니다.

• 플러그인 이름: Live Share
• 공식 주소: marketplace.visualstudio.com/items?itemN…

Draw.io 통합

Draw.io 통합 : 이 비공식 확장은 Draw.io(diagrams.net이라고도 함)를 VS Code에 통합합니다.

• 플러그인 이름: Draw.io Integration
• 공식 주소: marketplace.visualstudio.com/items?itemN…
• 기능:

• • 추첨 중. io 편집기 또는 .drawio 파일에서 편집합니다. .dio.drawio.svg.drawio.png

• • • 새 다이어그램을 만들려면 빈 .drawio, .drawio.svg 또는 *.drawio.png 파일을 만들고 그것을 열어라. **
    • .drawio.svg.svg는 Github 추가 정보에 삽입할 수 있는 유효한 파일입니다! 내보내기가 필요하지 않습니다.
    • .drawio.png는 유효한 .png 파일입니다! 내보내기가 필요하지 않습니다. 가능하면 .svg와 함께 사용해야 합니다. 훨씬 더 보기 좋습니다!
    • 다른 형식 간에 변환하려면 Draw.io: 다음으로 변환... 명령을 사용하세요.

• • 기본적으로 Draw.io의 오프라인 버전을 사용하세요.
  • 다양한 Draw.io 테마를 사용할 수 있습니다.
  • Liveshare를 사용하여 다른 사람들과 협력하여 다이어그램을 편집하세요.
  • 노드/에지는 코드 범위로 연결될 수 있습니다.

Markdown All in One

Markdown All in One : 마크다운에 필요한 모든 것(키보드 단축키, 목차, 자동 미리보기 등).

• 플러그인 이름: Markdown All in One
• 공식 주소: marketplace.visualstudio.com/items?itemN…

Markdown PDF

Markdown PDF: 이 확장 프로그램은 파일을 pdf, html, png 또는 jpeg 파일로 변환합니다.

• 플러그인 이름: Markdown PDF
• 공식 주소: marketplace.visualstudio.com/items?itemN…
• 특징: 다음 기능 지원:

• • 문법 강조 표시
  • emoticons
  • markdown-it-checkbox
  • markdown 컨테이너
  • markdown 포함
  • plant UML

• • • markdown-it - plantuml

• • Mermaid

Markdown 미리보기 향상

Markdown 미리보기 향상 s.

• 플러그인 이름: Markdown Preview Enhanced
• 공식 주소: marketplace.visualstudio.com/items?itemN…

VSCode에 대한 자세한 내용을 보려면 다음을 방문하세요. vscode 튜토리얼 !

위 내용은 개발 효율성을 향상시키는 23개의 프런트엔드 VSCode 플러그인(오셔서 수집하세요)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!