> 헤드라인 > [정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

青灯夜游
풀어 주다: 2022-10-21 20:45:40
앞으로
5293명이 탐색했습니다.

vim, notepad++, sublime text3,atom... 등 수많은 프런트엔드 IDE가 있지만 지구상에서 누가 가장 강력한 IDE인지는 다들 알고 있으니 당연히 더 말할 필요가 없을 것 같습니다.

저는 VSCode를 7년 넘게 사용해 온 사용자입니다. VSCode가 정식 출시된 첫해부터 사용하기 시작하여 지금까지 저는 노련한 시니어 사용자이자 생산성 마니아입니다.

이 글에서는 제가 수년간 VSCode를 사용하는 과정에서 사용해 본 좋은 플러그인들을 주로 소개합니다. [추천 학습: "vscode 입문 튜토리얼"]

네이키드 VSCode는 네이키드 Obsidian처럼 사용하기 쉽지 않다고 불평하는 사람들이 많습니다. 그 본질은 확장 기능에 있습니다. 모두 플러그인이라고 합니다) ). 잘 설정된 VSCode는 생산성 인공물인 Swiss Army Knife와 다름없습니다.

좋아, 시작해 보자!

물고기를 만져보세요


Nuggets

첫 번째는 당연하죠.

선배 너겟 플레이어로서 VSCode에서 너겟을 플레이할 줄도 모르는데 어떻게 프론트엔드 서클에 있다고 말할 수 있는 용기가 있겠습니까?

이것은 어두운 테마입니다:

[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

이것은 밝은 테마입니다:

[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

이것은 기사 페이지입니다:

[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!
채팅 모드, Zen 모드 및 기타 기능도 있습니다. 와서 경험해 보세요. !

[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

다운로드 주소: marketplace.visualstudio.com/items?itemN…

LiKou

LiKou 계정에 로그인하여 VSCode에서 직접 질문을 읽고 솔루션을 작성할 수 있습니다!

[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

다운로드 주소: marketplace.visualstudio.com/items?itemN…

Little Overlord

VSCode에서 게임을 플레이하고 싶으신가요? 그것은 할 수 있습니다!

하지만 저는 게임을 하지 않으며, 근무시간 중에는 게임을 하는 것을 추천하지 않습니다. 너겟을 브러싱하거나 덩크를 세게 해도 괜찮습니다.

[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

다운로드 주소 : marketplace.visualstudio.com/items?itemN…

코드 프롬프트 아티팩트, 저는 지금까지 사용해왔습니다 그 이후로 저는 기본적으로 코드를 작성할 때 손을 사용하지 않습니다.

보세요, f를 입력했더니 함수 이름, 매개변수, 매개변수 유형 등 제가 하고 싶은 모든 것이 고려되어 있었습니다.

단점은 가끔 어설프고 수수료가 든다는 점이에요.


다운로드 주소:

marketplace.visualstudio.com/items?itemN… 코드를 완성하세요. 그런데 타나인은 코파일럿보다 조금 비싸지만 상대적으로 더 많은 기능을 가지고 있습니다. 와 부조종사 중에서 선택할 수 있는데 저는 둘 다 구매했어요.

다운로드 주소:

marketplace.visualstudio.com/items?itemN…

turbo-console-log

[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

JS를 작성하는 학생들에게 묻고 싶습니다. 우리가 가장 많이 작성한 코드는 무엇입니까? 그렇다면 console.log가 확실히 목록에 있습니다!
이 플러그인을 사용하면 인쇄할 변수 위로 커서를 이동하기만 하면 됩니다. ctrl+option+l을 누르면 다음 줄에 console.log가 자동으로 입력되고 파일 이름, 줄 번호, 변수 이름이 입력됩니다. 등 정보를 다 가지고 왔는데 편리하지 않나요?

[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

다운로드 주소: marketplace.visualstudio.com/items?itemN… . 각 들여쓰기에는 서로 다른 무지개 색상이 번갈아 나타납니다.

다운로드 주소: marketplace.visualstudio.com/items?itemN…

indent-rainbow-palettes[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

rainbow 들여쓰기 그라데이션 색상 팔레트. 무지개 들여쓰기를 사용하지만 다른 그라데이션 색상을 사용하고 싶다면 이 플러그인이 필요합니다! 현재 16가지 그라데이션 색상을 지원합니다.

다운로드 주소: marketplace.visualstudio.com/items?itemN…

highlight-matching-tag[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

태그 강조. 복잡한 DOM 구조가 있는 경우 이 플러그인을 사용하여 닫는 태그를 강조 표시함으로써 낮은 수준의 실수를 방지할 수 있습니다.

다운로드 주소: marketplace.visualstudio.com/items?itemN…

vscode-colorize[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

색상 하이라이트.

색상 변수를 배경색으로 채워 강조표시하세요.

CSS 지원:

JavaScript 지원:

또한 모든 파일 형식을 지원하므로 구성하기만 하면 됩니다.

[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!다운로드 주소:

marketplace.visualstudio.com/items?itemN…

6-[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

vscode-todo-highlight

할일 하이라이트.

코드를 작성하다 보면 해야 할 일, 고쳐야 할 버그 등을 종종 발견하게 되는데, 지금은 완성할 시간이 없어 댓글을 남깁니다. 이러한 주석을 무시하기 어렵게 만들기 위해 이 플러그인을 사용할 수 있습니다.

기본적으로 TODO 및 FIXME 키워드가 강조 표시됩니다. 다른 키워드를 구성하고 하이라이트 색상을 설정할 수도 있습니다.

다운로드 주소:

marketplace.visualstudio.com/items?itemN…

better-comments[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

댓글 강조 표시.

이 플러그인은 코드에 더욱 사용자 친화적인 주석을 삽입하는 데 도움이 됩니다.

TODO 및 FIXME 외에도 댓글에 대한 일부 유형을 정의할 수도 있습니다.

다른 유형의 댓글도 맞춤설정할 수 있습니다.

다운로드 주소:

marketplace.visualstudio.com/items?itemN…

[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

vscode-import-cost

가져온 패키지의 볼륨을 표시합니다.

JavaScript 프로젝트를 작성할 때 많은 라이브러리를 가져옵니다.

이 플러그인은 가져온 패키지의 양을 확인하는 데 도움이 됩니다.

[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

다운로드 주소: marketplace.visualstudio.com/items?itemN…

auto-close-tag

자동으로 태그를 닫습니다.

<div>를 입력하면 다음 대괄호가 자동으로 추가됩니다. <code><div> 时,它会自动把后面的括号补充好。<p>虽然很简单的功能,但却是刚需!</p> <p><img src="https://img.php.cn/upload/image/191/846/797/166191622632230%5B%EC%A0%95%EB%A6%AC%20%EB%B0%8F%20%EA%B3%B5%EC%9C%A0%5D%2050%EA%B0%9C%20%EC%9D%B4%EC%83%81%EC%9D%98%20%EC%8B%A4%EC%9A%A9%EC%A0%81%EC%9D%B8%20VSCode%20%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8%EC%9D%84%20%EB%AA%A8%EC%95%84%EC%84%9C%20%EC%82%AC%EC%9A%A9%ED%95%B4%20%EB%B3%B4%EC%84%B8%EC%9A%94!" title="166191622632230[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!" alt="[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!"></p> <p>下载地址:<a href="https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag" target="_blank" textvalue="marketplace.visualstudio.com/items?itemN…">marketplace.visualstudio.com/items?itemN…</a></p> <p><strong><span style="font-size: 16px;">code-spell-checker</span></strong></p> <p>拼写错误检查。</p> <p>当我们编写代码时,偶尔会出现单词拼错的情况,这个插件可以检查到可能拼写错误的单词,并有波浪线提醒。</p> <p>它支持驼峰命名法。</p> <p><img src="https://img.php.cn/upload/image/744/455/624/166191670658301%5B%EC%A0%95%EB%A6%AC%20%EB%B0%8F%20%EA%B3%B5%EC%9C%A0%5D%2050%EA%B0%9C%20%EC%9D%B4%EC%83%81%EC%9D%98%20%EC%8B%A4%EC%9A%A9%EC%A0%81%EC%9D%B8%20VSCode%20%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8%EC%9D%84%20%EB%AA%A8%EC%95%84%EC%84%9C%20%EC%82%AC%EC%9A%A9%ED%95%B4%20%EB%B3%B4%EC%84%B8%EC%9A%94!" title="166191670658301[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!" alt="1[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!"></p> <p>下载地址:<a href="https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker" target="_blank" textvalue="marketplace.visualstudio.com/items?itemN…">marketplace.visualstudio.com/items?itemN…</a></p> <p><strong><span style="font-size: 16px;">path-intellisense</span></strong></p> <p>智能路径感知,可以帮我们自动补充文件名。</p> <p><img src="https://img.php.cn/upload/image/345/662/845/166191673873924%5B%EC%A0%95%EB%A6%AC%20%EB%B0%8F%20%EA%B3%B5%EC%9C%A0%5D%2050%EA%B0%9C%20%EC%9D%B4%EC%83%81%EC%9D%98%20%EC%8B%A4%EC%9A%A9%EC%A0%81%EC%9D%B8%20VSCode%20%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8%EC%9D%84%20%EB%AA%A8%EC%95%84%EC%84%9C%20%EC%82%AC%EC%9A%A9%ED%95%B4%20%EB%B3%B4%EC%84%B8%EC%9A%94!" title="166191673873924[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!" alt="1[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!"></p> <p>下载地址:<a href="https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense" target="_blank" textvalue="marketplace.visualstudio.com/items?itemN…">marketplace.visualstudio.com/items?itemN…</a></p> <p><strong><span style="font-size: 16px;">Toggle Quotes</span></strong></p> <p>JavaScript 的字符串可以支持三种形式,单引号、双引号、尖角号,有时候我们想要拼接字符串时,需要将原来的单引号或双引号改为尖角号。使用这个插件,只需要按下快捷键 <code>cmd+'

아주 간단한 기능이지만 꼭 필요한 기능이에요!

[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요![정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

다운로드 주소: 마켓플레이스 .visualstudio.com/items?itemN…

code-spell-checker

맞춤법 오류 검사기.

코드를 작성할 때 가끔 단어의 철자가 틀릴 수 있습니다. 이 플러그인은 철자가 틀린 단어를 확인하고 물결선 알림을 표시할 수 있습니다.

카멜 케이스 명명법을 지원합니다.

14 (1).gif1[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

다운로드 주소: 마켓플레이스 .visualstudio.com/items?itemN…

path-intellisense

지능형 경로 감지를 통해 자동으로 파일 이름을 보완할 수 있습니다.


1[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!다운로드 주소: 마켓플레이스 .visualstudio.com/items?itemN…

Toggle Quotes


JavaScript 문자열은 작은 따옴표, 큰 따옴표 및 각도의 세 가지 형식을 지원할 수 있습니다. 때로는 문자열을 이어붙이고 싶을 때 원본을 변경해야 합니다. 작은 따옴표나 큰 따옴표를 날카로운 각도로 변환합니다. 이 플러그인을 사용하려면 단축키 cmd+'를 누르세요.

다운로드 주소: marketplace.visualstudio.com/items?itemN…

템플릿 문자열 변환기

JavaScript 템플릿 문자열을 자동으로 변환할 수 있습니다.

ToggleQuotes와의 차이점은 자동으로 수행된다는 점입니다.

다운로드 주소: 🎜marketplace.visualstudio.com/items?itemN…🎜🎜🎜🎜🎜HTML🎜🎜🎜🎜클래스 자동 완성 스마트 팁의 CSS 클래스 이름용 IntelliSense. 🎜다운로드 주소: 🎜marketplace.visualstudio.com/items?itemN…🎜🎜🎜🎜🎜Tailwind CSS IntelliSense🎜🎜🎜🎜tailwind CSS의 자동 완성 스마트 팁. 🎜tailwind CSS를 사용하는 경우 HTML의 CSS 클래스 이름에 대해 IntelliSense를 비활성화할 수 있습니다. 🎜다운로드 주소: 🎜marketplace.visualstudio.com/items?itemN…🎜🎜🎜🎜🎜npm Intellisense🎜🎜🎜🎜이 플러그인은 가져올 모듈을 지능적으로 감지하는 데 도움이 될 수 있습니다. 🎜import를 입력하면 자동으로 완료됩니다. 🎜다운로드 주소: 🎜marketplace.visualstudio.com/items?itemN…🎜🎜🎜🎜🎜change-case🎜🎜🎜

때때로 대시, 밑줄, 모두 대문자 등과 같은 변수의 명명 규칙을 수정하고 싶을 때가 있습니다.
이 플러그인은 변수 이름을 수정하는 데 도움이 될 수 있습니다.
변수명만 수정하면 아무 소용이 없을 것 같습니다. 하지만 동시에 많은 변수 이름을 수정할 수 있다는 장점이 있습니다.

1[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

다운로드 주소: marketplace.visualstudio.com/items?itemN…

중첩 댓글

중첩 댓글은 항상 문제였습니다.
중첩된 댓글은 첫 번째 댓글의 시작 부분과 결합되어 유효한 댓글이 되기 때문에 다음 부분은 무시됩니다.

1[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

이 플러그인은 중첩된 댓글의 문자를 변환하는 데 도움이 되며, 외부 댓글의 차단을 해제하면 중첩된 댓글을 복원할 수 있습니다.

다운로드 주소: marketplace.visualstudio.com/items?itemN…

태그 자동 이름 바꾸기

태그 이름을 자동으로 바꿀 수 있습니다. 앞이나 뒤에서 수정하시면 됩니다. 동시에.

[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

다운로드 주소: marketplace.visualstudio.com/items?itemN…

ES7+ React/Redux/React-Native 스니펫

이 플러그인은 ES7/React/Redux/React-Native 등을 제공합니다. .
템플릿 코드를 빠르게 생성하고 개발 효율성을 향상시킬 수 있습니다.
예를 들어 React의 useState Hook을 사용하면 setXXX의 Camel Case 명명 방법을 자동으로 변환하고 자동으로 커서 위치로 이동할 수 있습니다.

18 (1).gif

다운로드 주소: marketplace.visualstudio.com/items?itemN…

ESLint

이 플러그인은 ESLint를 VSCode에 통합합니다. 이 플러그인을 사용하여 작업 공간.
다운로드 주소: marketplace.visualstudio.com/items?itemN…

Prettier

아주 클래식한 플러그인인 이 플러그인은 다양한 파일 콘텐츠의 형식을 지정할 수 있습니다.

[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

다운로드 주소: marketplace.visualstudio.com/items?itemN…

Glean

복잡한 JSX를 별도의 구성 요소나 파일로 추출할 수 있어 리팩토링 시 사용할 수 있어 매우 유용합니다.

[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

다운로드 주소: marketplace.visualstudio.com/items?itemN…

htmltagwrap

특정 DOM 태그를 래핑해야 할 때 이 플러그인은 매우 유용합니다.
DOM 태그를 선택한 다음 옵션+w를 눌러 외부 레이어에 태그를 만들 수 있습니다.

[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

다운로드 주소: marketplace.visualstudio.com/items?itemN…

Version Lens

프로젝트가 의존하는 npm 패키지의 최신 버전을 확인하고, 최신 버전.

2[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

다운로드 주소: marketplace.visualstudio.com/items?itemN…

Hungry Delete

이 플러그인을 사용하면 한 번의 클릭으로 여러 개의 빈 줄을 삭제할 수 있습니다.

여러 개의 빈 줄을 삭제하려면 Option+Delete를 누르세요.

[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

다운로드 주소: marketplace.visualstudio.com/items?itemN…

JSON을 코드로 붙여넣기

JSON 조각을 복사할 때 다음을 기반으로 해당 JSON 구조를 생성하려고 합니다. 그러면 이 플러그인을 사용할 수 있습니다.
TypeScript, Python, Go, Java 등과 같은 다양한 프로그래밍 언어를 지원합니다.

2[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

다운로드 주소: marketplace.visualstudio.com/items?itemN… .env 파일을 사용하여 환경 변수를 저장합니다. 이 플러그인은 .env 파일을 강조 표시할 수 있습니다.

다운로드 주소: marketplace.visualstudio.com/items?itemN…

Dracula의 공식 테마 중 가장 클래식 테마와 내가 가장 좋아하는 테마.

2[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

다운로드 주소:

marketplace.visualstudio.com/items?itemN…

Material 테마

Material 테마는 코드를 더욱 멋지게 보이게 해주는 Material 스타일 테마를 제공합니다.


다운로드 주소: marketplace.visualstudio.com/items?itemN…

One Dark Pro

2[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

Atom 사용자이거나 Atom 테마를 좋아하는 개발자라면 이 테마를 사용해 보세요. 플러그인.

다운로드 주소 : marketplace.visualstudio.com/items?itemN… 구별하기 위한 파일입니다. VSCode Icons 플러그인이 바로 이러한 작업을 수행합니다! VSCode의 기본 디렉터리 구조는 다음과 같습니다.

VSCode 아이콘을 사용한 후 아이콘은 다음과 같습니다. 2[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

다운로드 주소:

marketplace.visualstudio.com/items?itemN…

file-icons

또 다른 아이콘 테마 플러그인. 2[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

다운로드 주소: marketplace.visualstudio.com/items?itemN…

Material Icon Theme

은 거의 가장 완벽한 아이콘 테마 플러그인입니다.
다양한 종류의 파일 지원:

3[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!다양한 종류의 폴더 지원:

3[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!다운로드 주소:

marketplace.visualstudio.com/items?itemN…

Tools


todo-tree
todo 트리는 TODO 및 FIXME 댓글을 통해 프로젝트를 관리할 수 있습니다.

주석이 달린 파일을 빠르게 볼 수 있습니다.

3[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!다운로드 주소:

marketplace.visualstudio.com/items?itemN… 다양한 항목을 구별하기 위한 색상입니다.

기본적으로 지원되는 색상은 Angular red, Microsoft blue, JS yellow, mandalorian blue, Node green, React blue 등입니다.

다운로드 주소:

marketplace.visualstudio.com/items?itemN… 이 플러그인을 사용하세요.

코드의 논리를 더 잘 검증할 수 있는 플레이그라운드를 제공합니다.

3[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

다운로드 링크:

marketplace.visualstudio.com/items?itemN…3[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

rest-client

API를 테스트하는 방법에는 중량급 PostMan, 경량 Curl 등 여러 가지가 있습니다. 그러나 그 중 어느 것도 VSCode에서 사용하기 편리하지 않습니다. REST 클라이언트는 VSCode에서 API를 쉽게 테스트하는 데 도움이 되는 좋은 플러그인입니다.


다운로드 주소:

marketplace.visualstudio.com/items?itemN…3[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

VS Code용 EditorConfig

우리 프로젝트가 여러 편집기 도구를 사용하여 개발될 때 코드 스타일을 통일하고 싶습니다. 다양한 도구의 구성 파일을 구성해야 합니다. 이 도구를 사용하면 .editorconfig 하나만 작성하여 모든 편집기에서 이러한 규칙을 공통으로 만들 수 있습니다. 다운로드 주소:

marketplace.visualstudio.com/items?itemN…


3[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!Git Lens

VSCode에는 Git 기능이 내장되어 있지만 충분히 강력하지는 않습니다.

Git Lens는 Git의 기능을 추가하고, 각 코드 줄에서 커밋 정보를 볼 수 있으며, 다양한 커밋 간의 차이점과 기타 유용한 Git 기능을 비교할 수도 있습니다.

다운로드 주소:

marketplace.visualstudio.com/items?itemN…



GitHub에서 열기

Github에서 프로젝트, 파일, 액션, PR 등을 빠르게 열 수 있습니다.

[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

다운로드 주소: marketplace.visualstudio.com/items?itemN…

브라우저에서 열기

브라우저에서 HTML 파일을 빠르게 열 수 있도록 지원합니다.
HTML 파일을 마우스 오른쪽 버튼으로 클릭하면 메뉴에 두 가지 옵션이 있거나 해당 단축키를 사용할 수 있습니다.

4[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

다운로드 주소: marketplace.visualstudio.com/items?itemN… 플러그인 . 로컬에서 서버를 시작하고, 파일 변경 사항을 모니터링하고, 브라우저를 새로 고칩니다.

HTML 파일을 마우스 오른쪽 버튼으로 클릭하면 메뉴에 두 가지 옵션이 있거나 해당 단축키를 사용할 수 있습니다.

다운로드 주소:

marketplace.visualstudio.com/items?itemN…



Live Preview4[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!

VSCode에서 HTML을 실시간으로 미리 볼 수 있습니다. 그러나 React 및 Angular와 같은 프레임워크로 개발된 애플리케이션은 지원하지 않습니다.

다운로드 주소 : marketplace.visualstudio.com/items?itemN… 태그 및 기타 기능.


다운로드 주소: 4[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!marketplace.visualstudio.com/items?itemN…

Live Share

실시간 공동 편집 및 디버깅을 위해 다른 사람과 코드를 공유하고 싶으신가요? 이 플러그인은 모든 프로그래밍 언어 또는 모든 유형의 프로젝트로 개발된 프로젝트를 다른 사람들과 공유할 수 있습니다. 별도의 환경이나 SDK 설치 없이 상대방이 귀하의 환경에서 직접 코드를 작성할 수 있습니다. 웹에서 직접 공동작업하고 편집할 수도 있습니다!

4[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!다운로드 주소 :

marketplace.visualstudio.com/items?itemN…

Markdown PDF이름은 마크다운 PDF이지만, 마크다운은 실제로 다양한 형식의 파일로 내보낼 수 있습니다.

다양한 내보내기 형식을 지원합니다.


4[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!다운로드 주소:

marketplace.visualstudio.com/items?itemN…

Markdown 미리보기 Github 스타일링Github 스타일로 Markdown 파일 미리보기.


다운로드 주소: 4[정리 및 공유] 50개 이상의 실용적인 VSCode 플러그인을 모아서 사용해 보세요!marketplace.visualstudio.com/items?itemN…

Summary

가장 많이 소개되었습니다. 가장 빠르고 안정적이며 가장 적합한 IDE를 구축해 보세요! 이 글이 도움이 되셨다면 좋아요 부탁드립니다. 더 실용적이고 가치 있는 VSCode 플러그인이 있다면 댓글란에 메시지를 남겨주세요.

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

관련 라벨:
원천:juejin.cn
이전 기사:[요약 공유] 일반적으로 사용되는 프런트엔드 및 백엔드 인증 방법 10가지, 더 이상 헷갈리지 마세요 다음 기사:이 점을 이해하고 프론트엔드 70%를 따라잡는 글
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
관련 주제
더>
인기 추천
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿